前段时候，宣布了一篇文章：学不动了，来点风趣的吧。发明 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;
  }
}

动画细致的实行流程为

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 种动画情势。也许申明一下

更加细致的引见能够检察 src/mode 中的细致文件，人人能够将动画情势放入 movePoint 中检察细致的动画结果。

固然，已完成的活动情势人人也能够看看有无越发简朴的编写体式格局，优化底本的代码。

总之，有了主意那就最先行为吧，不管是新主意，照样优化我底本的完成，都迎接 Pull Request。固然能够有了主意，但时候上不允许，也能够在 Issues 上纪录，人人能够一同帮你完成。

末了

末了再次供应 github 地点，迎接人人 Pull Request 。

喜好的话 能够点个 star 哦，谢谢~