缓动函数requestAnimationFrame 更好的实现浏览器经动画

下面就是缓动函数 requestAnimationFrame 更好的实现浏览器经动画的攻略：

1. 了解什么是缓动函数

--缓动函数可以使动画的变化更加自然，不会显得生硬突兀。

--缓动函数在动画中可以应用于动画开头、结尾以及变化的整个时间段中，使得动画变化更加平滑自然。

2. 使用 requestAnimationFrame 提高性能

--在动画中使用 setInterval 会导致浏览器频繁刷新，造成性能上的负担。

--使用 requestAnimationFrame 可以通过计算机和浏览器的硬件信息来控制动画流畅度，并避免造成不必要的性能负担。

3. 实现缓动函数

--使用 requestAnimationFrame 配合缓动函数可以实现各种自然的动画效果，常用的缓动函数有：线性缓动、弹性缓动、反弹缓动、回弹缓动、加速缓动等。

--以下是两个示例说明：

3.1 线性缓动示例

function linearTween(t, b, c, d) {
  return c * t / d + b;
}

上面的代码中，t 表示当前时间，b 表示起始值，c 表示变化量，d 表示动画持续的时间。线性缓动函数的公式为 y = mx + b，在动画的每一帧中，将该函数作为变化规律即可实现线性缓动的动画效果。

3.2 弹性缓动示例

function elasticEaseOut(t, b, c, d) {
  var s = 1.70158;
  var p = 0;
  var a = c;

  if (t == 0) return b;
  if ((t /= d) == 1) return b + c;
  if (!p) p = d * 0.3;

  if (a < Math.abs(c)) {
    a = c;
    var s = p / 4;
  } else {
    var s = p / (2 * Math.PI) * Math.asin(c / a);
  }
  return (
    a *
      Math.pow(2, -10 * t) *
      Math.sin((t * d - s) * (2 * Math.PI) / p) +
    c + b
  );
}

上面的代码实现了弹性缓动效果。通过调整参数 s、p、a 的不同取值，可以实现不同形态的缓动效果。

综上所述，缓动函数 requestAnimationFrame 可以实现各种自然的动画效果，并且通过使用 requestAnimationFrame 控制动画流畅度，可以避免造成不必要的性能负担，提高浏览器的性能。