animate cc开发html5游戏,使用Create.js与Adobe Animate CC制作H5落地页动画

一、背景

在移动端，利用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_