动画学习的总结与遇见CreateJs

CreateJs中文网配图

CreateJS真是一个让人很感兴趣的一个动画类库

之所以这么说，是因为前段时间制作了一个红包雨的动画，由于之前动画都是自己玩玩，这个动画是真正意义上在项目里做的，觉得收获很大。但是，制作方式使用了JQ动画和CSS中的animate配合制作。由于是操作dom的方式对性能非常的不好，但是由于时间关系，只能选择这个，后来的的学习我对canvas更加感兴趣了，大家随意感受一下。

制作的红包雨

该效果红包速度随机，最开始出现的位置随机，下完红包雨后要出现一个大红包

出现的最大问题：安卓手机非常的卡顿效果不流畅
解决：

首先是动画fps也可以称为动画帧，一般速度不可过快，由于电脑屏幕的刷新频率大部分为1/60所以在设置定时器的时候也可以设置为1000/60左右;
由于是操作可以把操作的变量存储为变量这样也可以减少点性能消耗。
能使用CSS3动画的就是用CSS3动画解决，
现在手机都支持浏览器加速所以我也可以使用CSS3的一些属性对欺骗浏览器进行加速
让要操作的dom脱离文档流，这样能减少回流提高性能

CSS3D加速有很多属性可以调起：比如tranform、opacity之类都可以

// 对要操作的dom进行3d加速

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

// 解决操作dom的闪烁

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;

后来我使用canvas制作了一次发现使用canvas制作确实很麻烦，由于是不停的渲染图片会有闪烁的问题我，由于当时时间有限，就停止了解了，通过这次了解使我了解了新的技术。

了解了原生canvas在动画的时候闪烁问题解决：

使用离屏双缓冲技术

自我了解：在屏幕上的canvas为主动画，然后创建一个大小一致的canvas缓存不显示（其实就是两个的都做一样动画），然后再把缓存的图片在渲染到主动画上这样就可以了。缓存需要用的sava()和restore()自我感觉了解了原理而已，还需要多多学习

感谢大神们的教程：

最好理解和示例的网址（推荐）
国外经典
 save和restore介绍

后来得知CreateJs,解决了canvas原生操作复杂动画的难题。

CreateJs

什么是CreateJS

HTML5出现后，因为Canvas这模块对图形动画开发提供了非常好的支持，所以Flash就渐渐的退出了历史舞台.

优势：Canvas渲染性能优秀
Canvas开发使用Javascript，学习成本相对较低
浏览器本地支持（无需安装插件、更加便捷的和本地JS代码进行交互）

HTML5中有Canvas标签和API，学习成本大，复杂度高（特别是用于复杂的动画设计的时候）
CreateJS的出现就是在原生Canvas API的基础之上，封装了一套新的API，而这套API在用户开发过程中提升了性能，降低了成本。

CreateJS模块介绍

EaselJS - 提供createJS开发的核心API
TweenJS - 负责开发过程中动画操作API
SoundJS - 负责开发过程中动画的配音（包括前景音乐、背景音乐、动作音乐）
PreloadJS -负责游戏动画开始时预加载所有资源API

暂时写到这，下次学习在更新

好东西要分享，本来想多了解后在分享的，但是我迫不及待的想和大家分享与我做项目的收获，希望能帮到大家！