Supongamos que existe un requisito de función de animación: cambie el ancho de un DIV de 100px a 200px. El código escrito puede verse así:
La copia del código es la siguiente:
<div id = "test1"> </div>
función animate1 (elemento, endvalue, duración) {
var starttime = new Date (),
startValue = parseInt (element.style.width),
paso = 1;
var timerID = setInterval (function () {
var nextValue = parseInt (element.style.width) + step;
element.style.width = nextValue + 'px';
if (nextValue> = endValue) {
ClearInterval (TimerID);
// consumen mucho tiempo para mostrar animación
elemento.innerhtml = nueva fecha - starttime;
}
}, duración / (endValue - startValue) * paso);
}
animate1 (document.getElementById ('test1'), 200, 1000);
El principio es aumentar 1px cada vez hasta 200px. Sin embargo, el tiempo de visualización después de que termine la animación es más de 1 (generalmente alrededor de 1.5s). La razón es que SetInterval no puede garantizar estrictamente el intervalo de ejecución.
¿Hay alguna mejor manera de hacerlo? Primero veamos un problema de matemáticas de la escuela primaria:
La copia del código es la siguiente:
El edificio A y el edificio B estaban separados a 100 metros. Un hombre caminó del edificio A al edificio B a una velocidad constante. Después de caminar durante 5 minutos, llegó a su destino. ¿Qué tan lejos estaba de construir un en el tercer minuto?
La fórmula de cálculo para calcular una distancia de cierto tiempo durante la velocidad constante es: Distancia * Tiempo/hora de corriente. Entonces la respuesta debe ser 100 * 3/5 = 60.
La inspiración de esta pregunta es que el viaje de un momento determinado se puede calcular a través de una fórmula específica. Del mismo modo, el valor de cierto momento durante el proceso de animación también se puede calcular a través de fórmulas en lugar de acumularse:
La copia del código es la siguiente:
<div id = "test2"> </div>
función animate2 (elemento, endvalue, duración) {
var starttime = new Date (),
startValue = parseInt (element.style.width);
var timerID = setInterval (function () {
porcentaje var = (nueva fecha - starttime) / duración;
var stepValue = startValue + (endValue - startValue) * porcentaje;
element.style.width = StepValue + 'Px';
if (porcentaje> = 1) {
ClearInterval (TimerID);
elemento.innerhtml = nueva fecha - starttime;
}
}, 13);
}
animate2 (document.getElementById ('test2'), 200, 1000);
Después de esta mejora, puede ver que el tiempo de ejecución de animación solo tomará hasta 10 ms. Sin embargo, el problema no se ha resuelto por completo. Si verifica el elemento Test2 en la herramienta de desarrollo del navegador, encontrará que el ancho final de Test2 puede ser más de 200px. Si verifica cuidadosamente el código de la función Animate2, encontrará:
1. El valor del porcentaje puede ser mayor que 1, que puede resolverse limitando el valor máximo por matemáticas.
2. Incluso si se garantiza que el valor del porcentaje no es más de 1, siempre que el valor final o el valor inicial sea un decimal, el valor del porcentaje (endalvalos - startvalue) * puede causar errores, porque la operación decimal de JavaScript no es lo suficientemente preciso. De hecho, lo que debemos asegurar es la precisión del valor final, por lo que cuando el porcentaje es 1, solo use endvalue directamente.
Entonces, el código de la función Animate2 se modifica a:
La copia del código es la siguiente:
función animate2 (elemento, endvalue, duración) {
var starttime = new Date (),
startValue = parseInt (element.style.width);
var timerID = setInterval (function () {
// Asegúrese de que el porcentaje no sea mayor que 1
porcentaje var = math.min (1, (nueva fecha - starttime) / duración);
Var StepValue;
if (porcentaje> = 1) {
// Asegurar la precisión del valor final
stepValue = EndValue;
} demás {
stepValue = startValue + (endValue - startValue) * porcentaje;
}
element.style.width = StepValue + 'Px';
if (porcentaje> = 1) {
ClearInterval (TimerID);
elemento.innerhtml = nueva fecha - starttime;
}
}, 13);
}
Hay otra última pregunta: ¿por qué se establece el intervalo de SetInterval en 13MS? La razón es que la velocidad de actualización del monitor en la actualidad generalmente no excede las 75Hz (es decir, se actualiza 75 veces por segundo, lo que significa que se actualiza cada 13 ms), y sincronizar el intervalo con la velocidad de actualización es mejor.