JavaScript의 등속운동과 가변속도(버퍼링)운동에 대한 자세한 소개_기본지식

div의 이동은 실제로 div와 브라우저 테두리 사이의 거리가 변경되는 것입니다. 변화율이 일정하면 등속운동이고, 변화율이 일정하지 않으면 가변속도 운동이다. 변화율이 브라우저 경계로부터의 거리에 비례하면 div가 버퍼링 이동을 하고 있다고 말할 수 있습니다.
사실 매우 간단합니다. 타이머를 사용하여 가끔씩 div와 브라우저 테두리 사이의 거리를 변경하면 됩니다.

예를 들어 일정한 속도로 이동하는 경우:

타이머 입력: (30ms마다 수행)
if(종료점에 도달했는지 여부)
{타이머 정지}
else do{거리 변경}

거리 변경 방법에 따라 일정한 속도로 이동할지 가변 속도(버퍼링)로 이동할지 결정됩니다.

예:

코드 복사 코드는 다음과 같습니다.

var 타이머=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 타이머=null;
function startMove()
{
var iTarget=300;

var oDiv=document.getElementById('div1');

clearInterval( 타이머);
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( 타이머);
}
else
{
oDiv.style.left=oDiv.offsetLeft iSpeed ​​
}
document.title=oDiv.style.left ' ' iSpeed;
},30 );
};


이렇게 해서 모션 프레임워크가 작성됩니다! 원리는 간단하지만 아직 완성도가 필요합니다. 천천히 시간을 가지세요!