JS 균일 모션 예제에 대한 자세한 설명

이 글은 주로 JS 유니폼 모션 예제에 대한 자세한 설명을 공유합니다. 먼저 JS 모션의 기본 원리를 소개하겠습니다.

JS 이동의 기본 원리:

p를 이동하려면 개체의 좌표를 수정하는 것이 중요합니다.

op.style.left=offsetLeft+speed+'px';

하지만 이것은 한 번만 이동할 수 있으며 타이머 기능을 사용하여 다음을 수행할 수 있습니다. 그런 작전을 허용해라.' 움직여라.

setInterval(funtion(){
op.style.left=offsetLeft+speed+'px'; （speed是每次移动的像素）
},30)

이렇게 하면 운동할 수 있지만 효과는 우리에게 필요한 것이 아닙니다. 소스 코드는 다음과 같습니다.

움직이는 물체를 멈추려면: 핵심은 offsetLeft의 크기를 결정하고 타이머를 끄는 것입니다.

var timer=null;
time=setInterval(function(){
                     if(op.offsetLeft>=300){
clearInterval(timer);
                         }else{
op.style.left=op.offsetLeft+10+‘px’；}
},30)这样还是有小瑕疵，就是多次点击造成的BUG，解决方法就是关闭上次的定时器：多加个clearInterval(timer)

관련 권장 사항:

범용 균일 모션을 만드는 방법 Framework

js 기반 등속운동 예시 설명

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

위 내용은 JS 균일 모션 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!