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 相关文章推荐
Ext面向对象开发实践(续)
Nov 18 Javascript
checkbox 复选框不能为空
Jul 11 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
JavaScript获取当前cpu使用率的方法
Dec 15 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
PHP 和 MySQL 基础教程(四)
2006/10/09 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
javascript 动态添加表格行
2006/06/22 Javascript
js实现iframe动态调整高度的代码
2008/01/06 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
将python图片转为二进制文本的实例
2019/01/24 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
Python全面分析系统的时域特性和频率域特性
2020/02/26 Python
python 读取串口数据的示例
2020/11/09 Python
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
生物技术专业毕业生求职信范文
2013/12/14 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server