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 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
JSONP 的原理、理解 与 实例分析
May 16 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 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
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
php自定义hash函数实例
2015/05/05 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
JS代码检查工具ESLint介绍与使用方法
2020/02/04 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
爱情检讨书大全
2014/01/21 职场文书
少儿节目主持串词
2014/04/02 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
身份证丢失证明
2015/06/19 职场文书
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python