朋友，這裏有個倉庫須要你 PR 一下

前段時間，發佈了一篇文章：學不動了，來點有趣的吧。發現 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;
  }
}

字段名	類型	表明的含義
interval	number	每次(獲取須要運動的點)的時間間隔
duration	number	transition 動畫專用，用於設置 transition 的持續時間，animate 動畫不須要
init	Function	每次動畫開始前會調用，用於初始化對象信息
check	Function	用於肯定每次須要運動的點
next	Function	每次(獲取須要運動的點)後都會調用該函數，用於重置判斷條件
end	Function	判斷該動畫是否結束

動畫具體的執行流程爲

1. 將矩陣的行列傳入 init 函數
2. 設置以 interval 爲時間間隔的定時器
3. 遍歷矩陣中全部的點，傳入 check 函數，肯定該點是否須要運動
4. 執行 next 函數
5. 執行 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 種動畫形式。大概說明一下

文件名	表明意思	例子	說明
line.js	線性運動	line.r2l line.rt2lb	每次運動一條直線
L.js	L 形運動	L.lt2rb L.lt2rbR	每次運動一個 L 形狀的區域
circle.js	回字形運動	circle.i2o	每次運動一圈
spread.js	擴散運動	spread.random	由一箇中心點進行擴散，每次擴散一圈
loop.js	繞圈運動	loop.lt	由某個頂點進行繞圈運動
random.js	隨機運動	random.t2b	線性隨機運動

更爲詳細的介紹能夠查看 src/mode 中的具體文件，你們能夠將動畫形式放入 movePoint 中查看具體的動畫效果。

固然，已經實現的運動形式你們也能夠看看有沒有更加簡單的編寫方式，優化本來的代碼。

總之，有了想法那就開始行動吧，不論是新想法，仍是優化我本來的實現，都歡迎 Pull Request。固然可能有了想法，但時間上不容許，也能夠在 Issues 上記錄，你們能夠一塊兒幫你實現。

最後

最後再次提供 github 地址，歡迎你們 Pull Request 。

喜歡的話 能夠點個 star 哦，感謝~