createjs技术博客

看到这篇文章大家一定会奇怪都到2020年了怎么才想起来写animateCC2019的东西。原因是这样的，之前本人觉得animateCC2019并不好用，一直在用2017和2018，所以有关2019的文章一直没写。但是我发现，最近用animateCC的人几乎都是2019，而且遇到了不少的问题，所以我今天就来讲一下animateCC2019的使用须知和优缺点。

首先我们先来说一下animateCC2019和之前的版本比有什么区别吧：

1.因为引入了摄像机，有很多操作可以直接在图层上操作了，比如设置图层深度(3D高度)，就相当于设置Z轴，这很大程度上弥补了createjs没有Z轴API的缺陷，当然摄像机的功能2018其实就已经有了，2019只是把他变的更加丰富了。

2.更加通俗易懂的代码帮助，animateCC2019的代码帮助真的很大程度帮助了不懂代码的动画师，里面代码完全可以傻瓜式嵌入，我都感觉之前我写的几篇教程都白写了（当然，如果你连图片里按钮中的那些英文都看不懂，那么……你还是放弃吧）。

3.增加了全局代码，何为全局代码呢？就是所有地方都可以调用到。用过之前版本animateCC的童鞋都知道，之前的animateCC帧上定义的变量下一帧就调用不到了，需要window.xxx = xxxx的形式才可以全局调用，现在只要如下定义，任何地方都可以调用到（var aa = 10也可以）。

4.全局引入js文件，你以为全局调用变量就是全局代码的所有能力了吗？并不是，他最牛的就是还可以直接引入外部的js库。这个功能对于动画师来说是真的方便，之前要引入只能再导出文件上引入，直接重新导出就没了，或者干脆用js代码来导入，对于动画师是极不友好。现在可以全局引入js库以后，动画师想要些其他js的功能直接引入库就可以了。而且这样一来就可以把animateCC当做真正的一个ide来用（当然本人是不推荐这么做的）。

5.导出文档作为纹理，这个功能我当初理解了半天是什么意思，后来把曾经的项目用了这个功能导出后明白了，这其实就是把里面文件里面的的矢量都转化为sprite图。这个功能其实是给那些不太会优化canvas性能的人用的，一般人刚用animateCC或者从flash转过来，都不会重视矢量转位图这个操作，使得做出来的动画非常的卡，尤其是安卓机。对于会优化canvas性能的人来说这个功能可有可无，因为矢量直接右键转化为位图就可以了。

6.元件自动赋值name，可以通过类似flash的方法获取到name，以同来判断点击对象：

this.mc.addEventListener('click',function (event){

console.log(event.currentTarget.name)

})

（animateCC导出的代码，元件会自动赋值name）

7.动画工具方面的优化，这个大家都去看adobe官网的介绍吧，我动画方面也不是很厉害，就不班门弄斧了。

说完了区别就来说说使用须知吧：

1.用了任何摄像机有关的功能，在animateCC外面调用影片剪辑中的子元件都需要加上图层名，比如：

var mc = new lib.mc();

mc.xxx.x = 10;

现在不行了，需要：

var mc = new lib.mc();

mc.图层名.xxx.x = 10;

这也是为什么总有人跟我说子元件为什么调不到的原因。

2.导出纹理功能实际上并不好用，由于他并不能让jpg和png分开导出，因此会使得文件大很多，并且除非用到stagegl，不然并不是所有的矢量都需要转成位图的，还有一点，如果动画师做动画不规范的话，会出现很多乱七八糟的图片，加载速度和性能会严重影响。当然有点也很明显，如果不考虑遮罩，叠加模式，滤镜，甚至可以直接启用stagegl，性能马上起飞。所以本人还是推荐把纹理的勾掉，继续使用前面版本的设置，矢量部分库里存一份后，手动转为位图。

最后我总结下2019的优缺点吧：

优点：对于新手入手和动画师入手，难度降低了非常多，而且用起来会比之前几个版本舒服很多。

缺点：我上面说的几个注意事项就是缺点，突然间多了一个图层，会让人感觉子节点突然都无法访问了，其实只是都到了孙节点而已。至于纹理方面我还是希望animateCC后续的版本能把jpg和png分开导出，并且取消那1像素的间隔，总的来说，纹理对于新手还是利大于弊，对于老手来说可以不用。

后话：下次有空写一篇animateCC2020的吧