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

傳送門：從0到1，開發(fā)一個動畫庫(1)

上一節(jié)講到了最基礎的內(nèi)容，為動畫構(gòu)建“幀-值”對應的函數(shù)關系，完成“由幀到值”的計算過程。這一節(jié)將在上節(jié)代碼的基礎上談談如何給一個完整的動畫添加各類事件。

在添加各類事件之前，我們先對_loop循環(huán)函數(shù)進行一些改進：

_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));
  }
}

可以清晰地看到，我們在循環(huán)中增加了很多類型的判斷，根據(jù)state當前不同的狀態(tài)執(zhí)行相應的處理函數(shù)：我們新增了_end、_stop、_reset方法分別去處理結(jié)束、暫停和重置這三種狀態(tài)，接下來我們依次講解這些狀態(tài)的處理。

我們在Core類下增加_end、end和renderEndState方法，end方法用于主動結(jié)束動畫：

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);
}

通過執(zhí)行end方法，我們可以主動結(jié)束動畫：如果當前目標處于運動狀態(tài)，則將其設置為end，因此下一個_loop函數(shù)被執(zhí)行的時候，程序就被流向了_end處理函數(shù)；若為其他狀態(tài)，意味著循環(huán)沒有被打開，我們就直接調(diào)用_end方法，使其直接到終止狀態(tài)。

_end函數(shù)的作用有三個：

將當前狀態(tài)設置為end（為何要重復設置一次狀態(tài)呢？這不是多余的嗎？其實，倘若我們主動觸發(fā)end去結(jié)束動畫，這的確是多余的，但如果是動畫自己進行到了末尾，也就是t >= d的時刻，則必須得在_end中去設置狀態(tài)，以確保它處于結(jié)束狀態(tài)）

通過_renderEndState方法，將目標變成結(jié)束狀態(tài)

若有回調(diào)函數(shù)則執(zhí)行回調(diào)

重置動畫的方式也是大同小異，與上面一樣

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);
}

讓動畫暫停也是與上述兩者一樣，但唯一的區(qū)別是，需要給_renderStopState方法傳入當前時間進度：

stop() {
  if (this.state === "play") {
    this.state = "stop";
  } else {
    // 使目標暫停，無需像end或reset那樣將目標變成結(jié)束/起始狀態(tài)，保持當前狀態(tài)即可
    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);
}

我們要在動畫開始執(zhí)行的時候觸發(fā)onPlay事件，只需在_play方法內(nèi)增加一行代碼即可：

_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的代碼也更新如下，添加了各類按鈕，主動觸發(fā)目標的各類事件：

    
    



START
END
STOP
RESET

看到這里，我們第二節(jié)的內(nèi)容就結(jié)束啦，下一節(jié)，我們將介紹：

支持自定義路徑動畫

動畫間的鏈式調(diào)用

下一節(jié)再見啦^_^