JavaScript requestAnimationFrame函数动画

<!-- <script src="https://js.cx/libs/animate.js"></script> -->
<textarea id="textExample" rows="5" cols="60">
He took his vorpal sword in hand:
Long time the manxome foe he sought—
So rested he by the Tumtum tree,
And stood awhile in thought.
</textarea>

<button onclick="animateText(textExample)">Run the animated typing!</button>

<script>
  function animateText(textArea) {
    let text = textArea.value;
    let to = text.length,
      from = 0;

    animate({
      duration: 5000,
      timing: bounce,
      draw: function(progress) {
        let result = (to - from) * progress + from;
        textArea.value = text.substr(0, Math.ceil(result))
      }
    });
  }

  function bounce(timeFraction) {
    for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
      if (timeFraction >= (7 - 4 * a) / 11) {
        return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
      }
    }
  }

  function animate(options) {
    var start = performance.now();
    requestAnimationFrame(function animate(time) {
      // timeFraction от 0 до 1
      var timeFraction = (time - start) / options.duration;
      if (timeFraction > 1) timeFraction = 1;

      // текущее состояние анимации
      var progress = options.timing(timeFraction)
      
      options.draw(progress);

      if (timeFraction < 1) {
        requestAnimationFrame(animate);
      }
    });
  }
</script>

实例2

<script src="https://js.cx/libs/animate.js"></script>
<div id="field">
  <img src="https://js.cx/clipart/ball.svg" width="40" height="40" id="ball">
</div>

<script>
  function makeEaseOut(timing) {
    return function(timeFraction) {
      return 1 - timing(1 - timeFraction);
    }
  }

  function bounce(timeFraction) {
    for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
      if (timeFraction >= (7 - 4 * a) / 11) {
        return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
      }
    }
  }

  ball.onclick = function() {

    let to = field.clientHeight - ball.clientHeight;

    animate({
      duration: 2000,
      timing: makeEaseOut(bounce),
      draw(progress) {
        ball.style.top = to * progress + 'px'
      }
    });
  };
</script>

<style>
#field {
  height: 200px;
  border-bottom: 3px black groove;
  position: relative;
}

#ball {
  position: absolute;
  cursor: pointer;
}
</style>

实例3

<script src="https://js.cx/libs/animate.js"></script>
<div id="field">
  <img src="https://js.cx/clipart/ball.svg" width="40" height="40" id="ball">
</div>

<script>
  function makeEaseOut(timing) {
    return function(timeFraction) {
      return 1 - timing(1 - timeFraction);
    }
  }

  function bounce(timeFraction) {
    for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
      if (timeFraction >= (7 - 4 * a) / 11) {
        return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
      }
    }
  }

  function quad(timeFraction) {
    return Math.pow(timeFraction, 2);
  }

  ball.onclick = function() {

    let height = field.clientHeight - ball.clientHeight;
    let width = 100;

    animate({
      duration: 2000,
      timing: makeEaseOut(bounce),
      draw: function(progress) {
        ball.style.top = height * progress + 'px'
      }
    });

    animate({
      duration: 2000,
      timing: makeEaseOut(quad),
      draw: function(progress) {
        ball.style.left = width * progress + "px"
      }
    });
  }
</script>

<style>
#field {
  height: 200px;
  border-bottom: 3px black groove;
  position: relative;
}

#ball {
  position: absolute;
  cursor: pointer;
}
</style>