从0到1，开发一个动画库(2)

传送门：从0到1，开发一个动画库(1)

上一节讲到了最基础的内容，为动画构建“帧-值”对应的函数关系，完成“由帧到值”的计算过程。这一节将在上节代码的基础上谈谈如何给一个完整的动画添加各种事件。

在添加各种事件以前，咱们先对_loop循环函数进行一些改进：

_loop() {
  const t = Date.now() - this.beginTime,
        d = this.duration,
        func = Tween[this.timingFunction] || Tween['linear'];

  if (this.state === 'end' || t >= d) {
    this._end();
  } else if (this.state === 'stop') {
    this._stop(t);
  } else if (this.state === 'init') {
    this._reset();
  } else {
    this._renderFunction(t, d, func)
    window.requestAnimationFrame(this._loop.bind(this));
  }
}

能够清晰地看到，咱们在循环中增长了不少类型的判断，根据state当前不一样的状态执行相应的处理函数：咱们新增了_end、_stop、_reset方法分别去处理结束、暂停和重置这三种状态，接下来咱们依次讲解这些状态的处理。

End

咱们在Core类下增长_end、end和renderEndState方法，end方法用于主动结束动画：

end() {
  this.state === 'play' ? (this.state = 'end') : this._end();
}

_end() {
  this.state = 'end';
  this._renderEndState();
  this.onEnd && this.onEnd();
}

_renderEndState() {
  const d = this.duration,
        func = Tween[this.timingFunction] || Tween['linear'];
  this._renderFunction(d, d, func);
}

经过执行end方法，咱们能够主动结束动画：若是当前目标处于运动状态，则将其设置为end，所以下一个_loop函数被执行的时候，程序就被流向了_end处理函数；若为其余状态，意味着循环没有被打开，咱们就直接调用_end方法，使其直接到终止状态。

_end函数的做用有三个：

• 将当前状态设置为end（为什么要重复设置一次状态呢？这不是多余的吗？其实，假若咱们主动触发end去结束动画，这的确是多余的，但若是是动画本身进行到了末尾，也就是t >= d的时刻，则必须得在_end中去设置状态，以确保它处于结束状态）
• 经过_renderEndState方法，将目标变成结束状态
• 如有回调函数则执行回调

Reset

重置动画的方式也是大同小异，与上面同样

reset() {
  this.state === 'play' ? (this.state = 'init') : this._reset();
}

_reset() {
  this.state = 'init';
  this._renderInitState();
  this.onReset && this.onReset();
}

_renderInitState() {
  const d = this.duration,
        func = Tween[this.timingFunction] || Tween['linear'];
  this._renderFunction(0, d, func);
}

Stop

让动画暂停也是与上述二者同样，但惟一的区别是，须要给_renderStopState方法传入当前时间进度：

stop() {
  if (this.state === 'play') {
    this.state = 'stop';
  } else {
    // 使目标暂停，无需像end或reset那样将目标变成结束/起始状态，保持当前状态便可
    this.state = 'stop';
    this.onStop && this.onStop();
  }
}

_stop(t) {
  this.state = 'stop';
  this._renderStopState(t);
  this.onStop && this.onStop();
}

_renderStopState(t) {
  const d = this.duration,
        func = Tween[this.timingFunction] || Tween['linear'];
  this._renderFunction(t, d, func);
}

play

咱们要在动画开始执行的时候触发onPlay事件，只需在_play方法内增长一行代码便可：

_play() {
      this.state = 'play';
  
      // 新增部分
    this.onPlay && this.onPlay();
  
      this.beginTime = Date.now();
      const loop = this._loop.bind(this);
    window.requestAnimationFrame(loop);
}```

完整代码以下：

import Tween from './tween';

class Core {
    constructor(opt) {
        this._init(opt);
        this.state = 'init';
    }

    _init(opt) {
    this._initValue(opt.value);
    this.duration = opt.duration || 1000;
    this.timingFunction = opt.timingFunction || 'linear';
    this.renderFunction = opt.render || this._defaultFunc;

    /* Events */
    this.onPlay = opt.onPlay;
    this.onEnd = opt.onEnd;
    this.onStop = opt.onStop;
    this.onReset = opt.onReset;
  }

  _initValue(value) {
      this.value = [];
      value.forEach(item => {
          this.value.push({
              start: parseFloat(item[0]),
              end: parseFloat(item[1]),
          });
      })
  }

  _loop() {
    const t = Date.now() - this.beginTime,
      d = this.duration,
      func = Tween[this.timingFunction] || Tween['linear'];

    if (this.state === 'end' || t >= d) {
      this._end();
    } else if (this.state === 'stop') {
      this._stop(t);
    } else if (this.state === 'init') {
      this._reset();
    } else {
      this._renderFunction(t, d, func)
      window.requestAnimationFrame(this._loop.bind(this));
    }
  }

  _renderFunction(t, d, func) {
      const values = this.value.map(value => func(t, value.start, value.end - value.start, d));
      this.renderFunction.apply(this, values);
  }
  
  _renderEndState() {
    const d = this.duration,
      func = Tween[this.timingFunction] || Tween['linear'];
    this._renderFunction(d, d, func);
  }

  _renderInitState() {
    const d = this.duration,
      func = Tween[this.timingFunction] || Tween['linear'];
    this._renderFunction(0, d, func);
  }

  _renderStopState(t) {
    const d = this.duration,
      func = Tween[this.timingFunction] || Tween['linear'];
    this._renderFunction(t, d, func);
  }

  _stop(t) {
    this.state = 'stop';
    this._renderStopState(t);
    this.onStop && this.onStop();
  }

  _play() {
      this.state = 'play';
    this.onPlay && this.onPlay();
    
      this.beginTime = Date.now();
      const loop = this._loop.bind(this);
    window.requestAnimationFrame(loop);
  }

  _end() {
    this.state = 'end';
    this._renderEndState();
    this.onEnd && this.onEnd.call(this);
  }

  _reset() {
    this.state = 'init';
    this._renderInitState();
    this.onReset && this.onReset();
  }

  play() {
      this._play();
  }

  end() {
    this.state === 'play' ? (this.state = 'end') : this._end();
  }

  reset() {
    this.state === 'play' ? (this.state = 'init') : this._reset();
  }

  stop() {
    if (this.state === 'play') {
      this.state = 'stop';
    } else {
      this.state = 'stop';
      this.onStop && this.onStop();
    }
  }
}

window.Timeline = Core;

相应地，html的代码也更新以下，添加了各种按钮，主动触发目标的各种事件：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #box {
            width: 100px;
            height: 100px;
            background: green;
        }
    </style>
</head>
<body>
<div id="box"></div>
<button id="start">START</button>
<button id="end">END</button>
<button id="stop">STOP</button>
<button id="reset">RESET</button>
<script type="text/javascript" src="timeline.min.js"></script>
<script type="text/javascript">
    const el = (name) => document.querySelector(name);
    const box = el('#box');
    const timeline = new Timeline({
        duration: 3000,
        value: [[0, 400], [0, 600]],
        render: function(value1, value2) {
            box.style.transform = `translate(${ value1 }px, ${ value2 }px)`;
        },
        timingFunction: 'easeOut',
        onPlay: () => console.log('play'),
        onEnd: () => console.log('end'),
        onReset: () =>  console.log('reset'),
        onStop: () => console.log('stop')
    })

    el('#start').onclick = () => timeline.play();
    el('#end').onclick = () => timeline.end();
    el('#stop').onclick = () => timeline.stop()
    el('#reset').onclick = () => timeline.reset()
</script>
</body>
</html>

看到这里，咱们第二节的内容就结束啦，下一节，咱们将介绍：

• 支持自定义路径动画
• 动画间的链式调用

下一节再见啦^_^