JavaScript实现动画效果

在一些动画设置中，我们可以用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函数，在间隔时刻改变目标的位置直到到达终点：