AnnieH5中的flash动画优化技巧

别再问我为什么我做的东西很卡,为什么我发布的东西丢失元件。注意以上几个坑,让动画师的小任性跑的飞起来!

Annie2X引擎是依赖于flash动画软件发布的,可以在fla中制作好很多动画效果,再完美发布出来。

然而动画师在使用flash的时候,都是很任性的,为了效果不择手段,他们不会像程序员那样考虑到运行效果的问题。

因此,做出来的动画效果很棒棒,但是其中必有一些坑。

坑一:

        fla文件非常庞大;

优化方法:

        1、去掉库中没用到的垃圾文件;

        2、清除重复文件夹中的重复文件;

        3、大面积静止纯色背景使用矢量填充;

        4、压缩图片dpi指数,一般推荐72;

        5、压缩音频比特率,一般推荐96kb/s;

        6、序列帧亲测可以用12帧;

        7、检查背景是不是很大的图,然后动画师用遮罩遮出来的尺寸;

坑二:

        元件套元件层级混乱;

优化方法:

        1、主体元素和背景分开;

        2、背景无色彩变化的,直接转换成位图;

        3、需要交互的元件不能用图片类型动画;

        4、养成每个类型元素分图层标记的习惯;

        5、实例名不要太过于偷懒:a1、a2等,要具有辨识性;

        6、分元件类型命名实例名:按钮(xx_btn)、影片剪辑(xx_mc)、背景(xx_bg)、位图(xx_img)

坑三:

        动画时间轴太长;

优化方法:

        1、拆分重复动画的图形类型为影片剪辑,使其重复播放;

        2、避免背景和角色放在同一个图形类型动画中;

        3、拆分fla文件,分步加载;

        4、细小重复的动画元件在库中添加as链接,到项目中new出来用;

        5、每一个动画当做一个影片剪辑,不要接着时间轴一条做到死;

        6、Annie2X 4.x版本已经优化了发布,能快速发布很长时间轴的动画,但是也要量力而行;

坑四:

        动画声画不同步,时长不对;

优化方法:

        1、检查动画的帧频是否合理(动画师最喜欢24fps或者25fps,请要求动画师按照程序员要求的来设定);

        2、帧频设置为以下几个值最佳(6、12、30、60);

        3、避免高清图像和音频,其中播放效率会受到设备影响(渣机会出现卡顿后,声画不同步,时长准确);

坑五:

        过场动画很卡;

优化方法:

        1、去掉大面积补间动画,力求运动目标小巧精悍;

        2、提高项目帧频,小游戏推荐60fps,其他项目至少30fps;

        3、尽量减少矢量图(矢量图在运动的时候,是经过CPU计算得到的图像);

        4、缩短补间动画的帧数,如果实在需要很多较为简单补间,可以考虑tween函数;

        5、尽量避免形状补间!!!!!(划重点);

        6、不要直接在fla中导入ps和ai的工程文件,会出现很多数不清的图层和矢量形状;

        7、告诉动画师,不支持滤镜(虽然有一部分支持,但是我认为最好不要用滤镜);

        8、设置渲染颗粒数annie.devicePixelRatio为当前设备像素颗粒的一半(目前仅在安卓上需要)

坑六:

        元件重复,修改后另一个元件跟着变;

优化方法:

        1、选中原件后,在属性栏中点击:交换→复制,确定是一个新的元件后再修改;

        2、4.x版本后,元件在跳到当前帧后才能访问;

        3、查看是不是在库中有重复文件的文件夹;

坑七:

        在fla中很清晰的动画,发布后变模糊;

优化方法:

        1、这是由于在fla中使用了矢量图绘制后,直接在元件内部拉伸导致的;

        2、请打散最外层元件,设置动画实际尺寸后,再转换为元件;

        3、转换为位图后,查看发布设置的画质,推荐80;

坑八:

        某些元素层级调整后没起作用;

优化方法:

        1、动画师有可能在组中嵌套了元件(打散后,分散到图层);

        2、元素没分图层,某些透明块遮挡后,看不出来(全选后,右键选择分散到图层);

        3、背景矢量图中有不同的色块分散了图层(全部选中,直接转换为位图);

-----------------------------------------------------------------------------------------------------------------------------

以上是我在接手动画师fla遇到的各种坑,不是代码算法不够高,不是引擎优化不够好,而是动画师太任性;

让他们做一个渐变,可以给你做出50MB的动画元件……

让他们做一个场景,给过来的是ai矢量图文件,其中包含上百图层,无数个滤镜;

让他们做几个人物,五官四肢基本复制粘贴,改这个,那个变……

好了,这不是吐槽的重点,

因为动画师和程序员永远都是对立的两个方面,他们会根据客户的变态需求,追求最完美的视觉传达,

而程序则更多考虑这个东西跑起来卡不卡。


ps:写在最后的话——改变不了客户和动画师,就改变自己;

抓住矢量图和位图的特性,适当选择。


最后附上flash工具下载地址,伸手党看这里:

animate CC 2017 (win+mac) + 破解工具

链接:https://pan.baidu.com/s/1dFu4drz 密码:51xg


animate CC 2018 

链接:https://pan.baidu.com/s/1c6UfF4 密码:bczl

你可能感兴趣的文章

相关问题

6 条评论

请先 登录 后评论
不写代码的码农
vien007

不正经的码农

7 篇文章

作家榜 »

  1. 大北兔 15 文章
  2. 皮卡丘先生 13 文章
  3. hero 10 文章
  4. vien007 7 文章
  5. ningbnii 4 文章
  6. Even 4 文章
  7. 炸天 4 文章
  8. anlun214 4 文章