在一些动画设置中,我们可以用CSS中已有的动画属性方便的设置动画效果,比如说animation动画,transition过渡,它们结合一些2D,3D变换可以达到可观的动画效果,但是涉及到更多更加复杂的动画这个时候我们还要基于JavaScript实现。在这里我们定义一个JavaScript中一个实用的函数以便今后的设置。
动画基础
(1)定时器setTimeout
动画的设置是在一个连续间隔的时间内,变换关键帧,在人眼的视觉暂留下连续起来。这个时间间隔如何实现?时间间隔的实现依赖于setTimeout定时器API,今后的动画设置也将基于这个API。
setTimeout能够让某个函数在经过一段预定时间之后才开始执行,带有两个参数。第一个参数是要执行函数的名字,第二个参数则是一个数值,表示间隔的时间长短:
使用方法:setTimeout(“function()”,interval)
window.onload=setTimeout("changeNumber()",2000);//2s后调用此函数
function changeNumber()
{
var test=document.getElementById("test");
test.innerHTML="warning!";
}
这样一来定时就被解除了.
(2)递归函数
既然有了定时器,我们就能基于定时器API来设置动画了。如何设置动画?我们需要在间隔时刻改变目标的位置,直到到达终点,只要这个间隔足够小,人眼就会将其视为连续的平滑动画。我决定定义一个moveElement函数,在间隔时刻改变目标的位置直到到达终点: