javascript与css3动画结合使用小结


Posted in Javascript onMarch 11, 2015

当Html5,css3已渐渐成为主流的时候,我还非常习惯的用js去做一些简单的动画。因为在桌面浏览器上, 并非所有的都支持css3。用户也倒是很奇怪,用户习惯并不是每个用户都可以被培养。总有不少人会觉得win7.win8没xp好用。但手机方面就大不一样了,手机浏览器对html5和css3的支持还是很不错的。但手机硬件处理能力却又十分有限。在四核、八核手机横行的今天,依然有像我这样使用双核或单核手机的。js虽好,单奈何接触不多,调不好那种感觉。一个简单的页面滑动,在i7的pc上运行十分流畅,可是,在我的双核手机上就卡、顿、卡、顿。令人十分郁闷。为此,我也是寻找了很久很久,看了很多很多。终于在不就之前,找到了一种还算简单的方法:使用css3去执行动画。

在以前,对于动画除了Jquery的animate等动画函数外,更多的是使用setTimeout,setInterval,这样循环的去改变一个元素的margin、width、top等属性。也正是如此,才有了我的困惑。

首先,setTimeout,setInterval 这货并非你设置0ms它就能一直一直的去执行。曾经在iscroll里调试的时候无意中发现了这个秘密。原来Timer延时的计算依靠的是浏览器的内置时钟,而时钟的精确度又取决于时钟更新的频率。IE8及其之前的IE版本更新间隔为15.6毫秒。完了,我想它10ms执行1px位移,它还不能准时的干这事。

而卡又是怎么回事呢?卡,因为代码写的不好。毕竟js是单线程的,一旦有耗时的动作那么UI就可能不响应了。虽然我们使用了setTimeout,但正是因为setTimeout让我们看上去界面没死可动作却又不流畅了。因为这次setTimeout执行之后,在下次执行前,中间这个间隔里很可能遇到另一个耗时的动作,那么,setTimeout的执行就无限后延。然后呢?卡!然而,卡还能有下一个原因,改变原始属性时不小心触发浏览器Layout(即:重布局)。这个问题说它不耗时呢,却又耗时,说它耗时呢,很多时候却又可以忽略。但很多时候其实是不能忽略的。

除了上面这两段,还有一个问题,就是在很多手机上总感觉是一帧一帧的,而且还可能是一帧长一帧短。这真是能把人都搞废的节奏。为何会这样呢,依然和settimeout的推迟有一定的关系。丢帧。这个问题有涉及到显示器的刷新频率问题。实在太复杂了。

最后选择了CSS3,js动态的改变元素的属性,使用transition来控制动画执行时间。举个例子:

<div id="test" style="transition:all 1s ease; width:100px;" ></div>

js:

$("#test").width(200);

这样1秒之后这个div的宽度会变成200px。不是孙悟空变桃子一样瞬间变大,慢慢的赶脚,不卡不顿。而且使用css动画有个好处,它不受耗时js的影响。虽然浏览器中UI线程与js线程是互斥,但这一点对css动画不成立,并且很多浏览器还能启用硬件加速(比如:Chrome)。虽然浏览器重布局普通情况下感觉不是很明显,但还是应该尽量避免大面积的重布局。so在动画元素上加上-webkit-transform: translateZ(0);或者-webkit-transform: translate3d(0,0,0);这样浏览器会独立渲染这一层。即便是重布局无法避免,这样面积也小些。而使用translate取代margin也确实是一个十分明智的决定。

最后附上一些常用的改变时会触发重布局的属性: 
 

width 

 
height 

 
padding 

 
margin 

 
display 

 
border-width 

 
border 

 
min-height

以上就是本文所述的全部内容了,希望对大家学习javascript和CSS3能够有所帮助,同时不足之处烦请补充,谅解。

Javascript 相关文章推荐
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
不要使用jQuery触发原生事件的方法
Mar 03 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 Javascript
Vue 中axios配置实例详解
Jul 27 Javascript
微信小程序实现录音功能
Nov 22 Javascript
jquery实现textarea 高度自适应
Mar 11 #Javascript
jQuery简单实现禁用右键菜单
Mar 10 #Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 #Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 #Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 #Javascript
jQuery简单几行代码实现tab切换
Mar 10 #Javascript
jQuery实现高亮显示的方法
Mar 10 #Javascript
You might like
php一些公用函数的集合
2008/03/27 PHP
重新认识php array_merge函数
2014/08/31 PHP
全面解读PHP的Yii框架中的日志功能
2016/03/17 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
一段实时更新的时间代码
2006/07/07 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
2015/03/10 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
python正则表达式re模块详解
2014/06/25 Python
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
极简的HTML5模版
2015/07/09 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
美国在线印刷公司:PsPrint
2017/10/12 全球购物
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
敬业奉献模范事迹材料
2014/12/24 职场文书
体育活动总结
2015/02/04 职场文书
宝宝满月祝酒词
2015/08/10 职场文书