移动端动画方案

前言

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

方案列表

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

各个方案的优缺点

css3动画

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

案例:

canvas 动画

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

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

播图片

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

案例:

gif图片

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

案例:

结尾

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏24K纯开源

Final Cut Pro X效果插件开发总结

一、介绍       最近公司需要针对Final Cut Pro(FCP)开发一款效果插件,用于对公司自己开发的视频格式进行后期处理。Final Cut Pro...

2408
来自专栏Crossin的编程教室

【每周一坑】螺旋矩阵

今天这题,看起来挺简单,实际写出来并不容易。在以前公司我曾把它做过招聘的笔试题,结果惨不忍睹,不得不拿掉。 输出如图的螺旋矩阵: 1 2 3 4...

3187
来自专栏Coco的专栏

【技巧篇】解决悬浮的<header>、<footer>遮挡内容的处理技巧

1385
来自专栏开源项目

基于微博数据用 Python 打造一颗“心”

一年一度的虐狗节终于过去了,朋友圈各种晒,晒自拍,晒娃,晒美食,秀恩爱的。程序员在晒什么,程序员在加班。但是礼物还是少不了的,送什么好?作为程序员,我准备了一份...

3115
来自专栏北京马哥教育

Tmux:Linux 从业者必备利器

tmux 为什么要用tmux tmux是什么?tmux是linux中一种管理窗口的程序。那么问题来了:Mac自带的Iterm2很好用啊。既支持多标签,也支持窗...

2574
来自专栏塔奇克马敲代码

Windows平台下源码分析工具

1193
来自专栏DeveWork

总结:如何加速你的 WordPress 站点?

这篇文章英文原文发表于Smashing Magazine,感谢小影 的为我们带来的全文翻译。内容上讲解比较通俗易懂,非常适合初学者。 几个月前,我做了一个实验,...

2317
来自专栏前端知识分享

第134天:移动web开发的一些总结(二)

width —— 视口宽高 height —— 视口宽高 device-width —— 设备的宽高 device- height —— 设备的宽高 orien...

751
来自专栏前端知识分享

第130天:移动端-rem布局

当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了。移动端的布局相对PC较为简单,关键在于对不同设备的适...

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

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

1023

扫码关注云+社区