JavaScript实现匀速与缓冲动画的原理及代码解析

运动类型与基本原理

Div元素的运动本质是其与浏览器边框距离的持续变化。若该距离变化的速率保持恒定，则称为匀速运动；若速率不固定，则为变速运动。特别地，当变化率与元素距离目标边框的距离成正比时，这种运动被称为缓冲运动。

实现原理十分直观：利用定时器（timer）定期执行代码，每隔一段时间更新div距离浏览器边框的像素值。

进入定时器逻辑（每30毫秒执行一次）：

判断是否已到达终点位置：

{ 若到达，则停止定时器 }

否则执行：{ 更新距离 }

具体更新距离的计算方式决定了运动是匀速还是缓冲（变速）。

 
var timer=null;
function startMove()
{ 
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function () {
var iSpeed=1;
if(oDiv.offsetLeft>=300)
{ 
clearInterval(timer);
} 
else
{ 
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
} 
},30);
}; 

 
var timer=null;
function startMove()
{ 
var iTarget=300;
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function () {
var iSpeed=(iTarget-oDiv.offsetLeft)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
iSpeed=Math.ceil(iSpeed);
if(oDiv.offsetLeft==iTarget)
{ 
clearInterval(timer);
} 
else
{ 
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
} 
document.title=oDiv.style.left+' '+iSpeed;
},30);
}; 

至此，一个基础的运动框架已构建完成。其核心原理简单明了，但实际应用中仍有优化空间，需逐步完善。