먼저 기존의 균일 모션 코드를 살펴보고, 속도를 수정하면 어떤 버그가 발생하는지 살펴보겠습니다. 테스트를 위해 여기에 두 개의 벤치마크가 추가되었습니다 코드 복사 코드는 다음과 같습니다. <br> #div1 {<br> 너비: 100px;<br> 높이: 100px;<br> 위치: 절대;<br> 배경: 빨간색;<br> 상단: 50px;<br> 왼쪽: 600px;<br> }<br> #div2 {<br> 너비: 1px;<br> 높이: 300px;<br> 위치: 절대;<br> 왼쪽: 300px;<br> 상단: 0;<br> 배경: 검정색;<br> }<br> #div3 {<br> 너비: 1px;<br> 높이: 300px;<br> 위치: 절대;<br> 왼쪽: 100px;<br> 상단: 0;<br> 배경: 검정색;<br> }<br> </스타일><br> <script type="text/javascript"><br> var 시간 = null;<br> 함수 startMove(iTarget) {<br> var oDiv = document.getElementById("div1");<br> ClearInterval(시간);<br> 시간 = setInterval(함수() {<br> var 속도 = 0;<br> if (oDiv.offsetLeft < iTarget) {<br /> 속도 = 7;<br /> } 그 밖의 {<br /> 속도 = -7;<br /> }<br /> // 其实这种情况是有问题的<br /> oDiv.style.left = oDiv.offsetLeft 속도 'px';<br /> <br /> }, 30)<br /> }<br /> </script><br /> </머리><br> <br> <input type="button" id="btn" value="to 100" onclick="startMove(100)" /><br> <input type="button" id="btn" value="to 300" onclick="startMove(300)" /><br> <div id="div1"><br> > <div id="div2"><br> > <div id="div3"><br> > </본문><br> <br><br> <br>실제로 이러한 코드의 속도를 7과 같은 홀수로 변경했는데 도착 목표 지점이 정수라면 목표 지점에 도달하지 못하거나 그 이상으로 왔다 갔다 하는 버그가 발생하게 됩니다. 목표지점</div> <p></p> <p>그럼 왜 이런 일이 일어나는 걸까요? <img title="image" alt="" src="http://files.jb51.net/file_images/article/201412/2014121916285010.png"> </p>실제로 목표 지점에 도달하면 목표 지점에 정확하게 도달할 수 없습니다. 목표 지점이 100이고 매번 7번 걷는다면 이때 목표 지점을 통과하거나 실패하게 됩니다. 통과하지 마세요. <p> </p>절대 목표 지점에 도달하지 마세요. 사실 이전 버퍼와 조금 비슷합니다. <p> </p>그렇다면 목표 지점에 도달했다는 것을 어떻게 계산하나요? <p> </p>예: 택시를 타고 특정 장소로 이동할 때 운전자가 현재 위치에서 10~20미터 정도 떨어진 곳에 정차해야 도착합니다. 그 자리에 차를 멈추라고 하는 것은 불가능합니다. <p> </p>그래서 사실 과정은 똑같습니다. 물체와 목표지점 사이의 거리가 일정 수준에 가까우면 굳이 더 가까이 다가갈 필요도 없고 끝났다고 생각합니다. <p> </p>수정된 코드를 살펴보겠습니다. <p> </p> <p></p> <p></p> <div class="codetitle">코드 복사<span><a style="CURSOR: pointer" data="73323" class="copybut" id="copybut73323" onclick="doCopy('code73323')"><u> 코드는 다음과 같습니다.</u></a></span> <script type="text/javascript"></div> var 시간 = null;<div class="codebody" id="code73323"> <br> 함수 startMove(iTarget) {<br> var oDiv = document.getElementById("div1"); 클리어 간격(시간) <p> time = setInterval(function() {<br> var 속도 = 0;<br> If (oDiv.offsetLeft < iTarget) {<br> 속도 = 7;<br> } else {<br> 속도 = -7;<br> }<br> If (Math.abs(iTarget - oDiv.offsetLeft) <= 7) {<br> > oDiv.style.left=iTarget 'px';<br> } else {<br> oDiv.style.left = oDiv.offsetLeft 속도 'px';<br> }<br> ~ }, 30)<br> }<br> > <br></p> <p>설명: 여기에서 절대값을 얻기 위해 Math.abs를 사용하는 이유는 무엇입니까? </p> <p>이유는 간단합니다. 속도가 양수일 수도 있고 음수일 수도 있기 때문입니다. </p> <p>이제 대상과 물체 사이의 거리를 7보다 작게 두겠습니다. 왜 7인가요? 왜냐하면 그의 다음 운동은 7보다 작을 것이기 때문입니다. 이때 우리는 그가 목표 지점에 도달한 것으로 간주할 것입니다. </p> <p>그럼 또 문제가 나오네요. 이렇게 글을 쓰다보니 정확히 목표지점에서 멈추지 않더군요. 그래서 간단한 문장을 추가하고 바로 왼쪽을 목표점과 동일하게 만들었습니다. oDiv.style.left=iTarget 'px';</p> <p>사실 지난번엔 7명도 채 안 남았는데, 프로그램이 너무 빨리 진행되고 사람의 눈에 안 보인다는 건 다들 아실 거예요. 따뜻한 미소</p> <p>현재로서는 문제가 없을 것입니다. 윙크 </p> <p>등속운동의 정지조건입니다. 그러자 어떤 친구들은 완충 운동이 왜 그렇게 번거롭지 않느냐고 물었습니다. </p> <p>그의 속도는 계속 변하고 점점 작아지기 때문에 결국 1에 도달하게 됩니다. 한걸음 한걸음 앞으로 나아가면 절대 그런 문제는 없을 것입니다. </p> </div>
