javascript 流畅动画实现原理

当然考虑到浏览器(特别指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流行框架是如何做到的。这就是生活嘛....

(0)

相关推荐

  • javascript判断css3动画结束 css3动画结束的回调函数

    css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,JavaScript仍然能捕获动画或变换的结束事件: transitionend事件和animationend事件标准的浏览器事件,但在WebKit浏览器里你仍然需要使用webkit前缀,所以,我们不得不根据各种浏览器分别检测事件 复制代码 代码如下: var transitions = {        'transition':'transitionend',

  • javascript 自定义回调函数示例代码

    如果你直接在函数a里调用的话,那么这个回调函数就被限制死了.但是使用函数做参数就有下面的好处:当你a(b)的时候函数b就成了回调函数,而你还可以a(c)这个时候,函数c就成了回调函数.如果你写成了functiona(){...;b();}就失去了变量的灵活性. 复制代码 代码如下: function a(index,callback){ callback(index); } function b(index){ alert(index); } a(10000,b);

  • JavaScript快速检测浏览器对CSS3特性的支持情况

    在项目中需要快速检测浏览器是否支持某CSS3特性,比如检测是否支持"transform",然后我的布局会有两种完全不同的版式. 当然除开本文介绍的这种快速方法,还有一种更有名和更通用的方法,那就是modernizr,运行脚本之后它会在html的class上加上浏览器支持的所有特性的列表. 优点: js是可配置的,不需要的特性检测可以在配置脚本中去掉基于特性检测js库简单好用 除此之外还有一种不太好的方法,那就是判断浏览器的UA,不好的原因是UA可能会伪造,而且版本判断繁琐,还有不稳定.

  • javascript动画效果打开/关闭层

    js_打开层关闭层效果_我们 body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;} #bodyL{ float:left; width:84px; margin-right:2px; } a.od{ width:80px; height:25px; line-height:25px; text-align:center; font-weight:bold; border: 2px solid #849BCA; disp

  • 纯JAVASCRIPT图表动画插件Highcharts Examples

    What is Highcharts? 下载地址 http://www.jb51.net/jiaoben/24363.htmlHighcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spl

  • javascript动画对象支持加速、减速、缓入、缓出的实现代码

    调用接口: 复制代码 代码如下: /** * @param elem {HTMLElement} 执行动画的HTML元素 * @param params {JSON} 动画执行过过程中需要修改的HTML属性 * @param duration {Number} 可选,动画执行时间,单位毫秒 * @param easing {String} 可选,动画执行的方式,缓入easeIn.缓出easeOut * @param callback {Function} 可选,动画执行完成时的回调函数 * @r

  • 理解javascript中的回调函数(callback)

    最近在看 express,满眼看去,到处是以函数作为参数的回调函数的使用.如果这个概念理解不了,nodejs.express 的代码就会看得一塌糊涂.比如: 复制代码 代码如下: app.use(function(req, res, next) {     var err = new Error('Not Found');     err.status = 404;     next(err); }); app是对象,use是方法,方法的参数是一个带参的匿名函数,函数体直接在后面给出了.这段代码

  • javascript简易动画类(div渐变)

    程序源码 复制代码 代码如下: function Animate(el, prop, opts) { this.el = el; this.prop = prop; this.from = opts.from; this.to = opts.to; this.time = opts.time; this.callback = opts.callback; this.animDiff = this.to - this.from; } Animate.prototype._setStyle = fu

  • 关于javascript 回调函数中变量作用域的讨论

    1.背景 Javascript中的回调函数,相信大家都不陌生,最明显的例子是做Ajax请求时,提供的回调函数, 实际上DOM节点的事件处理方法(onclick,ondblclick等)也是回调函数. 在使用DWR的时候,回调函数可以作为第一个或者最后一个参数出现,如: JScript code function callBack(result){ } myDwrService.doSomething(param1,param2,callBack);//DWR的推荐方式 //或者 myDwrSer

  • javascript 回调函数详解

    回调函数定义 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应. 在JavaScript中,回调函数具体的定义为:函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A.我们就说函数A叫做回调函数.如果没有名称(函数表达式),就叫做匿名回调函数.因此callback

随机推荐