Share
En el primer tutorial de la serie Anime.js, aprendiste sobre diferentes formas de especificar los elementos de destino que deseas animar y los tipos de propiedades CSS y atributos DOM que se pueden animar. Las animaciones en el tutorial anterior eran muy básicas. Todos los elementos de destino se movían una cierta distancia o cambiaban el radio del borde a una velocidad fija.
A veces, es posible que necesite animar los elementos de destino de una manera más rítmica. Por ejemplo, puede tener diez elementos diferentes que desee mover de izquierda a derecha con un retraso de 500 ms entre el inicio de la animación para cada elemento. Del mismo modo, es posible que desee aumentar o disminuir la duración de la animación para cada elemento en función de su posición.
En este tutorial, aprenderá cómo usar Anime.js para cronometrar adecuadamente la animación de diferentes elementos usando parámetros específicos. Esto le permitirá controlar el orden en el que se reproduce una secuencia de animación para elementos individuales o todos los elementos.
Estos parámetros le permiten controlar la duración, el retraso y la relajación de propiedades individuales o un grupo de propiedades a la vez. los duración y retrasar Los parámetros se especifican en milisegundos. El valor predeterminado para la duración es 1000ms o 1s..
Esto significa que, a menos que se especifique lo contrario, cualquier animación aplicada a un elemento se reproducirá durante 1 segundo. los retrasar el parámetro especifica la cantidad de tiempo que tarda la animación en comenzar una vez que ya lo ha activado. El valor predeterminado para el retraso es 0. Esto significa que las animaciones comenzarán tan pronto como se activen..
Puedes usar el facilitando parámetro para controlar la velocidad a la que se reproduce una animación mientras dura su duración. Algunas animaciones comienzan lentamente, aceleran el ritmo en el medio y luego disminuyen la velocidad al final. Otros comienzan a buen ritmo y luego disminuyen la velocidad por el resto del tiempo..
Sin embargo, en todos los casos, la animación siempre se completa dentro del tiempo especificado usando el duración parámetro. Anime.js proporciona muchas funciones de aceleración que puedes aplicar a tus elementos directamente usando solo sus nombres. Para algunas funciones de aceleración, también puede establecer un valor para el elasticidad parámetro para controlar cuánto rebota el valor de un elemento como un resorte.
Aprenderás más sobre las diferentes funciones de aceleración en el tutorial final de la serie. El siguiente fragmento de código muestra cómo aplicar todos estos parámetros a diferentes animaciones.
var slowAnimation = anime (objetivos: '.square', translateY: 250, borderRadius: 50, duración: 4000); var delayAnimation = anime (objetivos: '.square', translateY: 250, borderRadius: 50, delay: 800); var cubicAnimation = anime (objetivos: '.square', translateY: 250, borderRadius: 50, duración: 1200, suavizado: 'easeInOutCubic');
Como puede ver, estos parámetros se pueden utilizar independientemente de otros parámetros o en combinación con ellos. los animación cúbica tiene tanto el duración y facilitando parámetro aplicado a él. Si no se hubiera especificado la duración, la animación se habría ejecutado durante 1 segundo. Ahora, se ejecutará durante 1,200 milisegundos o 1,2 segundos..
Una limitación importante de los parámetros de propiedad en el ejemplo anterior fue que todas las animaciones del elemento de destino tendrán la misma duración, retrasar y facilitando valores.
Este puede o no ser el comportamiento deseado. Por ejemplo, en lugar de traducir y cambiar el radio del borde del elemento de destino al mismo tiempo, es posible que desee traducir primero el elemento de destino y luego animar su radio de borde. Anime.js te permite especificar diferentes valores para el duración, retrasar, facilitando y elasticidad Parámetros para propiedades individuales. El siguiente código y demo deben aclararlo..
var indiParam = anime (target: '.square', translateY: value: 250, rotate: value: '2.125turn', backgroundColor: value: 'rgb (255,0,0)', duration: 400, retraso: 1500, suavizado: 'lineal', duración: 1500);
En el código anterior, todas las propiedades que queremos animar tienen valores diferentes. La animación de color de fondo tiene una duración de 400 ms, mientras que las animaciones de rotación y traducción utilizan el valor de duración global de 1500 ms..
La animación del color de fondo también tiene un retraso, por lo que cualquier cambio en el color solo comienza después de que hayan transcurrido 1500 ms. los girar y traducirY propiedades utilizan el valor predeterminado para el retrasar y facilitando parámetros porque no hemos proporcionado un valor local ni global para ellos.
Los parámetros basados en propiedades son útiles cuando desea cambiar el orden y la duración de la animación de propiedades individuales. Sin embargo, la misma duración y retrasar Se seguirá aplicando para propiedades individuales en todos los elementos de destino. Los parámetros basados en funciones le permiten especificar por separado duración, retrasar, elasticidad y facilitando para diferentes elementos de destino de una manera compacta.
En este caso, establece los valores de diferentes parámetros utilizando funciones en lugar de números. Estas funciones aceptan tres parámetros: objetivo, índice, y targetCount. los objetivo El parámetro almacena la referencia al elemento objetivo actual. los índice El parámetro almacena el índice o la posición del elemento objetivo actual. los targetCount parámetro almacena el número total de elementos de destino.
los objetivo El parámetro es útil cuando los valores de animación deben establecerse en función de algunos atributos del elemento de destino. Por ejemplo, puede almacenar el retrasar, duración o facilitando valores para un elemento de destino en atributos de datos y luego acceder a ellos más tarde.
De forma similar, puede acceder al color de fondo de un elemento objetivo y luego manipularlo para establecer un valor de color único final para elementos individuales. De esta manera, podría animar todos los elementos para que tengan un color de fondo que sea 20% más oscuro que su color actual..
los índice parámetro le da la posición del objetivo actual en nuestra lista de elementos de destino. Puede usarlo para cambiar gradualmente el valor de parámetros como duración y retrasar por diferentes elementos.
Esto generalmente es útil cuando desea establecer los valores en orden ascendente. También puedes restar el índice desde el targetCount para establecer los valores en orden descendente. El siguiente fragmento de código utiliza estos dos parámetros para especificar los valores en orden ascendente y descendente.
var delaySequence = anime (objetivos: '.square', translateY: 250, delay: function (target, index) índice de retorno * 200;); var delaySequenceR = anime (target: '.square', translateY: 250, delay: function (target, index, targetCount) return (targetCount - index) * 200;);
El siguiente código establece una diferente facilitando valor para cada elemento de destino utilizando el índice parámetro.
var easeInValues = ['easeInQuad', 'easeInCubic', 'easeInQuart', 'easeInQuint', 'easeInSine', 'easeInExpo', 'easeInCirc', 'easeInBack', 'easeInElastic']; var easeInSequence = anime (target: '.square', translateY: 250, duration: 2000, easing: function (target, index) return easeInValues [index];, autoplay: false);
Este último conjunto de parámetros le permite especificar el número de veces que se debe reproducir una animación y la dirección en la que se debe reproducir. Puede especificar el número de veces que se debe reproducir una animación utilizando el lazo parámetro. También hay un auto-reproducción parámetro que se puede configurar para cierto o falso. Su valor predeterminado es cierto, pero puede detener el inicio de las animaciones por sí mismo configurándolo falso.
los dirección parámetro controla la dirección en la que se reproduce la animación. Puede tener tres valores: normal, marcha atrás, y alterno. El valor predeterminado es normal, que mantiene la animación reproduciéndose normalmente desde los valores iniciales hasta los valores finales. Una vez que los elementos de destino alcanzan el valor final, si el lazo el valor es mayor que 1, los elementos de destino saltan bruscamente hacia los valores iniciales y luego comienzan la animación nuevamente.
Cuando el dirección se establece en marcha atrás y el lazo el valor es mayor que 1, la animación se invierte. En otras palabras, los elementos de destino inician la animación desde su estado final y van hacia atrás para alcanzar el estado inicial. Una vez que están en el estado inicial, los elementos saltan al estado final y luego vuelven a iniciar la animación inversa. los alterno el valor de la dirección cambia la dirección de la animación después de cada bucle.
var normalLoop = anime (objetivos: '.square', translateY: 250, delay: function (target, index) índice de retorno * 200;, loop: 4, suavizado: 'easeInSine', autoplay: false);
En la siguiente demostración, he establecido el número de bucles en cuatro para que pueda notar fácilmente la diferencia en la animación de los elementos en diferentes modos.
En este tutorial, aprendiste sobre los diferentes tipos de parámetros que se pueden usar para controlar la animación de los elementos de destino en Anime.js. Los parámetros de propiedad se utilizan para controlar la animación de propiedades individuales..
Puede usarlos para controlar la secuencia en la que se reproduce la animación para elementos individuales. Los parámetros de la función le permiten controlar el tiempo y la velocidad de la animación para elementos individuales con respecto a todo el grupo. Los parámetros de animación le permiten controlar cómo se reproduce la animación para diferentes elementos.
Si tiene alguna pregunta relacionada con este tutorial, hágamelo saber en los comentarios..
Accentsconagua