Javascript动画的实现原理浅析
假设有这样一个动画功能需求:把一个div的宽度从100px变化到200px。写出来的代码可能是这样的:
<divid="test1"style="width:100px;height:100px;background:blue;color:white;"></div> functionanimate1(element,endValue,duration){ varstartTime=newDate(), startValue=parseInt(element.style.width), step=1; vartimerId=setInterval(function(){ varnextValue=parseInt(element.style.width)+step; element.style.width=nextValue+'px'; if(nextValue>=endValue){ clearInterval(timerId); //显示动画耗时 element.innerHTML=newDate-startTime; } },duration/(endValue-startValue)*step); }
animate1(document.getElementById('test1'),200,1000);