本文作者：IMWeb 袁飞翔 原文出处：IMWeb社区 未经同意，禁止转载
前言
花样直播项目客服端的动画基本已都使用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： 仅此一点你会被产品批的不行，改其它方案吧。）
案例：
- 花样直播爵位升级动画
结尾
具备离线包功能的客服端，尽量使用播图片方案。否则性能问题是一个很难踏过的大坑
