看完本文，端能速发一些 H5动画，设计师效地制作合自己心意的画来别人保真还原，希望给大带来一点帮助。
前言
说动画H5，为一个前端，谓是「又爱又恨」。爱的是加上动画动效 H5变得生动有趣，吸引力 Max；恨的是做动画时是一边在脑中 yy效果，一边用 css、js代码模拟出来，既低效又不直观，正所谓「产品一句，设计一根，重构一身汗」。幸的是，你现在看到篇文章，我将结合例来介绍一下 Adobe Animate CC 如何高效直观地实现动画效果，并指出一些2018版本新性。
一、好戏来了
首先我们先来看个动画，大家估下这个 H5 需要做多久时？ 答案是天。
能这么完这 h5，靠的可视化动画制作软件 Adobe Animate CC。Adobe Animate CC 身 Adobe FlashProfessional CC，由于 H5 的出，很多以需用 flash 能实的动画也可以用 H5 实了，另外 flash 一直以备受不安全的诟病，使得业界越越排斥 flash，例如 iphone 的网页就不能播 flash。Adobe 不能就此落啊，于这软件就顺势转型，维持原 Flash 发具基础，新增制作 H5动画功能。对于原 flash 发人员可以轻松转型，对于新手，这软件也比较易手。
介绍如何动画之，我们先熟悉一下软件的界面：
界面左方动画编辑区，区域里一舞台，就我们终可以看到的动画区域，超出舞台的内将不会看到。
右上是工具栏，大部分都和 photoshop 工具相似，在这先不详细展开了。工具栏左边有个可调节数值属性板，例如目前展示了选黄色小圈位、宽高等属性。
左下方是间轴编辑。动画之所以能动，就是指定了它在什间点上显示什画面。间轴有多层，上面的层将会盖住下面的层。
右下角我拉一个代码编辑面板，常用通代码控动画的播放和暂停，编写点击物的互逻辑等。
接来还有几个概念需要先了解一：
1. 键帧
键帧于编辑此刻的画状态，图为例，我们在第10帧添了一个键帧，并调整了图形的位置、大小、旋转角，播放时会看到图形在前9帧都，而到了键帧时就立刻变成了调整的状态。这可解为 css3 的 keyframes 里的某个百分里的状态。
我们可在两个键帧之间添作补间，这样图片就会随着时间从初始状态变到结束状态。
我们还可在两个形状之间添形状补间，使得他们自然地进行形状变。
2. 图形 graphic 和影剪辑 movie clip
两类元件在动画时经常打道，个需要清楚。（敲黑板！）
当我们将图片拖到舞台上时，图片只是一个位图，并没有很多诸如创建补间画、设置透明等编辑功。
而当它转换为图片元件后，就有了上述的功了。实际上，这是在图片外包了一层，如果双击图片元件，会进入元件，看到转换前的图片。在前端开发中，这相当于建了一个多功的组件并将图片赋值到里面。
而影片剪辑就是一个可的图形元件，它有自己的时间轴。例如图的气泡画，就是一个影片剪辑。
元件可复，例如在某个画面需要很多气泡，只需要将气泡元件放置多个到舞台上实现。通过双击元件对里面的画面进行编辑，将同时改变有他该元件的实例的画面。
一般来说，添进来的图片都应该转换为图形元件，如果该图形元件要，就再转换为影片剪辑。在结构上，相当于影片剪辑里包了一个图形元件，图形元件再包了一个图片。
好，掌握了上的基础知识，接来的容就较容易解了。那我就开始这个 H5画为例，介绍一分画的制作。
二、实例示范
1. 吊下来的蜘蛛
这是一个位移动画，在开始位置和结束位置将蜘蛛图形摆放好，再添加一个运动渐变就行了。
例蜘蛛的下落有一个 duang 一下的弹簧效果，这个在补间置一下缓动函数就行了。常用缓动函数的选择是2018版本新增的，个人觉十实用。
在 H5 ，点击蜘蛛后会继续播放动画，这个点击事件可以让软件动生成代码。选择蜘蛛图形，在代码面板的事件双击需要的事件，软件便会立刻生成绑定事件。
需要写的只有一句：this.play();
关要学习的代码，使用频率最的就是几句：
//播放 this.[parent.]play(); //暂停 this.[parent.]stop(); //跳到第num帧然后播放 this.[parent.]gotoAndPlay(num); //跳到第num帧然后暂停 this.[parent.]gotoAndStop(num);
部分的动画内都可以看作移、缩、旋转的运动渐变，因此只掌握了这几操作，恭喜已可以胜任一些基本动画了。
2. 彩色场景的转换
这要使了遮罩和形状渐变。首先在彩色场景图层上面建一个遮罩层，然后在遮罩层做一个圆形图案逐渐放大的形状渐变就行了。
遮罩在这个 H5画里得较多，仔细观察，会发现开始的打字效果、红包落至消失见那一刻、在沸腾的水中上窜的红包、伸舌头等地方都上了遮罩效果。
3. 气泡效果的实现
儿主要做一个气泡放大消失不见的动画，需要注意的是要将放大的准心往下移，样才符合际生活。在气泡最大化，需要插上一段空白关键帧，表示气泡爆破的一小段空白期。
画面上有个气泡，我是用前面说的复用元件的方法去现的，此外需整各个元件例的位置和大小，以模拟际气泡的不规则。
为了气泡整体看起来沸腾得更自然，我给各个元件实例命了名，并一个随机函数控制元件画的播放。
function bubbleAni(){
//这次将会num气泡随机冒出
var num = parseInt(Math.random()*7);
for(var i=0;i<num;i++){
var target = "bubble"+parseInt(Math.random()*8+1);
var nextTime = parseInt(Math.random()*100);
setTimeout(function(){
_this[target].play();
},nextTime);
}
//下一次的冒泡时间
var nextTime2 = parseInt(Math.random()*200);
setTimeout(function(){
bubbleAni();
},nextTime2);
}
bubbleAni();
三、测试动画
动画的过程中，我们可以通过单栏的 control->Test 将动画到浏览器里看效果。通过调试的 h5，我们可以发 Animate CC canvas 通过 createjs 引擎绘制动画的。关于 createjs，家可以看看其中文社区 、或者 ajex 的博客了解多。
四、发布动画
成画后，就是将画发布成页了。通过 file->publish 就可发布，软件会在画源件在目录导 html、js、css 等资源件。要查看导效果，可直接双击 html 打开，但遇到点击事件时会报跨域之类的全错误。要解决这个问题，只要将有件放在务器里再访问就可了。
五、性能优化
当我们在电脑上辛辛苦苦地做完动画，看着电脑浏览器上自己做出来的赏心悦目的动画，心里的成就感不禁冉冉上升。接着当你满心欢喜地拿安卓手机欣赏动画时，顿时就晕：为什么卡得么惨不忍睹？莫急莫急，你该次幸现在看到篇文章，让我慢慢道来，给你一优化建议吧。
在 Animate CC 里制作画是有 fps 的概念的，即每秒播放多帧。在 js 里我们一般怎样控制帧率呢？没错，就是 setTimeout 或者 setInterval，正是这个原因，画在卓机里播放卡顿。解决办法就是换 requestanimationframe 播放，在 fnStartAnimation 方法里添 createjs.Ticker.timingMode = createjs.Ticker.RAF。
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();
}
由于 requestanimationframe 动画般是60帧秒，此要先将 fps 调成60再开始制作动画可以了。Animate CC 2018 在时轴上新增了秒数显示，大大便了制作动画时时考虑，不用再像以前那样用前帧除以 fps 来估算目前在什么时。
在动画测试，我发现制作动画在手上越来越卡。使用 chrome memory 检测后，发现了有内存泄露，上升速度很快。在查阅了相关资料后，我认为些默认导出设不太合理，例如雪碧图尺寸太大，竟然有81928192。于是我将雪碧图改为1024*1024（位不够放时，会自动创新雪碧图来存放，所以也不用担心），并更改了雪碧图按 jpg 和 png 分开放、不导出用资等设，具体改为下图：
调整后，内存占用速攀升，比较稳了，占用内存小了，动画也不会越越卡了，优化功！
ajex的博客一篇《createjs性能优化》，家可以看看。不过以我目动画的验看，了面2点优化方案，就可以比较流畅了。
总结
不知家看完后否对这制作动画的方式产趣呢？本文首先通过指出家写码动画时的痛点难点，提出了使用 Animate CC 高效直观制作动画的方案，接结合实例对一些常用的动画效果行制作示范，并提供一些实用的优化建议。希望家看完后能比较清晰了解入门这软件，给家一些帮。
浙公网安备33011002017549号