먼저 이전 통일 모션 코드를 살펴 보겠습니다. 속도를 수정 한 후 어떤 종류의 버그가 발생할 것인지. 테스트를위한 두 가지 벤치 마크가 있습니다
코드 사본은 다음과 같습니다.
<스타일 유형 = "텍스트/CSS">
#div1 {
너비 : 100px;
높이 : 100px;
위치 : 절대;
배경 : 빨간색;
상단 : 50px;
왼쪽 : 600px;
}
#div2 {
너비 : 1px;
높이 : 300px;
위치 : 절대;
왼쪽 : 300px;
상단 : 0;
배경 : 검은 색;
}
#div3 {
너비 : 1px;
높이 : 300px;
위치 : 절대;
왼쪽 : 100px;
상단 : 0;
배경 : 검은 색;
}
</스타일>
<script type = "text/javaScript">
var time = null;
함수 startMove (itarget) {
var odiv = document.getElementById ( "div1");
ClearInterval (시간);
time = setInterval (function () {
var 속도 = 0;
if (odiv.offsetleft <itarget) {
속도 = 7;
} 또 다른 {
속도 = -7;
}
// 실제로이 상황에 문제가 있습니다
odiv.style.left = odiv.offsetleft + 속도 + 'px';
}, 30)
}
</스크립트>
</head>
<body>
<입력 유형 = "button"id = "btn"value = "to 100"onclick = "startMove (100)" />
<입력 유형 = "button"id = "btn"value = "~ 300"onclick = "startMove (300)" />
<div id = "div1">
</div>
<div id = "div2">
</div>
<div id = "div3">
</div>
</body>
실제로, 그러한 코드가 속도를 7과 같은 홀수로 변경하고 대상 지점에 도달하면 정수이므로 대상 지점에 도달하지 못하거나 대상 지점을 초과하는 버그가 발생합니다.
그렇다면 왜 이런 일이 발생합니까?
실제로, 대상 지점에 도달하면 대상 지점에 정확하게 도달 할 수는 없습니다. 대상 지점이 100이고 매번 7 번의 걷기가있는 경우, 현재로서는 대상 지점을 통과하거나 실패합니다.
목표 지점에 도달하지 마십시오. 실제로, 그것은 이전 버퍼링을 돕는 것과 비슷합니다.
그렇다면 목표 지점에 도달했다고 어떻게 계산합니까?
예를 들어, 택시를 특정 장소로 가져 가면 운전자는 10 미터와 20 미터 떨어진 곳에 멈출 것입니다. 차에 그 장소에 붙여서 멈추도록 요청하는 것은 불가능합니다.
실제로 프로그램은 동일합니다. 물체와 대상 지점 사이의 거리가 어느 정도 가까이있는 한, 우리는 더 가까이있을 필요가 없으며 우리가이를 도달했다고 생각합니다.
수정 된 코드를 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
var time = null;
함수 startMove (itarget) {
var odiv = document.getElementById ( "div1");
ClearInterval (시간);
time = setInterval (function () {
var 속도 = 0;
if (odiv.offsetleft <itarget) {
속도 = 7;
} 또 다른 {
속도 = -7;
}
if (math.abs (itarget -odiv.offsetleft) <= 7) {
ClearInterval (시간);
odiv.style.left = itarget+'px';
} 또 다른 {
odiv.style.left = odiv.offsetleft + 속도 + 'px';
}
}, 30)
}
</스크립트>
설명하겠습니다 : 왜 여기서 절대 가치를 얻기 위해 Math.abs를 사용해야합니까?
속도가 양수 또는 부정적 일 수 있으므로 그 이유는 간단합니다.
이제 대상과 물체 사이의 거리는 7만큼 작게되면 거기에있을 것입니다. 왜 7? 그는 다음에 7 회 미만의 운동을했기 때문입니다. 현재 우리는 목표 지점에 도달했습니다.
이제 문제가 다시오고 있으며, 그는 이런 식으로 글을 쓰는 대상 지점에서 정확하게 멈추지 않았습니다. 그래서 우리는 간단한 문장을 추가했고, 직접 왼쪽을 대상 지점과 동등하게 만들었습니다. odiv.style.left = itarget+'px';
사실, 지난번에 7 명 미만이 있었지만 모든 사람들은 프로그램이 너무 빠르게 진행되고 인간의 눈이 볼 수 없다는 것을 알고 있습니다. 따뜻한 미소
현재 문제는 없을 것입니다. 깜박거리다
이것은 균일 한 움직임을위한 정지 조건입니다. 그런 다음 친구가 물었다. 왜 버퍼링 운동이 그렇게 번거롭지 않습니까?
그의 속도가 바뀌고 점점 작아지고 있기 때문에 끝날 때까지 1에 도달 할 때까지 단계적으로 앞으로 나아갈 때 그러한 문제는 없을 것입니다.