前言这不是webpack又升级了。..前端的发展可谓是异常之快，各大框架层出不穷。每当有新框架出现，或者老框架升级，评论区总是哀嚎不断，学不下去了。我真的学不会了。学不下去了，来点有趣的吧~~matrixChange一直想写一个完全自己做的动画，终于在前段时间完成了typescript的重写，完善了DEMO。我们先看看吧。看动画效果可以在这里查看不同动画组合的效果，也可以在jsfiddle上查看具体的代码写法。使用浏览器npm或yarnnnpminstallmatrixchange--saveyarnaddmatrixchangecodeimport{makeMatrixChange,mode}from'matrixchange'letapp=document.getElementById('app')leturls=['http://bgcdn.acohome.cn/100965.jpg','http://bgcdn.acohome.cn/1501505.jpg','http://bgcdn.acohome.cn/1501655.jpg'];//该方法返回一个对象letmove=makeMatrixChange(app,{images:urls,row:7,col:9})//使用类型0Motionmode,以及默认的动画效果move.movePoint(mode[0])//使用第0个motionmode,andtransitiontransition,提供类名即可,eg:.test{transfrom:scale(0);}move.movePoint(mode[0],{className:'test'})//使用第0个移动模式，和animation动画，比如withanimation.css动画库//动画需要提供两个类名，entryanimation和Appearanceanimation，在同时需要将此标记为动画animationmove.movePoint(mode[0],{animate:true,classNameIn:'animatedflipInX',classNameOut:'animatedflipOutX'})//使用特定的图片做动画//如果传不传图片，则随机取传入图片列表中的一张图片。move.movePoint(mode[0],{animate:true,classNameIn:'animatedflipInX',classNameOut:'animatedflipOutX',image:urls[0]})matrixchange库只有一个方法和一个数组makeMatrixChange用于生成矩阵，调用返回对象的movePoint方法可以使生成的matrixmoveinmode是一些列的移动形式的数组。移动形式是movePoint方法的第一个参数。movePoint的第二个参数具体定义如下：typeoption={className?:stringanimate?:booleanclassNameIn?:stringclassNameOut?:stringimage?:string}说说经验项目是业余时间完成的，从最初的纯浏览器可执行代码到ES6模块化方式，最后到现在的typescript版本，可以说是符合前端的发展趋势，也适合使用typescript编写，有一定的理解项目。虽然代码重构花费了很多时间，但是项目的结构和代码组成更加完善和清晰。总的来说，进行了以下改进。样式通过js生成而不是单独引用scss/css文件，使用库的进一步降低成本基于animation实现动画，结合animation.css进一步降低开发成本将motion形式分离出来，抽象成一个对象，里面提供了一些数据和检查方法实现了15种运动形式，实现了简单的事件机制，代码进一步解耦，使用事件暴露程序执行过程中的一些阶段，方便注入函数和使用typescript定义类型，避免一些不必要的开发错误。最后，如果喜欢，欢迎大家到我的github点个star，谢谢~~目前实现的练习形式只有15种，如果还有其他练习形式，也欢迎Pullrequest。当然，如果你想学习typescript但找不到合适的项目练习，可以考虑fork这个项目进行研究。由于代码量不是很大，看来应该不会太费力。
