Давайте сначала посмотрим на предыдущий код единого движения. Какая ошибка произойдет после изменения скорости. Вот два теста для тестирования
Кода -копия выглядит следующим образом:
<стиль типа = "text/css">
#div1 {
Ширина: 100px;
высота: 100px;
позиция: абсолютно;
Фон: красный;
Верх: 50px;
Слева: 600px;
}
#div2 {
Ширина: 1px;
Высота: 300px;
позиция: абсолютно;
Слева: 300px;
Верх: 0;
Фон: черный;
}
#div3 {
Ширина: 1px;
Высота: 300px;
позиция: абсолютно;
Слева: 100px;
Верх: 0;
Фон: черный;
}
</style>
<script type = "text/javascript">
var time = null;
функция startMove (itarget) {
var Odiv = document.getElementById ("div1");
ClearInterval (время);
time = setInterval (function () {
var speed = 0;
if (Odiv.OffSetleft <iTarget) {
скорость = 7;
} еще {
скорость = -7;
}
// на самом деле есть проблема с этой ситуацией
ODIV.STYLE.LEFT = ODIV.OFFSETLEFT + SPEED + 'PX';
}, 30)
}
</script>
</head>
<тело>
<input type = "кнопка" id = "btn" value = "до 100" onclick = "startMove (100)" />
<input type = "кнопка" 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 speed = 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 + SPEED + 'PX';
}
}, 30)
}
</script>
Позвольте мне объяснить: зачем вам использовать Math.abs, чтобы получить здесь абсолютную ценность?
Причина проста, потому что скорость может быть положительной или отрицательной.
Теперь пусть расстояние между целью и объектом будет таким же 7, тогда оно будет там. Почему 7? Потому что в следующий раз у него менее 7 упражнений. В настоящее время мы достигли целевой точки.
Теперь проблема появится снова, и он не останавливался точно в целевой точке в написании таким образом. Таким образом, мы добавили простое предложение, непосредственно позволив влево равняться целевой точке. Odiv.Style.left = itarget+'px';
На самом деле, в прошлый раз их было менее 7, но все знают, что программа работает слишком быстро, и человеческий глаз не видит этого. Теплая улыбка
В настоящее время не будет проблем. Мигание
Это условие остановки для равномерного движения. Тогда друг спросил, почему буферизация упражнения не так хлопотно?
Поскольку его скорость изменилась, и она становится все меньше и меньше, до конца он даже достигнет 1, и определенно не будет такой проблемы при шаг за шагом.