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

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

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

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

ok 簡(jiǎn)介到此完畢。雖然這個(gè)簡(jiǎn)介有點(diǎn)短，但是該篇的目的并不在于讓大家了解這個(gè)矩陣動(dòng)畫，而是想讓大家一起來(lái)豐富這個(gè)倉(cāng)庫(kù)。

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

簡(jiǎn)單來(lái)說(shuō)就是有一個(gè)矩陣，然后讓它動(dòng)起來(lái)，效果如下：

這就是一個(gè)簡(jiǎn)單的矩陣動(dòng)畫，動(dòng)畫形式如何？

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

那么動(dòng)畫效果呢？

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

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

既然我們準(zhǔn)備批量實(shí)現(xiàn)我們的動(dòng)畫形式，那么抽象是必要的，按照之前給的效果圖，這個(gè)是我抽象出來(lái)的對(duì)象：

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

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

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

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

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

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

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

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

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

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

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

...

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

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

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

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

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

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

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

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

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

那么如何來(lái)驗(yàn)證你的動(dòng)畫是否完整呢？

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

什么？麻煩？對(duì)！

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

按照以下步驟

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

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

npm i
# or
yarn

安裝項(xiàng)目依賴。

npm run dev

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

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

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

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

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

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

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

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

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

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

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

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

喜歡的話 可以點(diǎn)個(gè) star 哦，感謝~