袁飞翔

2016-05-03 14:10

移动端动画方案

本文作者:IMWeb 袁飞翔 原文出处:IMWeb社区 未经同意,禁止转载

前言

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

方案列表

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

各个方案的优缺点

css3动画

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

案例:

canvas 动画

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

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

播图片

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

案例:

gif图片

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

案例:

结尾

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

3条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。