javascript 流畅动画实现原理


Posted in Javascript onSeptember 08, 2009

当然考虑到浏览器(特别指IE)糟糕的js执行能力,动画效果又要受到影响。
浏览器中的动画效果主要依靠js来动态改变Dom元素外观来形成。不过据说css正在修炼这方面的能力哦。(拭目以待^_^)
我们需要周期性的改变dom元素的外观,这个周期性就要依靠setTimeout()和setInterval()来完成。
它们2个哪一个更好点呢 见这里 (是jquery的作者写的一个文章)
我个人比较偏向setInterval,setTimeout需要用递归调用而且在线程很忙的情况下会延时,这会影响流畅性。
通常我们会利用node.style的属性动态赋值,来更新页面表现,大家都知道每次的调用页面都会重绘。
还有一种同时改变多个属性的情况如下:
.......
node.style.height = 'value1',
node.style.width = 'value2',
node.style.top = value3"
......
这种情况下,
一个动画物体在每一格的运动中,页面会重绘3次,当属性越多每次重绘越多。
在ff,chrome中没有问题,但在ie中无可避免的出现闪烁现象。
如果可以把每一格动画,作为一次重绘就会好很多。
在ff下我们可以setAtrribute("style",objStyle);一次跟新多个属性。
但在ie下style是只读的,任何试图赋值都会让ie很生气并且,完全不鸟你。
这时候有个所有浏览器都支持的属性cssText就可以解决这个问题,
style.cssText接受内嵌格式的style的字符串,并且可以高效的同时重绘多个属性。
所以,我们可以把动画元素的多个属性利用cssText同时跟新,而不是用style.prop一个个的跟新。
如: node.cssText = "heigth:100px;width:100px;top:100px";
当然,动画的流畅还有以下注意点:
1.setInterval的实践证明,10是极限值,未来不一定,但现在一定不要设置小于10,不然浏览器会累死的。
2.把动画路径的所有值全部求出后,在用setInterval去定时更新,重绘元素的过程中不要有复杂计算。
3.还有就是完成一个动画一共有多少步,要和setInterval的时间参数,相互调节到最佳状态;
4.关于有多少步的算法,flash中有成熟的tween算法,google一下就有了,当然也可以自己实现。
最后,我觉得如果对js动画效果很感兴趣话,还犹豫什么,去动手一步步实现一个自己的"影片"吧,乐趣就在其中哦。
当遇到实现问题的时候,再去看看js流行框架是如何做到的。这就是生活嘛....

Javascript 相关文章推荐
jQuery中:button选择器用法实例
Jan 04 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
vue 项目常用加载器及配置详解
Jan 22 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 Javascript
ES6 Object.assign()的用法及其使用
Jan 18 Javascript
使用React代码动态生成栅格布局的方法
May 24 Javascript
javascript 定义初始化数组函数
Sep 07 #Javascript
javascript十个最常用的自定义函数(中文版)
Sep 07 #Javascript
javascript 获取select下拉列表值的代码
Sep 07 #Javascript
Javascript中的var_dump函数实现代码
Sep 07 #Javascript
jquery tools系列 expose 学习
Sep 06 #Javascript
jquery tools 系列 scrollable(2)
Sep 06 #Javascript
jquery tools 系列 scrollable学习
Sep 06 #Javascript
You might like
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
PHP实现下载功能的代码
2012/09/29 PHP
jQuery对象[0]是什么含义?
2010/07/31 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
Python下使用Psyco模块优化运行速度
2015/04/05 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
python numpy数组复制使用实例解析
2020/01/10 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
html5 div布局与table布局详解
2016/11/16 HTML / CSS
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
车工岗位职责
2013/11/26 职场文书
银行个人求职自荐信范文
2013/12/16 职场文书
加拿大留学自荐信
2014/01/28 职场文书
企业申诉管理制度
2014/01/30 职场文书
英文求职信范文
2014/05/23 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
小学生毕业评语
2014/12/26 职场文书
导游词400字
2015/02/13 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
防卫过当辩护词
2015/05/21 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
入党转正申请书范文
2019/05/20 职场文书