animateCC2019的使用须知和优缺点

  • 内容
  • 评论
  • 相关

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

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

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

QQ图片20200402173423.png

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

QQ图片20200402173455.png

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

QQ图片20200402173517.png

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

QQ图片20200402175055.png

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

QQ图片20200402174604.png

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

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

console.log(event.currentTarget.name)

})

QQ图片20200415143008.png(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,性能马上起飞。所以本人还是推荐把纹理的勾掉,继续使用前面版本的设置,矢量部分库里存一份后,手动转为位图。

QQ图片20200402180641.pngQQ图片20200402180759.png

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

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

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

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

1550803410665474.jpg    

评论

0条评论

发表评论

电子邮件地址不会被公开。