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);
热门推荐
10 爱情贺卡祝福语简短英语
11 娃娃考试祝福语幽默简短
12 结婚祝福语简短精辟 兄弟
13 表达朋友的祝福语简短
14 春节感恩祝福语简短的
15 结婚祝福语粤语大全简短
16 恭喜朋友升职祝福语简短
17 圣诞饭店祝福语大全简短
18 建工系毕业祝福语简短