摘要：傳送門從到，開發一個動畫庫上一節講到了最基礎的內容，為動畫構建幀值對應的函數關系，完成由幀到值的計算過程。這一節將在上節代碼的基礎上談談如何給一個完整的動畫添加各類事件。

傳送門：從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方法分別去處理結束、暫停和重置這三種狀態，接下來我們依次講解這些狀態的處理。

我們在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() {
  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);
}

讓動畫暫停也是與上述兩者一樣，但唯一的區別是，需要給_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);
}

我們要在動畫開始執行的時候觸發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的代碼也更新如下，添加了各類按鈕，主動觸發目標的各類事件：

    
    



START
END
STOP
RESET

看到這里，我們第二節的內容就結束啦，下一節，我們將介紹：

支持自定義路徑動畫

動畫間的鏈式調用

下一節再見啦^_^