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+ajax请求data显示在GridView上(asp.net)
Aug 27 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
Aug 06 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
Vue.js表单控件实践
Oct 27 Javascript
Angular2利用组件与指令实现图片轮播组件
Mar 27 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
vue多个元素的样式选择器问题
Nov 29 Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 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
php中的MVC模式运用技巧
2007/05/03 PHP
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python中xrange用法分析
2015/04/15 Python
Python读写配置文件的方法
2015/06/03 Python
python版学生管理系统
2018/01/10 Python
python2 与python3的print区别小结
2018/01/16 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
Pandas的Apply函数具体使用
2020/07/21 Python
Python timeit模块原理及使用方法
2020/10/10 Python
html5 canvas 使用示例
2010/10/22 HTML / CSS
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
打架检讨书400字
2014/01/17 职场文书
师范生自荐信模板
2014/05/28 职场文书
拓展训练激励口号
2014/06/17 职场文书
校运会口号
2014/06/18 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
学籍证明模板
2014/11/21 职场文书
初中语文教学随笔
2015/08/15 职场文书