摘要：前些日子在 腾讯isux 博客上看到两篇文章，感觉特别有意思，里面介绍了使用animate cc 如何将H5动效开发缩短到1天的时间，有demo有实操，瞬间便产生了浓厚的兴趣。开始便开始着手研究。

一、Demo

预览图 demo仿制版
2017_GRZDX6pteCaanCITV35Kcs3.gif image.png

二、animate cc 介绍

为什么是animate cc，不是flash？为什么前端用它能节省时间，为什么站在今天这个时候讲这个软件？还得从adobe公司这款新产品说起。

image.png

Animate CC 由原Adobe FlashProfessional CC 更名得来，维持原有 Flash 开发工具支持外新增 HTML 5 创作工具，为网页开发者提供更适应现有网页应用的音频、图片、视频、动画等创作支持。 Animate CC将拥有大量的新特性，特别是在继续支持Flash SWF、AIR格式的同时，还会支持HTML5Canvas、WebGL，并能通过可扩展架构去支持包括SVG在内的几乎任何动画格式。

youtube链接：What is Adobe Animate (October 2017) | Adobe Creative Cloud

纯css

image.png

  • 用H5+CSS3的方式要纯代码实现，不够直观、编写抽象复杂、不适合用于制作这个内容丰富、时间长的动画；

视频做动效

  • 视频体积较大，用户习惯在有wifi的情况下才会看，不便于传播，且无法在播放过程中提供交互操作（如在各场景结尾都会让用户操作如何应对各种难题），所以也不合适；

animate =>createjs

animate cc+createjs则很好地解决了以上方案的各种弊端：可以可视化直观地制作动画，体积比视频小很多，可以实现各种交互操作、逻辑处理，比较契合这次动画的需求，因此也自然而然使用这个方案了。

//播放
this.[parent.]play();
//暂停
this.[parent.]stop();
//跳到第num帧然后播放
this.[parent.]gotoAndPlay(num);
//跳到第num帧然后暂停
this.[parent.]gotoAndStop(num);

三、animate概念

1.帧率

一帧就是一张图片

2.FPS

规定时间内看到的帧率，一般人眼 1秒60帧 可以觉得流畅，低于这个就能感觉到明显的卡顿

3.层

盛放元素的图层，可以用来控制动作

4.关键帧

每个帧要变化的瞬间 | 帧动画（小人书）

4.补间

从关键帧到关键帧的过渡动画

5.元件

按钮、视频剪辑、图像

6.脚本

交互式的关键，串联起动画之间的关系

四、解析开发过程

【实操】

五、性能优化

image.png

image.png
image.png

fnStartAnimation = function() {
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener(“tick”, stage);
//默认的设置
//createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
//建议设置
createjs.Ticker.timingMode = createjs.Ticker.RAF;
customHandleComplete();
}

六、工作流程

策划 （产品、设计、交互、开发）=> 【UI画稿】=>【设计交互形式】=>【开发or设计实现动效】=>是否需要增加一些请求 =>真机调试性能优化

七、参考资料

https://isux.tencent.com/articles/efficient-animation.html
https://isux.tencent.com/articles/95.html