이 글은 주로 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)관련 권장 사항:
JavaScript의 등속운동과 가변속도(버퍼링)운동에 대한 자세한 소개_기본지식
위 내용은 JS 균일 모션 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
