移动端动画方案

前言

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

方案列表

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

各个方案的优缺点

css3动画

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

案例:

canvas 动画

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

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

播图片

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

案例:

gif图片

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

案例:

结尾

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Keegan小钢

App项目实战之路(四):UI篇

上一篇文章[原型篇]发布之后,就开始设计UI了,包括Icon和界面UI,周一到周五晚上一般花两到三到小时,周六日的时候则有五六个小时,最终用了一个星期多才设计完...

21630
来自专栏程序员互动联盟

【入门指导第十三讲】概念墙

存在问题: 最近有小伙伴问html/html5/xhtml/xml这四个有什么区别? 解决方案: 小编在这里为大家详细解释一下。 html 学名叫做超文本标记语...

367100
来自专栏Android群英传

不怕搞事,自定义View云扩散效果

11120
来自专栏项勇

笔记59 | Android管理音频焦点的学习

32590
来自专栏QQ会员技术团队的专栏

来看看机智的前端童鞋怎么防盗

很多开发的童鞋都是只身混江湖、夜宿城中村,如果居住的地方安保欠缺,那么出门在外难免担心屋里的财产安全。

547110
来自专栏lonelydawn的前端猿区

ReactJS的简单介绍和使用

一、React的家世背景 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一...

22680
来自专栏Hongten

pygame系列_游戏中的事件

当玩家按下键盘上的:上,下,左,右键的时候,后台会打印出玩家所按键的数字值,而图形会随之移动

18130
来自专栏前端迷

React 还是 Vue: 你应该选择哪一个Web前端框架?

2016年,React在Web端和移动端都实现了迅速的成长,稳稳地领先于其主要竞争对手Augular,巩固了其作为前端框架之王的地位。

32320
来自专栏SEO

「知识」SEO深入学习---HTML语义介绍

33370
来自专栏腾讯社交用户体验设计

玩转HTML5移动页面(动效篇)- 腾讯ISUX

59230

扫码关注云+社区

领取腾讯云代金券