摘要：發(fā)現(xiàn)倉庫被了很多次，因此下定決心要好好的把代碼整理一下，方便大家查看代碼以及更加愉快的。雖然這個簡介有點短，但是該篇的目的并不在于讓大家了解這個矩陣動畫，而是想讓大家一起來豐富這個倉庫。

前段時間，發(fā)布了一篇文章：學(xué)不動了，來點有趣的吧。發(fā)現(xiàn) github 倉庫被 frok 了很多次，因此下定決心要好好的把代碼整理一下，方便大家查看代碼以及更加愉快的 Pull Request。

該項目名叫 matrixchange ，編寫的目的在于方便開發(fā)者實現(xiàn)矩陣動畫，當(dāng)然該項目已經(jīng)發(fā)布到 npm ，使用 npm/yarn 安裝即可。

該庫為開發(fā)者提供了一個數(shù)組和一個函數(shù)，具體的文檔可以查看上一篇文章，或是在 github 上查看更為詳細(xì)的內(nèi)容。

ok 簡介到此完畢。雖然這個簡介有點短，但是該篇的目的并不在于讓大家了解這個矩陣動畫，而是想讓大家一起來豐富這個倉庫。

接下來進(jìn)入正題。

簡單來說就是有一個矩陣，然后讓它動起來，效果如下：

這就是一個簡單的矩陣動畫，動畫形式如何？

從右上到左下按照斜線進(jìn)行運(yùn)動

那么動畫效果呢？

翻轉(zhuǎn)消失，然后翻轉(zhuǎn)呈現(xiàn)

animite.css 可以解決絕大多數(shù)的動畫效果，而且 animite.css 中的動畫也大致可以分為入場動畫好出場動畫兩個大類，既然如此，那么我們實現(xiàn)矩陣動畫中需要的動畫效果迎刃而解，我們僅需要豐富動畫形式即可。

既然我們準(zhǔn)備批量實現(xiàn)我們的動畫形式，那么抽象是必要的，按照之前給的效果圖，這個是我抽象出來的對象：

{
  interval: 140,
  duration: 1000,
  init(row, col) {
    this.row = row;
    this.col = col;
    this.count = col;
  },
  check(i, j) {
    return j - i === this.count;
  },
  next() {
    this.count--;
  },
  end() {
    return this.count === -this.row;
  }
}

動畫具體的執(zhí)行流程為

將矩陣的行列傳入 init 函數(shù)

設(shè)置以 interval 為時間間隔的定時器

遍歷矩陣中所有的點，傳入 check 函數(shù)，確定該點是否需要運(yùn)動

執(zhí)行 next 函數(shù)

執(zhí)行 end 函數(shù)，若函數(shù)返回 true 則取消定時器，動畫結(jié)束

結(jié)合上面的內(nèi)容，不難想象出，剛剛的對象觸發(fā)矩陣中的點如下(以 row = 7; col = 9 為例)

定時器第一次觸發(fā)時，運(yùn)動的塊為 [0, 8]

定時器第二次觸發(fā)時，運(yùn)動的塊為 [0, 7],[1, 8]

定時器第三次觸發(fā)時，運(yùn)動的塊為 [0, 6],[1, 7],[2, 8]

...

也就是從右上到左下，每一次動一條斜線。也是實現(xiàn) gif 圖中的動畫形式，配合 animate.css 就能完成效果圖展示的效果。

init/check/next/end 函數(shù)中的 this 代表本對象，也就是擁有該方法的對象

this 下也可設(shè)置任意值，這是 js 的特性，js 的對象非固定字段，所有設(shè)置任意值都 ok

最好不要將值設(shè)置到對象外部，避免互相影響，所以為了方便調(diào)用，最好都設(shè)置在 this 對象下，如上述的 row/col/count

由于動畫效果會被調(diào)用 n 次，所以要記得在 init 方法內(nèi)將自定義設(shè)置在 this 下的值進(jìn)行初始化。避免由于上次動畫修改了某值，但沒有初始化導(dǎo)致動畫效果在第 2 次時有變化。

既然我們是用 typescript 進(jìn)行開發(fā)，該對象的完整定義如下：

export type modeType = {
  interval: number;
  duration?: number;
  [propName: string]: any;
  init(row: number, col: number): void;
  check(i: number, j: number): boolean;
  next(): void;
  end(): boolean;
}

只要符合該定義的對象，就可以認(rèn)為是一個符合要求的動畫形式，但是動畫的執(zhí)行是否完整(動畫執(zhí)行是否將所有矩陣中的點都觸發(fā)了一遍)，不在庫的考慮范圍內(nèi)，這點需要你，也就是該動畫形式的編寫者確定。

ok 看到這里是否已經(jīng)有些騷氣的一批的動畫在你的腦海中呈現(xiàn)，很想實現(xiàn)它吧~

那么如何來驗證你的動畫是否完整呢？

安裝好 matrixchange 后，按照 github 上提供的文檔，先將矩陣初始化好，然后調(diào)用 movePoint 將你寫好的對象傳入即可。

什么？麻煩？對！

確實挺麻煩的，還要自己寫個 html 可能還要配置 webpack 開發(fā)環(huán)境等一系列雜七雜八的東西，寫個動畫形式為什么還要配置這么多無關(guān)緊要的步驟呢？其實我都已經(jīng)給你配置好啦~

按照以下步驟

git clone https://github.com/acccco/matrixChange.git 

先將項目克隆到本地，當(dāng)然可以先 fork 然后克隆你自己的項目，推薦先 fork。

npm i
# or
yarn

安裝項目依賴。

npm run dev

運(yùn)行程序，然后瀏覽器打開 http://localhost:8080/ 即可。

對了，那該在哪里編寫你的運(yùn)動形式呢？

項目下有 dev 文件夾，在文件夾內(nèi)，我已經(jīng)寫好了布局，寫好了初始化方法，你所要做的就是找到 movePoint 這個方法，然后將該方法的第一次參數(shù)改成你所寫好的對象即可。

什么？我原來文件中 movePoint 的第一個參數(shù) line.rt2lb 是什么鬼？

說明一下，我將已經(jīng)實現(xiàn)的效果按照分類放在了 src/mode 文件夾，四個方向分別使用縮寫代替。

l - 左
r - 右
t - 上
b - 下
i - 內(nèi)部
o - 外部
R - 代表前面所表示運(yùn)動的反向
Anti - 逆時針

如 line.rt2lb 所代表的運(yùn)動形式為：從右上到左下的線性運(yùn)動。

src/mode 文件夾中已經(jīng)實現(xiàn)的有 6 大類，32 種動畫形式。大概說明一下

更為詳細(xì)的介紹可以查看 src/mode 中的具體文件，大家可以將動畫形式放入 movePoint 中查看具體的動畫效果。

當(dāng)然，已經(jīng)實現(xiàn)的運(yùn)動形式大家也可以看看有沒有更加簡單的編寫方式，優(yōu)化原本的代碼。

總之，有了想法那就開始行動吧，不管是新想法，還是優(yōu)化我原本的實現(xiàn)，都?xì)g迎 Pull Request。當(dāng)然可能有了想法，但時間上不允許，也可以在 Issues 上記錄，大家可以一起幫你實現(xiàn)。

最后再次提供 github 地址，歡迎大家 Pull Request 。

喜歡的話 可以點個 star 哦，感謝~