专栏首页IMWeb前端团队移动端动画方案

移动端动画方案

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

前言

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

方案列表

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

各个方案的优缺点

css3动画

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

案例:

canvas 动画

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

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

播图片

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

案例:

gif图片

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

案例:

结尾

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS屏蔽手机端长按选中 防止图片自动放大 禁止复制

    使用手机浏览页面的时候,有些浏览器内核的原因,点击 img 标签图片会自动放大,长按会弹出下载或者保存选项。

    德顺
  • 利用正则批量清理Teleport Ultra/Pro冗余代码

    Teleport 是一款非常优秀的网站离线浏览工具(即网站整站下载工具),但该软件下载的网页文件里会包含大量冗余代码(如:tppabs),手动去修改工作量很大。

    德顺
  • js获取input上传文件的文件名和扩展名的方法

    使用 js 可以获取 input 上传文件的文件名和扩展名,这里我整理一下具体方法:

    德顺
  • 使用 swiper 轮播插件遇到的问题及解决方法

    我只是记录一下我在使用过程中遇到的几个属性,详细API大家可以直接去官网查看:Swiper4.x使用方法

    德顺
  • CSS 选择器 nth-child 的几种用法

    例如使列表中的第一项或者最后一项显示不同的样式 、列表中的奇数或者偶数项显示不同的背景色 . . .  等等。

    德顺
  • 分享一些实用的Chrome DevTools技巧

    提示:如果您使用jQuery,则可以输入$($0)以访问此元素上的jQuery API。

    德顺
  • 利用CSS设置图片黑白/灰色效果

    为了形成对比,我把图片引入两次,其中一个添加了一个class g ,用来给它设置样式。

    德顺
  • 点击a页面链接跳转b页面某个tab切换的实现

    解释一下,首先有一行 .tab 是 tab按钮, .inner 是对应的三个 li 默认隐藏,第几个 tab 选中就对应的显示第几个 li 。 

    德顺
  • input[type=file]去掉“未选择任何文件”及样式改进

    input 标签的 file 属性,在没有选择文件的情况下,默认显示一条文字“未选择任何文件”。

    德顺
  • css的cursor属性 鼠标指针样式

    cursor 属性规定要显示的光标的类型(形状),该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围...

    德顺

扫码关注云+社区

领取腾讯云代金券