You are here
Método de JavaScript para animaciones de alta calidad Sin categoría 

Método de JavaScript para animaciones de alta calidad

Método de JavaScript para animaciones de alta calidad

Método de JavaScript requestAnimationFrame () para animaciones de alta calidad

La web moderno de hoy en día está lleno de lugares para contemplar en cada página, donde los menús se deslizan dentro y fuera, el contenido se desvanecen suavemente a la vista, y los elementos animados por la pantalla como el usuario se desplaza la página. Aunque CSS3 ha suplantado JavaScript en muchos casos para ayudar a accionar estas animaciones ricos de una manera intuitiva, bien optimizado, JavaScript siempre tendrá un papel que desempeñar en escenarios más complejos que involucran la interacción del usuario o de la lógica no lineal. Es debido a esto que el requestAnimationFrame () se introdujo el método, a ayudarnos a ejecutar código JavaScript animación relacionados, que modifican la pantalla del usuario de una manera eficiente, optimizado. Usted ha oído ninguna duda acerca de este método antes, aunque al igual que muchas personas pueden no acabo de entender sus beneficios o cómo usar adecuadamente todavía. En este tutorial vamos a llegar a todos atrapados por lo que finalmente puede empezar a tomar ventaja de requestAnimationFrame () para realizar animaciones de manera más óptima en los scripts. Vamos a rodar!

¿Por qué necesitamos otro héroe- requestAnimationFrame

En primer lugar, vamos a hablar sobre requestAnimationFrame () como una idea y por qué haría falta un procedimiento de este tipo. Tradicionalmente para crear una animación en JavaScript, que se basó en setTimeout () llamada recursiva o setInterval () para ejecutar repetidamente un cierto código para realizar cambios en un marco elemento de marco, como una vez cada 50 milisegundos:

1
2
3
4
5
6
var Adiv = document.getElementById ( 'mydiv' )
var leftpos = 0
setInterval ( función () {
    leftpos + 5 =
    adiv.style.left = leftpos + 'px' // posiciona div por 5 píxeles cada vez
}, 50) // código que se ejecute cada 50 milisegundos

Mientras que el código anterior es lógicamente sonido, su ejecución real está lejos de ser perfecto. El problema con el uso setTmeout / setInterval para ejecutar código que cambia algo en la pantalla es doble.

  • Lo que se especifica como el retraso (es decir: 50 milisegundos) dentro de estas funciones son honrados muchas veces no se debe a los cambios en los recursos del sistema por el usuario en el momento, lo que lleva a intervalos de retardo inconsistentes entre cuadros de animación.

  • Lo que es peor, usando setTimeout () o setInterval () para realizar de forma continua los cambios en la pantalla del usuario a menudo induce “paliza diseño”, la versión del navegador de un paro cardíaco en el que se ve obligado a realizar reflujos innecesarias de la página antes de la pantalla del usuario es físicamente capaz para mostrar los cambios. Esto es malo malo- -muy debido a la naturaleza tributaria de los reflujos de páginas, especialmente en dispositivos móviles donde el problema es más evidente, con cargas de la página janky y la batería se agota. Un iPhone o dos, incluso han empezado a arder como resultado (sólo una broma de Apple, no hay juegos de la ley, por favor)!

 requestAnimationFrame () al rescate

Es por las razones antes requestAnimationFrame () se introdujo. El método en pocas palabras le permite ejecutar código en la siguiente repintado de pantalla disponible, tomando el trabajo de adivinar de conseguir en sincronía con el navegador y el hardware disposición del usuario para realizar cambios en la pantalla. Cuando llamamosrequestAnimationFrame () varias veces para crear una animación, se nos asegura que nuestro código de animación se llama cuando el equipo del usuario es realmente listo para realizar cambios en la pantalla cada vez, lo que resulta en una animación más suave, más eficiente. Por otra parte, el código de llamada a través derequestAnimationFrame () y se ejecuta dentro de las pestañas de fondo en su navegador están detenidos o se desaceleró significativamente (hasta 2 fotogramas por segundo o menos) automáticamente para ahorrar aún más el sistema del usuario recursos- no hay razón para ejecutar una animación que ISN ‘ t ser visto está ahí?

Así requestAnimationFrame () se debe utilizar en lugar de setTimeout / setInterval para las animaciones, pero exactamente cómo hacemos para hacer eso? Antes de llegar a eso, veamos el apoyo del navegador en primer lugar. RequestAnimationFrame () goza hoy de una amplia adopción entre browsers- moderna IE10 +, FF11 +, Chrome y Safari, etc. Para algunas versiones anteriores de estos navegadores, se necesita un prefijo de proveedor frente el nombre del método que funcione. Incluso en los navegadores que no soportan este método en cualquier encarnación, podemos simplemente repliegue en aquellos casos en que setTimeout () en lugar de llamar al código después de un cierto retraso en su lugar. El siguiente código crea un r universales requestAnimationFrame () y su contraparte () cancelAnimationFrame función que trabaja en el máximo número de navegadores, con un repliegue construido en:

1
2
3
4
5
6
7
8
9
window.requestAnimationFrame = window.requestAnimationFrame
    || window.mozRequestAnimationFrame
    || window.webkitRequestAnimationFrame
    || window.msRequestAnimationFrame
    || Función (f) { volver setTimeout (f, 1000-1060)} // simular código de llamada 60
window.cancelAnimationFrame = window.cancelAnimationFrame
    || window.mozCancelAnimationFrame
    || Función (requestID) {clearTimeout (requestID)} // caer de nuevo

Para el repliegue setTimeout () de código, observe el retraso que se ha fijado en 1000-1060, o alrededor de 16,7 milisegundos. Este valor simula la frecuencia con la verdadera requestAnimationFrame () normalmente será llamado por el navegador cada vez que se invoca en base a frecuencia de actualización de la pantalla del usuario típico de 60 fotogramas por segundo.

La comprensión y el uso de requestAnimationFrame ()

La sintaxis para requestAnimationFrame es muy sencillo:

1
requestAnimationFrame (devolución de llamada)

Entramos en una función de devolución de llamada que contiene el código que deseamos ejecutar, y requestAnimationFrame () lo ejecutará cuando la pantalla está lista para aceptar la siguiente pantalla repinte. Algunos detalles destacables:

  • La función de devolución de llamada se transmite automáticamente una marca de tiempo que indica la hora exacta requestAnimationFrame () fue llamado.

  • requestAnimationFrame () devuelve un número entero 0 no que puede ser transmitido a su homólogo némesis cancelAnimationFrame () para cancelar unarequestAnimationFrame () llamada

Aquí está un ejemplo de llamar requestAnimationFrame () una vez para mover un DIV a 5 píxeles de su ubicación original en la pantalla:

1
2
3
4
5
6
var Adiv = document.getElementById ( 'mydiv' )
var leftpos = 0
requestAnimationFrame ( función (fecha y hora) {
    leftpos + 5 =
    adiv.style.left = leftpos + 'px'
})

El código anterior es muy similar al uso setTimeout () para ejecutar el mismo código, pero en lugar de después del retardo definido por el usuario, el código se llama en el siguiente repintado de pantalla disponible, por lo general alrededor de 16,7 milisegundos en base a una tasa de refresco de la pantalla típica de 60fps . El número exacto puede variar y, francamente, no importa; lo que es importante tener en cuenta es que el navegador inteligente ahora invocar nuestro código sólo cuando está listo para aceptar cambios en la pantalla, no antes.

Llamando requestAnimationFrame () una vez que es bastante sentido la mayor parte del tiempo. La magia sucede cuando lo llamamos “recursiva” para construir el marco de la animación deseada por cuadro, y cada fotograma se llama sólo cuando el navegador está preparado para ello. Esto esta forma requestAnimationFrame () se vuelve superior a setTimeout o setInterval cuando se trata de manejar código de animación relacionados con eficiencia. Vamos a reescribir nuestro ejemplo inicial de mover un DIV por la pantalla 5 píxeles a la vez utilizando requestAnimationFrame () :

1
2
3
4
5
6
7
8
var Adiv = document.getElementById ( 'mydiv' )
var leftpos = 0
función movediv (fecha y hora) {
    leftpos + 5 =
    adiv.style.left = leftpos + 'px'
    requestAnimationFrame (movediv) // llamar requestAnimationFrame de nuevo para animar siguiente trama
}
requestAnimationFrame (movediv) // llamar requestAnimationFrame y pasar en ella función de animación

El código anterior muestra el modelo básico para utilizar requestAnimationFrame () para crear una animación, definiendo el código de animación dentro de una función, a continuación, dentro de esta función se hace llamar de forma recursiva a través requestAnimationFrame () para producir cada marco de nuestra animación. Para poner en marcha la animación, hacemos un llamado a requestAnimationFrame () fuera de la función animación con esa función como parámetro.

Animación con el tiempo en requestAnimationFrame ()

Así que es bastante simple para llamar repetidamente una función de animación utilizando requestAnimationFrame () , pero la mayoría de las animaciones son mucho más minuciosa, que tener que parar en algún momento después de un cierto objetivo se ha logrado a través de una cierta cantidad de tiempo. Tome el ejemplo de mover el DIV anterior; en un escenario de la vida real, lo que probablemente queremos hacer es mover el DIV 400 píxeles a la derecha durante un tiempo de, digamos, 2 segundos.Para hacer esto con requestAnimationFrame () , podemos tomar ventaja de la marca de tiempo del parámetro que se pasa a la función de devolución de llamada.Vamos a ver cómo funciona esto ahora, por reorganización nuestra DIV código en movimiento por encima de lo que se mueve el DIV de una cierta distancia a través de una cierta cantidad de tiempo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
18
19
20
21
var Adiv = document.getElementById ( 'mydiv' )
var starttime
función MOVEit (fecha y hora, el, dist, duración) {
    // Si el navegador no soporta requestAnimationFrame, generar nuestra propia marca de tiempo utilizando Fecha:
    var marca de tiempo = marca de tiempo || nueva fecha (). getTime ()
    var ejecución = marca de tiempo - starttime
    var el progreso = tiempo de ejecución / Duración
    progreso = Math.min (progreso, 1)
    el.style.left = (dist * curso) .toFixed (2) + 'px'
    si (tiempo de ejecución <duración) { // si la duración no se cumple todavía
        requestAnimationFrame ( función (fecha y hora) { // llamar requestAnimationFrame de nuevo con parámetros
            MOVEit (fecha y hora, el, dist, duración)
        })
    }
}
requestAnimationFrame ( función (fecha y hora) {
    starttime = marca de tiempo || nueva fecha (). getTime () // si el navegador no soporta requestAnimationFrame, generar nuestra propia marca de tiempo utilizando Fecha
    MOVEit (marca de tiempo, el Adiv, 400, 2000) // 400 píxeles durar 1 segundo
})

Vamos a repasar cómo funciona esto ahora.

  • Justo antes de las carreras de animación, fijamos la variable Startime a la hora actual usando el requestAnimationFrame ‘s marca de tiempo del parámetro, o sirequestAnimationFrame no es compatible, menos precisa una nueva fecha (). GetTime () en su lugar. El primero es un valor que se pasa automáticamente como el primer parámetro de la función de devolución de llamada de requestAnimationFrame que contiene una representación muy exacta de la hora actual en milisegundos (precisión de 5 microsegundos). Esto nos permite saber cuando la animación comenzó a correr.

  • Dentro de la función de animación MOVEit () , capturamos la hora actual del “marco” actual utilizando la variable de marca de tiempo . Utilizamos la diferencia entre eso y la animación starttime de averiguar en qué “punto” a lo largo de la animación en la que estamos actualmente, y cambiar la posición de la DIV consecuencia de la distancia total (es decir: 400px).

La ralentización o la cancelación de requestAnimationFrame ()

La norma requestAnimationFrame funciona a alrededor de 60fps en condiciones ideales (o una vez cada 16.7ms), en sincronía con la frecuencia de actualización del monitor normal. Si la animación requiere un diferentes cuadros por segundo (hasta 60 fps) o, simplemente, no requiere que el alto nivel de la frecuencia de actualización, se puede reducir la velocidad llamando requestAnimationFrame dentro setTimeout () . De esta manera, se obtiene la velocidad de fotogramas deseada mientras cosechando los beneficios de requestAnimationFrame :

1
2
3
4
5
6
7
8
9
10
11
12
var Adiv = document.getElementById ( 'mydiv' )
var leftpos = 0
var fps = 20
función movediv (fecha y hora) {
    setTimeout ( función () { // acelerador requestAnimationFrame a 20fps
        leftpos + 5 =
        adiv.style.left = leftpos + 'px'
        requestAnimationFrame (movediv)
    }, 1000 / fps)
}
requestAnimationFrame (movediv)

En esta versión de mover un DIV horizontal, estamos estrangulando los fotogramas por segundo a aproximadamente 20, llamando requestAnimationFrame dentrosetTimeout () cada vez.

– Cancelación de requestAnimationFrame ()

Al igual que con setTimeout / setInterval , puede cancelar un requestAnimationFrame llamada, y de manera idéntica también. RequestAnimationFrame cuando se le devuelve un 0 entero no que puede ser capturado dentro de una variable y pasó a su némesis contraparte cancelAnimationFrame () para que deje de estar invocado de nuevo. Los siguientes registros de la marca de tiempo el valor del parámetro de requestAnimationFrame durante dos segundos, utilizando cancelAnimationFrame para detener el anterior:

1
2
3
4
5
6
7
8
9
10
11
12
var reqanimationreference
función logtimestamp (fecha y hora) {
    console.log (fecha y hora)
    reqanimationreference = requestAnimationFrame (logtimestamp)
}
requestAnimationFrame (logtimestamp)
setTimeout ( función () { // cancelar requestAnimationFrame después de 2 segundos
    cancelAnimationFrame (reqanimationreference)
}, 2000)

Aquí es un ejemplo un poco más elaborado que cambia continuamente la anchura de un DIV usando requestAnimationFrame cuando el ratón entra en el contenedor principal ( OnMouseEnter ), y lo cancela OnMouseLeave :


 Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts