ES6-animatio/js/01.js

/*
* @Author: Johnhong9527
* @Date:   2019-07-25 11:31:43
* @Last Modified by:   Johnhong9527
* @Last Modified time: 2019-07-25 11:44:32
*/
var BezierEasing = require('bezier-easing')
var tween = {
  paused: false,
  duration: 6000,
  easing: BezierEasing(0, 0, 1, 0.5),
  update: function (v) {
    // anim 是下文定义的一个描述动画的对象
    anim.target.innerHTML = v
  }
}
var raf = null
function play() {
  raf = requestAnimationFrame(function (t) {
    step(t);
  })

  function step(t) {
    if (!tween.paused) {
      setInstanceProgress(t);
      play();
    } else {
      raf = cancelAnimationFrame(raf);
    }
  }
}