一、背景

 

　　在移动端，利用H5技术，可实现微杂志,微信邀请函,H5小游戏等营销互动等应用开发，本文将介绍一种Create.js与Adobe Animate CC结合来制作H5落地页的方法。

 

　　通过两者结合既充份利用了Create.js的便捷性控制逻辑和整体框架结构，又充份应用了Animate动画制作的灵活性，使设计师与前端工程师分开但可并行工作。

 

　　开始之前，先预览下效果：

 

　　注：本文所提到代码示例使用es5进行开发。

 

　　二、页面框架

 

　　1.页面结构

 

　　经过需求分析，从页面结构分层角度，需要将页面结构分层，上从到下，分别为LOADING层，用于显示每个动画加载百分比

 

　　，控制层包括按钮，音乐开关，上下滑动手势控制等，场景层用于加载每个场景用到的动画，通过这种结构，主要的核心点在于，这个需求有8个动画场景，每个动画场景占用的字节比比较大，因此需要按需加载。

 

　　2.目录结构

 

　　从目录结构划分来看，以复用角度出发，将可复用的内容比如CORE，控制动画加载类，交互类放于engine目录，从上到下依次是：

 

　　configs: 存放动画基础配置

 

　　engine: 存放框架引擎

 

　　images: Animate CC制作好的动画资源

 

　　sounds: 声音资源

 

　　3.LOADING层

 

　　Loading层纯展示，接收外部进度，场景开始加载显示，场景加载完成时消失。浮动于页面最上方，使用非CANVAS技术显示。

 

　　加上居中转动的CSS3动画

 

　　body {

 

　　overflow:hidden;

 

　　}

 

　　#_preload_div_{

 

　　position:absolute;

 

　　left: 0;

 

　　top: 0;

 

　　width: 100%;

 

　　height: 100%;

 

　　background: rgba(0,0,0,0.5);

 

　　}

 

　　#animation_container, #_preload_div_ .mask {

 

　　position:absolute;

 

　　margin:auto;

 

　　display: inline-block;

 

　　height:150px;

 

　　width: 120px;

 

　　vertical-align:middle;

 

　　left:50%;

 

　　top:50%;

 

　　transform: translate(-50%,-50%);

 

　　-webkit-transform: translate(-50%,-50%);

 

　　text-align: center;

 

　　}

 

　　#_preload_div_ .img{

 

　　vertical-align: middle;

 

　　max-height: 100%

 

　　}

 

　　#_preload_div_ .img img{

 

　　animation: rotates 2s linear infinite;

 

　　-webkit-animation: rotates 2s linear infinite;

 

　　}

 

　　#_preload_div_ span{

 

　　display: inline-block;

 

　　margin-top: -5px;

 

　　vertical-align: middle;

 

　　color: #fff;

 

　　font-size: 18px;

 

　　}

 

　　#LXB_CONTAINER_SHOW {

 

　　display: none !important;

 

　　}

 

　　@keyframes rotates {

 

　　0%{

 

　　transform: rotate(0);

 

　　-webkit-transform: rotate(0);

 

　　}

 

　　100%{

 

　　transform: rotate(360deg);

 

　　-webkit-transform: rotate(360deg);

 

　　}

 

　　}

 

　　复制代码

 

　　4.控制层

 

　　从控制层开始，动画效果交由Create.js引擎控制，需要做的是

 

　　绑定容器

 

　　初始化调用

 

　　加载场景

 

　　开始与结束场景处理

 

　　引入各场景动画和控制逻辑

 

　　5.场景层

 

　　场景层用于控制整个H5动画交互逻辑组合，它实现了：

 

　　子动画场景事件注册

 

　　这里实现了接收每个子动画场景发送过来的动画播放完毕事件，主场景在收到该事件后可进行相关的操作，比如加载下一场景，销毁当前场景等。

 

　　加载上下场景逻辑

 

　　场景资源复用、销毁

 

　　复用的主要逻辑是，将加载的资源在添加到主场景的同时存一份到map中，下次复用再通过场景ID方式获取，在Create.js中通过removeChild()移出场景不会占用CPU资源。

 

　　6.手势动画支持

 

　　手势动画需要引入createjs.Tween以及对pressup pressmove mousedown三事件综合判断。主要思想：在mousedown时记录坐标点,判断Y轴方向在pressup时记录的坐标点是否大于原来点，大于表示向上滑动，反之向下滑动。

 

　　7.声音管理

 

　　Create.js在设计时考虑到外部资源比如音乐、视频，会存在容量较大情况，因此有提供相应的API来做异步加载。目的是减少主程序字节数，这里的声音管理主要涉及到：

 

　　背景音乐，循环播放需要考虑加入循环参数{interrupt: createjs.Sound.INTERRUPT_ANY, loop: -1, volume: 0.5}

 

　　音效，考虑复用，按需才加载，二次使用则复用原有加载内容

 

　　8.微信分享

 

　　普通的XHR请求使用new createjs.LoadQueue(true)要注意的是异步方式调用new createjs.LoadItem().set在页面加载完比先要获取签名，然后再设置使用JSDK用到的方法，这方面网络有相关教程，如果想需要有服务端签名自已实现，可参考这篇文章：

 

　　[基于egg.js微信分享API封装]

 

　　同时，分享出去的地址，需要有对应的encodeURIComponent

 

　　三、动画制作

 

　　前面说过，使用这种方式的话可以让设计师和前端工程师并行工作，比如，可以先定好每个动画的FLA文件的模板结构，即：

 

　　开始帧动作

 

　　结束帧动作

 

　　剩下的交给设计师过行天马行空创作，那么成稿将有可能是这个样子：

 

　　像这种复杂的动画，一般CSS3比较难实现，并且效率也不是Animate等创作工具能比拟的，而以上提到的开始和结束，关键点就是该FLA动画被Create.js加载之后能与其交互，接收播开始与完成事件。

 

　　三、发布

 

　　1.作为静态资源与egg.js结合

 

　　将制作好的动画需要放在一个服务器上的静态资源目录下使用，这里引用egg.js默认的配置，public目录,要引入微信分享，则需要有个服务端，借助node.js技术发展，一般小型化服务完全可以由前端一手包办。

 

　　2.可扩展配置

 

　　因为引入了服务器，则会遇到有相对路径情况，因此程序中加入了前缀配置，将这些配置抽离，放置独立文件中。比如:

 

　　静态图片资源目录

 

　　音乐资源目录

 

　　避免缓存的版本号

 

　　然后，可以这么来使用:

 

　　四、小结

 

　　通过以上介绍可以发现这是一种综合型工具类的组合，可能大家会有一疑问，H5动画与CSS3不是标配嘛?

 

　　我认为大多数情况下是肯定的，但在复杂的动画场景，当需求偏向于制作效率与高还原度场景的时候Animate这类的动画创作工作就派上用场了。当然它选用的是Canvas动画，我们可以截一下它的成品源码，略知一二：

 

　　图层动画

 

　　矢量处理

 

　　使用到的静态资源加载

 

　　关键的一点，使用自执行函数来接收外部传入的引擎参数，同时导出lib1,这个将对外暴露，可充份利用这一点进行控制。