面试题：复杂动画场景下transition的property选择与优化

Question

在一个包含多个元素联动且具有复杂动画效果的页面中，比如一个类似幻灯片切换且带有元素淡入淡出、缩放等效果的场景，如何准确选择transition的property属性，以避免性能问题，并实现流畅的过渡效果？请阐述具体思路及可能用到的优化方法。

Answer 1

具体思路

1. 分析动画需求：
   • 明确每个元素具体的动画效果，如幻灯片切换是位移，淡入淡出是透明度变化，缩放是尺寸变化。根据这些效果确定核心的属性变化。
   • 例如淡入淡出效果，主要涉及 opacity 属性；缩放效果涉及 transform: scale() 中的 scale 属性；幻灯片切换如果是水平或垂直移动，涉及 transform: translate(x,y) 中的 translate 属性。
2. 考虑性能影响：
   • 优先选择合成器可处理的属性，因为这些属性不触发重排和重绘，能极大提升性能。如 transform 和 opacity 属于这类属性，而 width、height 等改变布局的属性会触发重排，应尽量避免直接用于过渡效果。
   • 对于复杂动画，如果有多个属性变化，尝试将非关键的布局属性变化放在动画完成后通过 JavaScript 一次性修改，而过渡效果只应用在合成器友好的属性上。

优化方法

1. 硬件加速：
   • 为需要过渡效果的元素添加 will-change 属性来提示浏览器提前准备硬件加速。例如：element.style.willChange = 'transform'; 或者在 CSS 中设置 will-change: transform;，这样浏览器可以提前优化渲染，提高动画流畅度。
2. 减少过渡时间和帧数：
   • 在满足动画效果的前提下，尽量缩短过渡时间。较长的过渡时间可能会让用户感觉卡顿。
   • 对于动画帧数，避免设置过于频繁的关键帧。例如在 CSS 的 @keyframes 中，合理控制关键帧数量，减少浏览器计算压力。
3. 使用 requestAnimationFrame：
   • 如果动画中有 JavaScript 控制的部分，使用 requestAnimationFrame 来更新动画状态。它能与浏览器的刷新频率同步，确保动画在合适的时机更新，避免不必要的重绘，提升性能。例如：

function animate() {
    // 动画更新逻辑
    requestAnimationFrame(animate);
}
animate();

4. 优化元素层级：
   • 合理组织元素的层级关系，避免过多的重叠和嵌套。复杂的层级结构可能导致浏览器在绘制时进行大量的计算。将需要动画的元素提升到合适的层级，减少与其他元素的绘制干扰。
5. 测试与性能监测：
   • 使用浏览器的开发者工具，如 Chrome DevTools 的 Performance 面板，监测动画的性能指标，如帧率、CPU 和 GPU 使用率等。根据监测结果针对性地调整过渡属性和动画逻辑。例如，如果发现帧率过低，检查是否有频繁触发重排重绘的属性在过渡中使用，及时调整为合成器友好属性。