基于canvas与原生JS的H5动画引擎

　　前一段时间项目组里有一些H5动画的需求，由于没有专业的前端人员，便交由我这个做后台的研究相关的H5动画技术。

　　通过初步调研，H5动画的实现大概有以下几种方式：

　　1、基于css实现

　　　　这种方式比较简单易学，但是能实现的效果也相对简单。一般都是对H5元素的平移，旋转，缩放等。适用于网页中的一些简单动画，对于由许多元素相互联系的复杂动画实现起来有些难度。当然也有基于css实现的比较复杂的动画（如：人物的行走），但是难度比较大。css动画教程：http://www.cnblogs.com/tengpan-cn/p/6189720.html

　　2、基于jquery实现

　　　　jquery中提供了一些API对H5元素进行操作，主要也是平移、旋转、缩放；还有一些出入效果（如淡入淡出等）。使用起来比较简单，适用场景与css基本相同，在做一些需要和用户交互的简易动画时比css更简单易用些。

　　3、基于js与canvas实现

　　　　canvas是H5提供的一种绘图元素，可以使用JS控制，绘制点、线、面、图像、H5元素等。同时也支持对所绘制对象的平移、旋转、裁剪等，并且绘制速度还是比较快的；在平移，旋转上略有局限性，一方面实现起来并不方便，绘制平移旋转的实质是对画布坐标系进行平移，旋转，绘制完成之后，需要将画布坐标系复原，并且不支持Z轴旋转。

　　　　理论上来说基于js与canvas可以做任何形式的动画，但是需要自己去实现很多东西，比如碰撞检测，粒子系统等，这些工作量还是比较大的。有很多热心开发人员写了一些基于js与canvas的动画引擎，实现了相当赞的效果。但这些引擎都有一定的局限性，一方面是由于封装导致各个引擎之间不能配合使用，而各个引擎实现的并不完善，只是侧重与某一方面，有的侧重于碰撞效果，有的侧重与弹性约束之间的物理效果。

　　4、基于一些功能比较完善的物理引擎如cocos2d、白鹭等

　　这种方式就可以做出非常炫的效果，但是需要具备一些物理引擎的基础知识，包括坐标变换等一些数学知识。一般来说这种技术都是一个单独的研究方向，学好了薪资很高的。但使用这种技术做动画一般都是需要一个团队的，有主程、美工等多个专业人员一起做。

　　通过技术评估及我们的需求，决定采用第三种方式，并且自己结合需求，实现了一个简易的动画引擎。目前开发工作已经初步完成，基于js+canvas的引擎代码已经放置github上（https://github.com/luckyPT/AnimationEngine）。基于该引擎可以方便的实现：

　　①点线面等简单图形以及图片的绘制API，并且很方便的就可以实现旋转、平移、缩放（解决了原生canvas的部分局限性）

　　②基于雪碧图，可以很方便的实现序列帧动画

　　③简易的碰撞检测

　　④该引擎在封装的时候，考虑了可扩展性，可以很好的扩展其他特性（如重力效果）

　　点击查看示例：

欢迎转载收藏！！