动画优化

动画优化

• 动画效果在缺少硬件加速支持的情况下反应缓慢，例如手机客户端。

  • 特效应该只在确实能改善用户体验时才使用，而不应用于炫耀或者弥补功能与可用性上的缺陷。
  • 至少要给用户一个选择可以禁用动画效果。
  • 设置动画元素为absolute或fixed。
    • position: static或position: relative元素应用动画效果会造成频繁的reflow。
    • position: absolute或position: fixed的元素应用动画效果只需要repaint。
  • 使用一个timer完成多个元素动画。
    • setInterval和setTimeout是两个常用的实现动画的接口，用以间隔更新元素的风格与布局。。

  • 动画效果的帧率最优化的情况是使用一个timer完成多个对象的动画效果，其原因在于多个timer的调用本身就会损耗一定性能。

    setInterval(function() {
      animateFirst('');
    }, 10);
    setInterval(function() {
      animateSecond('');
    }, 10);

    使用同一个timer。

    setInterval(function() {
      animateFirst('');
      animateSecond('');
    }, 10);

• 以脚本为基础的动画，由浏览器控制动画的更新频率。