Solía haber una sola forma de hacer un ciclo cronometrado en JavaScript: setInterval(). Si necesita repetir algo bastante rápido (pero no tan rápido como absolutamente posible como un for loop), lo usarías. A los efectos de la animación, el objetivo es sesenta “fotogramas” por segundo para que parezcan suaves, por lo que ejecutaría un bucle como este:
setInterval(function() {
// animiate something
}, 1000/60);Hay una alternativa mejor a esto ahora. Paul Irish presentó requestAnimationFrame hace más de dos años. No tengo mucho que agregarle, simplemente nunca lo había usado antes y ahora lo tengo, así que pensé en ayudar a correr la voz y escribir sobre su uso básico.
¿Por qué mejor?
Como explicó Paul:
- El navegador puede optimizarlo, por lo que las animaciones serán más fluidas.
- Las animaciones en pestañas inactivas se detendrán, permitiendo que la CPU se enfríe
- Más amigable con la batería
El ejemplo más simple posible
function repeatOften() {
// Do whatever
requestAnimationFrame(repeatOften);
}
requestAnimationFrame(repeatOften);Llámelo una vez para iniciarlo, y su función se llama a sí misma de forma recursiva.
Iniciar y detener
requestAnimationFrame devuelve una identificación que puede usar para cancelarla, al igual que setTimeout o setInterval lo hace. jQuery se usa aquí solo para demostrar una animación simple y vincular eventos.
var globalID;
function repeatOften() {
$("<div />").appendTo("body");
globalID = requestAnimationFrame(repeatOften);
}
$("#start").on("click", function() {
globalID = requestAnimationFrame(repeatOften);
});
$("#stop").on("click", function() {
cancelAnimationFrame(globalID);
});Ejemplo de esto:
Soporte del navegador
Consulte las tablas ¿Puedo usar…?
Los únicos problemas notables son IE 9-, iOS 5- y Android. Pero en realidad no es un problema, porque:
Polyfill
Al igual que muchas funciones web sofisticadas, es bueno usarlo cuando está disponible y recurrir a algo que funciona cuando no se puede. Probablemente sea mejor referirse a esta esencia. Literalmente, solo incluye ese fragmento en cualquier lugar antes de usar requestAnimationFrame o cancelAnimationFrame.
Con esto, podrá usar requestAnimationFrame literalmente en cualquier navegador.
Ejemplo un poco más complejo
Aprendí sobre esto mientras hacía una pequeña demostración tonta para aprender mejor el lienzo:
Vea Pen Super Simple requestAnimationFrame Thing por Chris Coyier (@chriscoyier) en CodePen.
Lo que en realidad sería más complejo son varias animaciones que se ejecutan a la vez usando esto (que aún retrocede bien). Siéntase libre de vincular algunas de esas bondades en los comentarios si conoce ejemplos.