chanong 以前，动画设计师在做一些H5运营项目时，都是先用cc（原Flash）设计动画原型，然后交给我们进行UI开发来实现。 做过动画开发的人都知道，动画开发是相当耗时的，需要对动画设计师设计的动画进行高质量的还原。 来回沟通的成本也非常高。
那么有没有一种有效的方法来改进这个流程，提高开发效率，同时仍然完成高质量的动画呢？
经过一段时间的探索，我发现（原来的Flash）可以导出动画，而且就是基于这个js库来开发轻量级游戏的。 非常适合制作移动端的一些h5动画。 它不仅缩短了创建动画所需的时间。 同时，它也是一个可视化IDE，无需编写代码即可完成高质量的动画效果； 它还可以为动画效果添加交互性。
例如，如果使用传统的HTML CSS3动画开发或者硬写代码来实现下面页面的动画，那么剪切图片和动画开发应该是不可能一天完成的； 但是使用导出并自己编写一点代码，一两个小时即可完成。
一些需要理解的概念
在开始之前，我们先来了解一下CC中动画的概念。
帧率
它是指每秒投影或显示的帧或图像的数量。 这个值设置的越大，动画的速度就越快，但也是性能的一大消耗。 一般设置为24帧就足够了。
图形和视频剪辑
我们可以将单独的动画放到一个独立的影片剪辑中，这样我们就可以更好的控制动画。 几个独立的片段可以组成一个完整的动画。
当我们把图片从资源库拖到舞台上时，它只是一个普通的位图，无法做补帧动画，所以我们必须将其转换为组件。
图形由矢量图形或位图组成。
影片剪辑 动画影片中包含的影片剪辑，具有自己的时间轴和属性。 它是交互式的，是最通用、最实用的部分。
时间线
时间轴是我们在创建动画时使用图层和帧来组织和控制动画内容的窗口。 图层和帧中的内容随时间变化，从而产生动画。 时间线主要由图层、帧和播放头组成。
Wei库可以说是一个专门为HTML5游戏开发的引擎。 目前它被Adobe集成到CC中作为导出动画的基础库。
它是一个为HTML5游戏开发的引擎，包括：
：用于动画、位图绘制、交互体验（包括多点触控）功能。
：补间动画”引擎
:音频播放引擎
：资源预加载
具体的文档和demo介绍，以及API的使用方法，可以通过官网了解：
如何快速导出动画？
一般来说，动画设计给我们提供一个使用CC导出的单一fla源文件。 以我上面提到的demo为例，它看起来像这样：
拿到之后，我们需要做一些整理工作。 首先，在CC中创建一个视频剪辑组件：
构建完成后，会在CC的库面板中生成新构建的视频剪辑组件。 单击带有刚刚创建的视频剪辑组件链接的列，它将变得可编辑。 然后给它起一个名字，比如我这里命名的。 对于视图1：
然后双击该组件。 时间线是空白的。 这时候我们需要做的就是打开动画设计师给我们的fla源文件，将时间轴上的所有图层复制粘贴到新创建的影片剪辑的时间轴中。
这样，我们名为 page1 的视频剪辑就包含了该页面上的所有动画。 试想一下，如果你正在制作一个h5项目，有5页游戏动画，并且将每个页面的动画分别放入相应的视频剪辑中。 。 这些单独的视频剪辑组成了一个完整的动画。
完成这一步组织工作后，您可以单击“导出”。
它将资源直接导出到当前 fla 文件所在的目录：
-> 用于动画的图片资源1.hmt -> HTML文件1.js -> 所有需要的图形都转换成绘制组件库
打开导出的js文件，可以看到视频剪辑中刚才做的类链接已经在js中生成了一个view1方法：
然后就可以发现导出的html文件中混入了js代码。 我们可以新建一个main.js文件，将js代码放在html文件中。 专门用来控制动画的播放以及编写一些交互逻辑和组织代码。 如下：
html:
代码语言：
复制
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">1 <style type="text/css"> body { overflow:hidden; }</style><body onl oad="init();" style="margin:0px;"><script src="createjs-2015.11.26.min.js"></script><script src="1.js"></script><script src="main.js"></script>