移动端动画方案

前言

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

方案列表

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

各个方案的优缺点

css3动画

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

案例:

canvas 动画

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

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

播图片

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

案例:

gif图片

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

案例:

结尾

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户画像

3.1.5 内存管理

在单道批处理系统阶段,一个系统一个时间段内只执行一个程序,内存的分配及其简单,仅分配给当前运行进程即可。而引入了多道程序并发执行之后,进程之间共享的不仅仅是处理...

663
来自专栏一个小程序员的成长笔记

<script>元素在XHTML中的用法

  编写XHTML代码的规则要比编写HTML严格得多,例如如下代码: 1 <script type="text/javascript"> 2 fun...

3246
来自专栏coding

vue.js通过路由实现经典的三栏布局

531
来自专栏Ryan Miao

Hexo next博客添加折叠块功能添加折叠代码块

前言 有大段的东西想要放上去,但又不想占据大量的位置。折叠是最好的选择。下面在Hexo的主题上定制添加折叠功能。 本文基于Hexo Next的主题修改。其他主题...

3828
来自专栏DeveWork

解决iOS 版Safari 中浮动(float)导致页面右侧偏移的bug

长时间没写CSS代码就是生疏了啊!昨天在用ipad 调试最新的主题的时候遇到了一个坑,现在写在这里记录下——iOS 版Safari 中浮动(float)导致页面...

1756
来自专栏Java架构沉思录

微服务架构下静态数据通用缓存机制

在分布式系统中,特别是最近很火的微服务架构下,有没有或者能不能总结出一个业务静态数据的通用缓存处理机制或方案,这篇文章将结合一些实际的研发经验,尝试理清其中存在...

192
来自专栏前端学习心得

实现三栏布局的几种方法

三栏布局,顾名思义就是两边固定,中间自适应。三栏布局在实际的开发十分常见,比如淘宝网的首页,就是个典型的三栏布局:即左边商品导航和右边导航固定宽度,中间的主要内...

891
来自专栏Java技术分享

基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用

在前面的一篇随笔《基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理》介绍了菜单模块的处理,主要介绍如何动态从数据库里面获...

24610
来自专栏张善友的专栏

CodePlex站点的Wiki引擎已开源

CodePlex站点的Wiki引擎现在正式开源,除了像列表和表格等基本布局外,WikiPlex还对嵌入式视频(Flash、QuickTime和YouTube等)...

22510
来自专栏应用案例

性能测试之gatling详解

大家接触过形形色色的压力测试工具,例如lr,jmeter各有各的优点,那么最近在做接口测试中涉及到压力测试,小弟就看到一个好用的工具俗称“加特林”英文Gatli...

2746

扫码关注云+社区