AnimateCC和createjs遇到的坑

[xtx1130]

最近工作中用到了createjs，主要开发模式是UE通过Animate CC开发动画， publish之后形成基于createjs的代码。在调试的时候遇到了不少小坑，当然最后都完美解决了。下面所述的问题全部是基于AnimateCC2015生成的createjs代码。

AnimateCC适配代码造成的动画卡顿

在生成createjs代码的时候，animateCC有这么一个选项：

make responsive这个选项是默认选中的，之后生成的代码可以按照定长、定宽或者长宽比进行响应式布局。这个选项如果选中了，那么你生成的代码会多出来一个函数--makeResponsive。这个函数会根据屏幕大小对canvas进行重绘，会造成页面加载进来的时候的卡顿。
解决方案：通过viewport来进行适配，而不是通过内置的函数

Animate CC 生成的图片过大造成的动画卡顿

如果上面那个坑你踩平了，那么接下来很有可能会遇到下面这个坑了：

animate CC发布的时候可以自定义图片大小，默认的是4000*4000，如果你按照默认的大小生成动画，那么动画很有可能在UC以及某些安卓自带浏览器和微信中 相当 卡。问题的原因我也不是很清楚，有可能是对spriteSheet支持的不是很好吧。
解决方案：把生成的图片大小控制在2000x2000以内。图片越小，动画效果越流畅。

代码管理

如果动画多的话，那么生成的createjs文件可能会很长，这时候，查找我们需要修改的地方很麻烦。所以，我们可以把单独需要修改的影片剪辑单独写成一个js，其实animateCC最后根据主轴生成的代码也是一个movie clip，我们只需要把这个move clip单独拎出来进行修改管理就好了。
解决方案：通过output Name来迅速确定这个主轴的剪辑位置，然后单独拿出来作为一个单独的js，之后的逻辑添加和帧上的修改，都可以在这个js中进行。针对这个问题，我开发了一套本地集成环境，通过对Animate CC生成的文件进行ast解析，自动解构出主轴的代码；以及如果AnimateCC文件修改后，新生成一套js文件，可以自动覆盖非主轴代码，现在仅供项目内部使用，暂时不考虑开源。

影片剪辑的色彩效果不被createjs支持

想象一个类似场景：一个剪辑元件加载的时候是黑色的，然后由黑色慢慢变成半透明，直至显示出剪辑里面的内容，这时候UE的第一反应是直接用影片剪辑元件的色彩效果实现。很不幸，在createjs中，会是全程黑屏而不会有渐变的效果。
解决方案：不要使用影片剪辑的效果，在影片剪辑上面加一层黑色透明渐变遮罩来实现你想要的效果。

AnimateCC中嵌入声音会有兼容性问题

AnimateCC中是可以直接嵌入声音的，但是如果通过Animate CC嵌入然后生成createjs文件，那么会有兼容性问题，ios的safari以及微信中是无法入场调起声音的，当然这个问题相信一般的h5开发也遇到过。但是，createjs会对声音进行封装，封装成自身的组件再加载到canvas中，这样一来，处理兼容性问题就比较棘手了，毕竟不能用原生的声音属性，以及拿不到audio标签。
解决方案：通过audio加载音频，如果需要在某帧唤起或者关闭，通过帧上的js来调用audio实现。

动画的补间元件定位问题

在开发的时候，遇到一种很无解的情况，就是：在Animate CC中，动画跑起来是完全没问题的，但是生成了createjs之后，发现动画会来回飘动了。在看到这个效果的时候完全一脸懵逼，后来直接读生成的createjs代码，发现是其中的补间定位出现了问题。然后去找UE核实，经核实后发现是补间元件的定位有问题，定位偏了。
解决方案：重做相关动画场景，并重新生成createjs代码。

publish Settings设置重置问题

在Animate CC中每次重新导入fla文件的时候，publish Setiting的output name会被重置，我也不知道为什么。但是真的是每次都会重置，又一次就因为重置了忘了改了导致最后输出的文件路径完全变了-，-

解决方案：导入fla的时候记得设置一下output再发布