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

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

該項目名叫 matrixchange ，編寫的目的在于方便開發者實現矩陣動畫，當然該項目已經發布到 npm ，使用 npm/yarn 安裝即可。

該庫為開發者提供了一個數組和一個函數，具體的文檔可以查看上一篇文章，或是在 github 上查看更為詳細的內容。

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

接下來進入正題。

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

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

從右上到左下按照斜線進行運動

那么動畫效果呢？

翻轉消失，然后翻轉呈現

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

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

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

動畫具體的執行流程為

將矩陣的行列傳入 init 函數

設置以 interval 為時間間隔的定時器

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

執行 next 函數

執行 end 函數，若函數返回 true 則取消定時器，動畫結束

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

定時器第一次觸發時，運動的塊為 [0, 8]

定時器第二次觸發時，運動的塊為 [0, 7],[1, 8]

定時器第三次觸發時，運動的塊為 [0, 6],[1, 7],[2, 8]

...

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

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

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

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

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

既然我們是用 typescript 進行開發，該對象的完整定義如下：

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

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

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

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

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

什么？麻煩？對！

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

按照以下步驟

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

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

npm i
# or
yarn

安裝項目依賴。

npm run dev

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

對了，那該在哪里編寫你的運動形式呢？

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

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

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

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

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

src/mode 文件夾中已經實現的有 6 大類，32 種動畫形式。大概說明一下

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

當然，已經實現的運動形式大家也可以看看有沒有更加簡單的編寫方式，優化原本的代碼。

總之，有了想法那就開始行動吧，不管是新想法，還是優化我原本的實現，都歡迎 Pull Request。當然可能有了想法，但時間上不允許，也可以在 Issues 上記錄，大家可以一起幫你實現。

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

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