JavaScript 动画应该通过 requestAnimationFrame 实现。该内置方法允许设置回调函数，以便在浏览器准备重绘时运行。那通常很快，但确切的时间取决于浏览器。

    callback 得到一个参数 —— 从页面加载开始经过的毫秒数。这个时间也可通过调用 performance.now() 得到。

    当页面在后台时，根本没有重绘，因此回调将不会运行：动画将被暂停并且不会消耗资源。那很棒。
    这是设置大多数动画的 helper 函数 animate：

    1. function animate({ timing, draw, duration }) {
    2.   let start = performance.now();
    4.   requestAnimationFrame(function animate(time) {
    5.     // timeFraction 从 0 增加到 1
    6.     let timeFraction = (time - start) / duration;
    7.     if (timeFraction > 1) timeFraction = 1;
    9.     // 计算当前动画状态
    10.     let progress = timing(timeFraction);
    12.     draw(progress); // 绘制
    14.     if (timeFraction < 1) {
    15.       requestAnimationFrame(animate);
    16.     }
    17.   });
    18. }

    参数：

    • duration —— 动画运行的总毫秒数。
    • timing —— 计算动画进度的函数。获取从 0 到 1 的小数时间，返回动画进度，通常也是从 0 到 1。
    • draw —— 绘制动画的函数。

    当然我们可以改进它，增加更多花里胡哨的东西，但 JavaScript 动画不是经常用到。它们用于做一些有趣和不标准的事情。因此，您大可在必要时再添加所需的功能。
    JavaScript 动画可以使用任何时序函数。与 CSS 不同，我们不仅限于 Bezier 曲线。
    draw 也是如此：我们可以将任何东西动画化，而不仅仅是 CSS 属性。

    练习：跳动的小球
    http://js.jirengu.com/gucogeceve/1/edit?html,js,output

    1. <!DOCTYPE HTML>
    2. <html>
    4. <head>
    5.   <script src="https://js.cx/libs/animate.js"></script>
    6.   <style>
    7.       #field {
    8.         height: 200px;
    9.         border-bottom: 3px black groove;
    10.         position: relative;
    11.       }
    13.       #ball {
    14.         position: absolute;
    15.         cursor: pointer;
    16.       }
    17.   </style>
    18. </head>
    20. <body>
    22.   <div id="field">
    23.     <img src="https://js.cx/clipart/ball.svg" width="40" height="40" id="ball">
    24.   </div>
    26.   <script>
    27.     function makeEaseOut(timing) {
    28.       return function(timeFraction) {
    29.         return 1 - timing(1 - timeFraction);
    30.       }
    31.     }
    33.     function bounce(timeFraction) {
    34.       for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
    35.         if (timeFraction >= (7 - 4 * a) / 11) {
    36.           return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
    37.         }
    38.       }
    39.     }
    41.     function quad(timeFraction) {
    42.       return Math.pow(timeFraction, 2);
    43.     }
    45.     ball.onclick = function() {
    47.       let height = field.clientHeight - ball.clientHeight;
    48.       let width = 100
    50.       animate({
    51.         duration: 2000,
    52.         timing: makeEaseOut(bounce),
    53.         draw(progress) {
    54.           ball.style.top = height * progress + 'px'
    55.         }
    56.       });
    58.       animate({
    59.         duration: 2000,
    60.         timing: makeEaseOut(quad),
    61.         draw(progress) {
    62.           ball.style.left = width * progress + 'px'
    63.         }
    64.       });
    65.     };
    66.   </script>
    68. </body>
    70. </html>