Js中实现动画都是靠setInterval或者setTimeout来实现。setInterval自身就能不断循环来执行计算从而显示新的帧setTimeout是间隔一段时间后仅执行一次他需要配合函数循环实现很多人偏爱setTimeout来实现。本文采用setInterval实现。据说普通人眼能看到1/24秒就是说1秒至少24帧每次移位间隔需要小于1000/2441.7毫秒也就说setInterval要每隔至少40毫秒执行一次一般地我们采用10毫秒当然间隔时间越短客户端执行计算次数就越多如果你code计算量大则可以适当调长些。首先贴上封装好的动画类Animation。Animation其中fade方法是实现渐变效果的resize方法是改变对象尺寸大小的move方法是实现移动效果的。首先看下move方法其他2个方法实现其实是类似的。move方法的调用Animation.move(divObj,{x:500,y:500},100,Tween.Quart.easeInOut); 第一个参数是移动的对象第二个参数是移动的目标坐标第三个参数是一共执行多少次移位即移动时间内一共的帧数即执行多少次第4个参数是可选参数指定Tween具体算法若不加则默认采用Tween.Linear。移动问题的关键就是每次移位后应该将移动对象定位到什么位置即其left和top是多少。来看一个简单的数学题当我们知道了一个点的起始位置initPos和终点位置targetPos要求在count次移动后达到终点该点为匀速运动求第currentCount次移动后该点位置在哪里显然的位置在targetPos - initPos*currentCount/countinitPos。这个就是Tween.Linear算法。当这个点不是匀速运动时就是Tween的其他算法。Tween来自Flash的AS你可以参考http://www.robertpenner.com/easing/easing_demo.html去查看Tween各种算法的运动效果也可以参考cloudgamer的一篇文章JavaScript Tween算法及缓动效果。相比下我将Tween各种算法的传入参数稍改了下将移动的总距离的运算放到了Tween算法内部然后最后个参数是作为总共计算次数理解的而不是持续时间。我本来是想用持续时间运算的但是发现还是要将持续时间除以10毫秒得到总次数然后参与运算总次数还可能非整数有误差所以我干脆直接传总次数过来当然你也可以改成持续时间。那在应用时究竟移动次数应该写多少在每次间隔10毫秒进行移动下次数越多耗时越长。譬如采用Tween.Linear计算移动位置时大概是耗时count*10ms的1.5倍譬如写100就是100*10*1.51.5s左右这个多出来的0.5倍是Tween.Linear计算花费的时间。贴上改写后的Tween。Tween相比move方法fade方法是用Tween算法去计算透明度而resize方法是用Tween算法去计算width和height没有大的区别。利用这3个特效一些简单的动画都能实现了。如果某对象要在移动过程中同时改变大小和设置透明度只要三个方法连续写下来即可。如input typebutton valueMoveResizeSetOpacity onclickAnimation.fade(divObj,50
)
