潘博
摘要：粒子动画是一种应用广泛的动画效果，也有不同的制作方法。Animate CC是Flash的延续和发展，在动画制作方面功能强大，而Canvas是HTML5在网页中绘制图形、制作动画的核心元素。本文通过描述动画制作、代码编辑、效果拓展几个环节，介绍了一种基于Animate CC+Canvas的粒子动画制作方法，以求简单、高效地制作粒子动画，并能跨平地展示、应用。
关键词：Animate;Canvas;粒子动画;HTML5
中圖分类号： TP37 文献标识码：A
文章编号：1009-3044()16-0211-02
粒子动画是动画、视频和特效中常用的一种动画效果，如雨、雪、花瓣飞舞、烟花等动画都可以看作是粒子动画，在网页特效和MG动画里面也经常能看到各种粒子动画效果，这些粒子动画因其良好视觉冲击力，往往容易吸引人的眼球。粒子动画的制作方法很多，如使用HTML5+Canvas或JavaScript等篇写代码实现，3dsmax、Maya或Cinema 4D制作3D粒子动画，After Effects使用表达式制作粒子特效等等。这些方法往往伴随着复杂的代码编写，或者制作的粒子效果不易拓展。本文另辟蹊径，介绍一种基于Animate CC+Canvas的粒子动画制作方法。这种方法先在Animate CC里制作单个粒子动画，通过脚本编辑形成多个粒子效果。
1 Animate CC与Canvas简介
Flash动画因其制作简单、功能强大，曾经在PC互联网时代大行其道，但随着移动互联网的广泛应用和智能手机的普及，Flash安全性方面的问题越来越突出，于是逐渐退出了互联网江湖，Adobe转而推出了Animate CC。Animate CC实际是Flash在移动互联网时代的延续和发展，相比于其他网页动画制作方法，它具有以下几点优势：
1.制作流程完整，用户基础庞大。因为Animate CC继承于Flash，保留了Flash操作简单、矢量化、交互功能强大等优点，从绘图、动画制作、音视频支持、脚本编写到输出，具有完整的制作流程。而且Flash的用户群非常庞大，可以快速适应Animate CC的使用。
2.代码编写量小。因为Animate CC是基本时间轴的动画制作方式，无须编写代码就可以生成动画，即便带有交互功能的动画，利用软件提供的代码片段也能轻松实现，相比HTML5+Canvas或JavaScript等全代码实现方式，对非程序设计人员来讲友好很多。
3.支持跨平台输出。Animate CC既可以将动画发布成传统的swf和视频文档，输出到传统PC平台，也可以利用Canvas将时间轴动画发布成网页格式(html+Javascript)文件输出到移动端，实现同一个时间轴动画跨平台输出不同的格式文件。
Animate CC 使用 CreateJS 库和Canvas文档发布跨平台的HTML5 内容。CreateJS 是一个模块化的库和工具套件，它集成在了Animate CC中，支持通过 HTML5 开放的 Web 技术创建丰富的交互性内容1。Canvas 是 HTML5 中的一个新元素，可以动态生成及渲染图形、图表、图像及动画。Animate 中新增了一种文档类型 HTML5 Canvas，它对创建丰富的交互性 HTML5 内容提供本地支持，即通过创建HTML5 Canvas文档并制作时间轴动画，可以生成跨平台的HTML5输出2。
综上所述，将Aniamte CC和Canvas结合起来，是很适合制作可跨平台呈现的粒子动画的，下面介绍具体制作过程。
2 单个粒子动画制作
为了减少代码编写量，可先在Animate CC中制作一颗粒子的运动动画。建一个HTML5 Canvas文档，先绘制一颗粒子，如一个小圆形或小矩形、雪花形状等都可以，将其转换为元件放置在元件库中。再新建一个影片剪辑元件，将刚才的粒子元件放在其中。使用引导层动画或补间动画的形式，给粒子制作一段沿弧线缓慢移动的动画，向上或向下都可以，可以添加缓动、旋转和透明度变化等效果。时间轴及画面效果如图1所示：
在元件库中，给影片剪辑设置一个链接并命名，如“dot”，即把这个单颗粒子动画定义为一个类，目的在于供后面代码使用。至此，单个粒子动画制作完成。此时舞台上没有任何对象，对象及动画都在库中。
3 代码编写，效果实现
4 效果变化与拓展
将以上影片剪辑和代码稍加改变，即可生成更加丰富多样的粒子动画效果，如将粒子图形改为闪烁的渐变圆点，可模仿萤火虫飞舞;将粒子图形改为雪花，并将粒子起点Y轴坐标设置为0，缩放量设置为-scale，可模仿雪花飞舞;将粒子改为花瓣和树叶，又可模仿花飞叶舞的效果;将粒子运动起点集中在一个点并向四周扩散，可形成烟花效果等，如图3所示。
5 结语
粒子动画的效果和制作方法千万种，制作难度和适用场景各异。本文介绍的这种Animate CC+HTML5 Canvas结合的方法比较适合一般的动画设计人员，没有复杂的逻辑结构，无须编写大量代码，稍加改变可衍生出丰富多样的粒子效果，应该是一种可广泛使用的方法。
参考文献：
[1] ABOUT CREATEJS. CreateJS. http：///#！ /CreateJS
[2] Adobe 官方网站，在Animate CC中创建和发布 HTML5 Canvas 文档，https：///cn/animate/using/creating-publishing-html5-canvas-document.html
【通联编辑：唐一东】
