前段时间，我发了一篇文章：学不会了，来点有趣的吧。发现github仓库被frok了很多次，于是下定决心好好整理代码，让大家可以查看代码，有一个更愉快的PullRequest。介绍项目名为matrixchange，编写目的是为了方便开发者实现矩阵动画。当然，项目已经发布到npm，你可以用npm/yarn安装。该库为开发人员提供了一个数组和一个函数。具体文档可以参考之前的文章，或者在github上查看更详细的内容。ok介绍到此结束。虽然这篇介绍有点短，但是这篇文章的目的不是让大家了解这个矩阵动画??，而是让大家一起充实这个仓库。接下来，我们进入正题。动画形式什么是矩阵动画？简单点说，就是有一个矩阵，然后让它动起来，效果如下：这是一个简单的矩阵动画，动画形式是什么？从右上角向左下角移动一条斜线。动画效果怎么样？翻转消失，再翻转呈现animite.css可以解决大部分的动画效果，animite.css中的动画大致可以分为两类：进入动画和退出动画。在这种情况下，我们实现矩阵动画。需要的动画效果很容易解决，我们只需要丰富动画形式即可。抽象由于我们要批量实现我们的动画形式，所以抽象是必要的。根据之前给出的效果图，这是我抽象出来的对象：{interval:140,duration:1000,init(row,col){this.行=行；这个.col=col;this.count=col;},check(i,j){返回j-i===this.count;},next(){this.count--;},end(){returnthis.count===-this.row;}}字段名typeintervalnumber代表的意思每次的时间间隔（获取需要移动的点）durationnumbertransition是动画专用的，用于设置过渡的持续时间，animateAnimation不需要initFunction在每个动画开始前调用，初始化对象信息。checkFunction用于确定每个需要移动的点。判断动画是否结束动画的具体执行过程是将矩阵的行和列传入init函数，设置一个timer作为时间间隔，遍历矩阵中的所有点，传入检查函数，判断是否需要移动点执行下一个函数结束函数，如果函数返回真，则取消定时器。结合动画最后的以上内容，不难想象刚才对象触发矩阵中的点如下（以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的对象不是一个固定的字段，任何值的设置都可以最好不要设置对象外的值，以免相互影响，所以为了调用方便，最好设置在this下面object，比如上面提到的row/col/count因为动画效果会被调用n次，所以记得设置在init方法中，初始化this下自定义设置的值。避免因为上次动画修改了一个值，但没有初始化，所以第二次改变动画效果。定义由于我们是用typescript开发，所以这个对象的完整定义如下：exporttypemodeType={interval:number;持续时间？：数字；[道具名称：字符串]：任何；初始化（行：数字，列：数字）：无效；检查（i：数字，j：数字）：布尔值；下一个（）：无效；end():boolean;}只要对象符合这个定义，就可以认为是满足要求的动画形式，但是动画的执行是否完整（动画执行是否触发了矩阵中的所有点)不被图书馆考虑。这个需要你来决定，也就是动画形式的作者。开发环境没问题。看到脑子里已经呈现了一批烦人的动画，好想实现啊~那么如何验证自己的动画是否完整呢？方法一安装matrixchange后，根据github上提供的文档，先初始化matrix，然后调用movePoint传入你写的对象。什么？麻烦？正确的！真的很麻烦，还得自己写一个html，说不定还要配置webpack开发环境等一系列杂七杂八的东西。为什么写一个动画要配置那么多无关紧要的步骤？其实我已经给你配置好了~方法2按照下面的步骤gitclonehttps://github.com/acccco/matrixChange.git把项目clone到本地。当然，你可以先fork然后克隆你自己的项目。建议先fork。npmi#oryarn安装项目依赖项。npmrundev运行程序，然后浏览器打开http://localhost:8080/。顺便问一下，你在哪里编写你的运动模式？项目下有一个dev文件夹。在文件夹里，我写了布局和初始化方法。你所要做的就是找到movePoint方法，然后把方法的第一个参数改成你写的。目的。什么？我原文件中movePoint的第一个参数line.rt2lb是什么鬼？说明一下，我把实现的效果按照分类放在src/mode文件夹下，四个方向用缩写。l-Leftr-Rightt-Upb-Downi-Internalo-ExternalR-表示前面表示的运动的反向Anti-Counterclockwise比如line.rt2lb表示的运动形式是：从右上角开始的直线运动到左下方。src/mode文件夹下实现了6个类别32个动画形式。简单解释一下文件名的含义示例解释line.js直线运动line.r2lline.rt2lb每次直线L.jsL形运动L.lt2rbL.lt2rbR每次L形区域circle.jszigzagmotioncircle.i2ospread.jsspreadmovementspread.randomspread.random从一个中心点开始，每次展开一圈loop.jscirclemovementloop.lt使圆从某个顶点random.jsrandommovementrandom.t2b更详细的线性随机运动的介绍可以查看src/mode中的具体文件。可以将动画形式放入movePoint中查看具体的动画效果。当然，你也可以看看有没有更简单的方法来编写已经实现的运动形式来优化原始代码。总之，有了想法，就开始行动吧。无论是新想法还是优化我原来的实现，都欢迎PullRequest。当然，你可能有想法，但时间不允许。大家也可以记录在Issues上，大家一起来帮助大家实现。最后再次提供github地址，欢迎PullRequest。喜欢的话可以点个star，谢谢~
