这篇文章主要讲的是怎样制作流畅动画,特别是针对移动端。在这里我首先介绍制作动画的几种方法的优缺点;接着会着重介绍用css3制作动画的注意事项。

1、用canvas、css3、jquery制作动画

Canvas

优点:性能好,强大,支持多数浏览器(除了IE6、IE7、IE8),画出来的图形可以直接保存为 .png 或者 .jpg的图形;

缺点:依赖于HTML,只能通过脚本绘制图形,没有实现动画的API(依靠事件和定时器更新);由于在 canvas 上以编程方式显示的文本其实就是位图,因此搜索爬行器将完全忽略文本。文本内容也无法被屏幕阅读器识别。

css3

优点:简单且与内容分离、css动画不触发layout和paint;(这些属性的修改不会触发layout和paint:backface-visibility、opacity、perspective、perspective-origin、transform);

缺点:有浏览器兼容性问题、安卓手机会出现卡顿、受排版引擎的限制,与整个页面的dom结构息息相关。

Jquery

优点:没有兼容性问题;

缺点:每一帧,都要进行repaint、recomposite(非常耗时);

总结:在移动端动画效果上,使用css3动画要比jquery动画效率高的多。在安卓手机上表现尤其明显!所以移动端动画以css3动画为优先,jquery只能用来简单处理应用逻辑。css3动画是用来给内容布局加上特效的通用解决方案,但是在性能堪忧的移动浏览器上很可能会受排版性能所限,达不到理想的效果。而对性能有要求的特定场景,比如游戏,用canvas会有很大的提高。

2、css3在移动端卡顿问题

Css3制作的动画在ios上跑的66的,但是在安卓上有时会出现卡顿现象。不妨从下面几点找找问题。

a、是否导致layout
如果是,尽可能将动画元素absolute或者fixed化以避免影响文档树,以减少重排.

b、是否启用硬件加速
“用到了CSS3动画”和“开启了硬件加速”是两件事情,虽然前者有可能导致后者。
开启硬件加速在webkit中有神奇的万金油:opacity: 1;或者-webkit-backface-visibility: hidden;。

c、是否是有高消耗的属性(css shadow、gradients、background-attachment: fixed等)
有的话,图片也是一种选择。这算得上是用空间换时间的优化了。

d、repaint的面积
如果是,只好缩小动画面积了。这一步的优化有限;

e、尽量使用 transform 生成动画,避免使用 height,width,margin,padding 等;如以下例子1和例子2。

PS:使用 transform,浏览器只需要一次生成这个元素的位图,并在动画开始的时候将它提交给 GPU 去处理 。之后,浏览器不需要再做任何布局、 绘制以及提交位图的操作。从而,浏览器可以充分利用 GPU 的特长去快速地将位图绘制在不同的位置、执行旋转或缩放处理。简而言之,transform 动画由GPU控制,支持硬件加速,并不需要软件方面的渲染

3、动画过程有闪烁(一般出现在动画开始)

-webkit-backface-visibility:hidden;

-moz-backface-visibility:hidden;

-ms-backface-visibility:hidden;

backface-visibility:hidden;

-webkit-perspective:1000;

-moz-perspective:1000;

-ms-perspective:1000;

perspective:1000;

例子1:

.ball-running { animation: run-around 4s infinite; }

@keyframes run-around {

0%: { top: 0; left: 0; }

25% { top: 0; left: 200px; }

50% { top: 200px; left: 200px; }

75% { top: 200px; left: 0; }

}

例子2:

.ball-running { animation: run-around 4s infinite; }

@keyframes run-around {

0%: { transform: translate(0, 0); }

25% { transform: translate(200px, 0); }

50% { transform: translate(200px, 200px); }

75% { transform: translate(0, 200px); }

}

例子2会比例子1看起来流畅多了。因为 transform 属性不会触发浏览器的 repaint,而 left 和 top 则会一直触发 repaint;

css3制作动画性能问题的更多相关文章

  1. CSS3制作动画的三个属性

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation:我们一起学习完了Transform和Transition,让我们对元素实现了一些基本的动画效果,这 ...

  2. 利用CSS3制作淡入淡出动画效果

    CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...

  3. HTML页面的动画的制作及性能

    原文:HTML页面的动画的制作及性能 WEB页面的动画的制作及性能 简介 目前WEB页面做动画的方式大的分两种1.JS间隔时间不断修改元素属性值,这也是CSS3出来前常用的做法,貌似也是唯一的做法.2 ...

  4. css3动画性能优化--针对移动端卡顿问题

    一.使用css,jquery,canvas制作动画 1.Canvas 优点:性能好,强大,支持多数浏览器(除了IE6.IE7.IE8),画出来的图形可以直接保存为 .png 或者 .jpg的图形: 缺 ...

  5. 关于CSS3动画性能

    前天我去面试了...好吧,对于自己6年6份工作的悲催经历,我自己也是醉了. 但没办法,我这种当时上学没好好学习,临毕业才出家写代码的半吊子码农,起步没起好,以至于一直没能找到真正让自己满意的工作. 通 ...

  6. css3动画性能优化

    css3的动画简单好用,但是性能方面存在一些问题,很多时候一不留神cpu就已经满了. 现在记下一些常用的技巧,去优化我们的css3的动画. 1. translate3d进行gpu加速 写动画的时候写个 ...

  7. 前端制作动画的几种方式(css3,js)

    制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...

  8. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  9. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

随机推荐

  1. netbeans性能分析文件保存位置

    C:\Users\Administrator\AppData\Roaming\NetBeans\8.2\config\HTTPMonitor 分析完,记得把文件删除,不然系统盘要满了

  2. 开户项目的sql查询语句备查

    查询全国所有的券商名录 SELECT id,security,province,city,borough FROM t_security GROUP BY security ; 查询某个省份的所有券商 ...

  3. Elasticsearch入门学习重点笔记

    原文:Elasticsearch入门学习重点笔记 必记知识点 Elasticsearch可以接近实时的搜索和存储大量数据.Elasticsearch是一个近实时的搜索平台.这意味着当你导入一个文档并把 ...

  4. 前端--HTML简介

    软件开发架构: c/s架构 客户端 服务端 b/s架构 浏览器 服务端 本质:b/s架构也是c/s架构 HTTP协议 超文本传输协议:规定了客户端与服务端之间消息传输的格式 四个特性: 1.基于TCP ...

  5. Eviews9.0---软件安装

    EViews是Econometrics Views的缩写,直译为计量经济学观察,通常称为计量经济学软件包.它的本意是对社会经济关系与经济活动的数量规律,采用计量经济学方法与技术进行“观察”.计量经济学 ...

  6. linux目录结构详细说明

    Linux各目录及每个目录的详细介绍 [常见目录说明] 目录 /bin 存放二进制可执行文件(ls,cat,mkdir等),常用命令一般都在这里. /etc 存放系统管理和配置文件 /home 存放所 ...

  7. [C#] 利用方向鍵移動 TextBox Focus

    論壇問題 版面上有 100 個 textbox,編號為 1-100,textbox 排列為 1 欄 20 個,共 5 欄,當一開打這個 form 會將在第一欄第一列第一個 textbox 的背景顏色變 ...

  8. 2019阿里云开年Hi购季基础云产品分会场全攻略!

    2019阿里云云上Hi购季活动已经于2月25日正式开启,从已开放的活动页面来看,活动分为三个阶段: 2月25日-3月04日的活动报名阶段.3月04日-3月16日的新购满返+5折抢购阶段.3月16日-3 ...

  9. Codeforces 356A

    这题有个注意的地方,就是对集合边读边删除的时候,应该尤为注意..   my_set.erase(it++) #include <iostream> #include <cstring ...

  10. LintCode刷题笔记-- LongestCommonSquence

    标签:动态规划 题目描述: Given two strings, find the longest common subsequence (LCS). Your code should return ...