자바스크립트를 활용한 객체의 등속/가변 속도 모션 구현 방법_기본지식

예시 1 - 균일한 움직임 제어 및 객체 정지

HTML:

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

< ;div id="d1">
 

JS: 오른쪽 이동 구현

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

var 타이머=null;
window.onload=function(){
var odiv=document.getElementById('d1');
var obtn=document.getElementById ('btn');
clearInterval(timer); //해당 함수의 주요 내용을 확인하세요. ①
obtn.onclick=function(){
timer=setInterval(function(){
var speed=10;
        if(odiv .offsetLeft>=300){ //객체 여백이 지정된 변위에 도달하면 타이머를 닫습니다. .offsetLeft speed 'px' }
}, 30); 🎜>}
}


포인트: "위 코드와 같은 연산자에서 speed 값이 7과 같은 기본 숫자인 경우 증가하는 왼쪽 여백은 300px 값을 가지지 않습니다. , 그러나 294에 도달한 후 바로 301로 점프하여 조건이 실패하고 중지할 수 없게 됩니다.
② div가 이동을 멈춘 후 버튼을 클릭할 때마다 일정 속도로 이동하는 것을 방지하려면 else 문을 사용하세요.
③ 타이머를 켜기 전에 먼저 타이머를 꺼두시면 버튼을 계속해서 눌러도 여러 개의 타이머가 동시에 켜지는 것을 방지할 수 있어 이동 속도가 더 빨라집니다.

패키지:


코드 복사

코드는 다음과 같습니다.

//object: 이동할 개체의 ID itarget: 수평 이동 위치
var 타이머=null;
function moveto(object,itarget){
var obj=document.getElementById (객체 ); 부모로부터의 가장자리 거리와 수평 변위를 기준으로 왼쪽 및 오른쪽 변위 방향을 결정
speed=10;
}else{
speed=-10;
}
If( obj.offsetLeft==itarget){
clearInterval(타이머);
                                                                                                                  30);
}



예 2 - 위의 캡슐화된 함수 moveto()를 다음으로 수정합니다. 물체를 가변 속도로 멈추게 합니다

JS:

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

var 타이머=null; function moveto(object,itarget){ var obj=document.getElementById(object);clearInterval(timer); 타이머= setInterval(function (){

var speed=0;

if(obj.offsetLeft speed=(itarget-obj.offsetLeft)/10;
}else{
speed=-(obj.offsetLeft-itarget)/10;
                                                                                      속도>0?Math.ceil (speed):Math.floor(speed);//1px 미만의 최종 변위가 무시되는 문제를 해결하기 위한 반올림
if(obj.offsetLeft==itarget){
clearInterval(timer);
                                                                                                           문서 ment.title=obj.offsetLeft;
},30 );
}


핵심 포인트 :
①속도 값을 감소시켜 속도 변화를 달성합니다.
② 끝으로 이동하면 픽셀이 1px 미만인 경우 왼쪽 개체에 1px 미만의 여러 값이 추가(감산)되지 않고 무시되므로 최종 변위가 개체보다 커집니다. 수평 변위 위치 설정 itarget은 몇 픽셀 적습니다. 해결책은 반올림하는 것입니다. 양수는 ceil()에 의해 반올림되고 음수는 Floor()에 의해 반올림됩니다.

확장: 수직 변위의 원리는 수평 변위의 원리와 동일합니다.

보충 1:
속도와 itarget이 나누어지지 않아 객체가 itarget 위치에 정확하게 도달하지 못하고 주변에서 흔들리는 문제를 해결합니다.

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

var 타이머=null;
function moveto( object,itarget){
var obj=document.getElementById(object);
var speed=0;
If(obj.offsetLeft<=itarget) {
speed=7;
} else{
speed=-7;
}
// itarget의 거리가 speed보다 작아지면 이동을 멈추고 동시에 객체를 설정하고 왼쪽은 itarget의 위치로 직접 이동합니다. itarget 'px' ;
            }else{
                                                                     >
},30);
}




보충 2:

오프셋의 버그: 예를 들어 너비뿐만 아니라 패딩 및 테두리도 포함하는 offsetWidth입니다. 객체에 패딩이나 테두리를 설정하고 해당 객체에 offsetWidth를 할당하면 움직임에 차이가 발생합니다.
해결책: 오프셋을 사용하는 대신 IE 및 FF와 호환되는 함수를 만들어 offsetWidth 대신 요소의 너비 속성 값을 가져옵니다. 함수는 다음과 같습니다. getAttr()코드 복사

코드는 다음과 같습니다.

function getAttr(obj, attrName){ var obj=document.getElementById(obj); if(obj.currentStyle){ return obj.currentStyle[attrName]; //IE와 호환 가능 }else{

return getCompulatedStyle(obj,false)[attrName]; //FF와 호환 가능

}
}