移动端动画方案

前言

花样直播项目客服端的动画基本已都使用web来做，总结分享一下

方案列表

• css3动画
• canvas 动画
• 播图片
• gif图片

各个方案的优缺点

css3动画

• 优点：启用css3的3d加速，能够满足性能要求；资源文件最小；
• 缺点：元素量多、复杂的动画难以实现

案例：

• 花样交友礼物动画

canvas 动画

• 优点：可以用swf文件直接导出生成，在线导出Google Swiffy (感谢Flash大神龙哥的指导）
• 缺点：性能不佳。如果不用swf导出，人工绘制canvas性能也不是很好，况且复杂的动画很难绘制，能人工绘制的基本就可以使用css3去搞

PS: 最初想用觉得完美，但性能问题被测试叼得不行，之后加班加点换播图片

播图片

• 优点：能够解决一切性能、复杂度的问题
• 缺点： 因为每一帧都需要一张图片，加载资源较多，不适合持续时间长、尺寸大的动画
• 注意点：动画的帧率８帧／秒即可，动画的尺寸尽可能小，png图片必须经过无损压缩，最好使用离线包资源

案例：

• 花样直播爵位进入动画1 6.5秒 640*360 400k
• 花样直播爵位进入动画7 6.5秒 720*600 2.1M

gif图片

• 优点： 容易、简单！貌似可以为所欲为的做动画了
• 致命点：webview透明的时候很有可能出现锯齿，透明效果很差（PS： 仅此一点你会被产品批的不行，改其它方案吧。）

案例：

• 花样直播爵位升级动画

结尾

具备离线包功能的客服端，尽量使用播图片方案。否则性能问题是一个很难踏过的大坑