Share
En el tutorial anterior de la serie Anime.js, aprendiste sobre diferentes tipos de parámetros que controlan cómo deben animarse los diferentes elementos objetivo. También aprendió a usar los parámetros de la función para cambiar gradualmente el retraso o la duración de los elementos.
En este tutorial iremos un paso más allá y aprenderemos cómo especificar los valores de las propiedades utilizando números regulares, valores basados en funciones y fotogramas clave. También aprenderá a reproducir animaciones en secuencia utilizando líneas de tiempo..
Anime.js le permite especificar los valores finales o finales para las propiedades animables de los elementos de destino. El valor inicial o de inicio de la animación es el valor predeterminado de esa propiedad. Cualquier valor especificado en el CSS también puede actuar como el valor de inicio. Hay múltiples formas de especificar un valor final.
También puede ser un número sin unidad. En este caso, las unidades originales o predeterminadas de la propiedad se utilizan al calcular cualquier valor de propiedad. También puede especificar el valor como una cadena, pero la cadena debe contener al menos un valor numérico. Ejemplos de valores de cadena serían 10vh, 80%, y 9.125 vuelta.
En lugar de especificar un valor absoluto, también puede especificar valores de propiedad en relación con su valor actual. Por ejemplo, puede establecer la final traducirY valor para ser 150px mayor que el valor actual usando += 150px como un valor. Tenga en cuenta que solo puede usar la suma, la multiplicación y la resta mientras especifica valores relativos.
Mientras anima colores, no puede usar nombres de colores como rojo, negro y azul para establecer un valor de color final para la animación. En tales casos, la animación en color no ocurrirá en absoluto, y el cambio será instantáneo. La única forma de animar colores es especificar los valores como dígitos hexadecimales o en términos de valores RGB y HSL..
Como habrá notado, no hemos estado especificando un valor inicial para que nuestros elementos de destino los animen. Anime.js determina automáticamente el valor inicial basado en nuestro CSS y los valores predeterminados de esas propiedades. Sin embargo, puede especificar un valor inicial distinto del valor predeterminado para una propiedad utilizando matrices. El primer elemento de la matriz representa el valor inicial y el segundo elemento representa el valor final.
En lugar de utilizar el mismo valor final para todos los elementos de destino, puede usar funciones para establecer diferentes valores para diferentes parámetros. El proceso es similar a la especificación de parámetros de propiedad basados en funciones.
var uniqueTranslation = anime (objetivos: '.square', translateY: function (el, i) return 50 * (i + 1);, autoplay: false); var randomScaling = anime (objetivos: '.square', scale: function (el, i) return Math.random () * 1.5 + i / 10;, autoplay: false); var randomRotation = anime (objetivos: '.square', rotate: function () return anime.random (-180, 180);, autoplay: false); var randomRadius = anime (objetivos: '.square', borderRadius: function (el) return 20 + Math.random () * el.offsetWidth / 4;, autoplay: false); var randomAll = anime (target: '.square', translateY: function (el, i) return 50 + 50 * i;, scale: function (el, i) return Math.random () * 1.5 + i / 10;, rotate: function () return anime.random (-180, 180);, borderRadius: function (el) return Math.random () * el.offsetWidth / 2;, duration: function ( ) return anime.random (1500, 2400);, delay: function () return anime.random (0, 1000);, autoplay: false);
Para el traducirY propiedad, estamos utilizando el índice del elemento para establecer un valor de traducción. Utilizando 50 * (i + 1) aumenta la traducirY Valor para cada elemento por 50 píxeles..
La animación de escalado también utiliza el índice del elemento junto con la función integrada. Math.random () función para devolver un número pseudoaleatorio de punto flotante menor que 1. De esta manera, los elementos se escalan aleatoriamente, pero I 10 parte de la propiedad aumenta ligeramente la posibilidad de que los elementos que aparecen al final tengan un tamaño mayor.
Dentro del código de animación de rotación, estamos utilizando el anime.random (a, b) función auxiliar para obtener enteros aleatorios entre -180 y 180. Esta función es útil para asignar valores integrales aleatorios a propiedades como traducirY y girar. El uso de esta función para asignar valores de escala aleatorios producirá resultados extremos.
El valor del radio del borde para diferentes elementos se determina calculando el ancho de los elementos de destino utilizando el el parámetro de función. Finalmente, la última parte del código asigna valores aleatorios a la duración y retrasar parámetros también.
Puedes ver que la animación lograda por la última parte es muy aleatoria. No hay relación entre los valores de diferentes propiedades de los elementos o sus valores de retraso y duración. En la vida real, es más sensato usar valores que pueden agregar cierto sentido de dirección a la animación.
También es posible animar diferentes propiedades de los elementos de destino mediante fotogramas clave. Cada fotograma clave consiste en una matriz del objeto de propiedad. Puedes usar el objeto para especificar el valor de la propiedad, duración, retrasar y facilitando Para esa parte de la animación. El siguiente código crea una animación de traducción basada en fotogramas clave..
var keyframeTranslation = anime (objetivos: '.square', translateY: [valor: 100, duración: 500, valor: 300, duración: 1000, retraso: 1000, valor: 40, duración: 500, retraso : 1000], reproducción automática: falso); var keyframeAll = anime (objetivos: '.square', translateY: [valor: 100, duración: 500, valor: 300, duración: 1000, retraso: 1000, valor: 40, duración: 500, retraso : 1000], escala: [valor: 1.1, duración: 500, valor: 0.5, duración: 1000, retardo: 1000, valor: 1, duración: 500, retardo: 1000], rotar: [ valor: 60, duración: 500, valor: -60, duración: 1000, retraso: 1000, valor: 75, duración: 500, retraso: 1000], borderRadius: [valor: 10, duración: 500, valor: 50, duración: 1000, retardo: 1000, valor: 25, duración: 500, retardo: 1000], retardo: función (el, i) return 100 * (i + 1) , reproducción automática: false);
También puede animar varias propiedades a la vez especificando valores diferentes o iguales para todos los parámetros. En el segundo caso, el global. retrasar El parámetro aplica un retraso inicial a todos los elementos en función de su índice. Este retraso es independiente del retraso aplicado a cada propiedad dentro de los fotogramas clave.
Hasta ahora en la serie, hemos estado usando el retrasar Parámetro para reproducir diferentes animaciones en una secuencia específica. Para usar el retardo para este propósito, también necesitamos saber la duración de la animación anterior.
Con la complejidad creciente de la secuencia de animación, mantener el valor correcto de retardo se vuelve muy tedioso. Cualquier cambio en la duración de una de las animaciones nos obligará a recalcular todos los valores de retardo para mantener las animaciones en la secuencia original..
Una solución mejor para este problema es usar líneas de tiempo para controlar la secuencia de animación. Tienes que usar el anime.timeline () Función para crear una línea de tiempo en Anime.js. También puede pasar diferentes parámetros a esta función como un objeto. Estos parámetros pueden especificar la dirección en la que se reproduce la línea de tiempo, los bucles de números y una auto-reproducción parámetro para determinar si la animación debe ser reproducida automáticamente. Todos estos parámetros han sido discutidos en detalle en el tutorial de parámetros de esta serie..
Puede agregar diferentes animaciones a una línea de tiempo usando el añadir() método. Todas las animaciones agregadas a la línea de tiempo se reproducirán en el orden en que se agregaron. Es posible especificar valores de compensación absolutos o relativos para controlar el orden en que se reproducen las animaciones..
Cuando se utilizan valores de compensación relativos, el tiempo de inicio de la animación actual se determina en relación con el tiempo de la animación anterior. Las compensaciones relativas pueden ser de tres tipos:
El siguiente código muestra cómo crear una línea de tiempo básica y una línea de tiempo con valores de desplazamiento relativos.
var basicTimeline = anime.timeline (direction: "alternate", loop: 2, autoplay: false); basicTimeline.add (objetivos: '.square', traducir Y: 200). agregar (objetivos: '.red', traducir Y: 100). agregar (objetivos: '.blue', traducir Y: 0); var offsetTimeline = anime.timeline (direction: "alternate", loop: 2, autoplay: false); offsetTimeline.add (objetivos: '.square', traducir Y: 200). agregar (objetivos: '.red', desplazamiento: '+ = 1000', traducir Y: 100). agregar (objetivos: '.blue ', offset:' * = 2 ', translateY: 0);
Intenta hacer clic en el Línea de tiempo compensada Botón en la demo anterior. Verás que hay un retraso de 2 segundos entre el final de la animación de cuadrados rojos y el comienzo de la animación de cuadrados azules..
No hemos especificado un duración Para la animación del cuadrado rojo. Por lo tanto, un valor predeterminado de 1000ms o 1s se utiliza como duración. El desplazamiento del multiplicador de la animación del cuadrado azul duplica ese valor, y esto resulta en un retraso de dos segundos en la animación..
Cuando se utilizan valores de compensación absolutos, el tiempo de inicio de la línea de tiempo se utiliza como punto de referencia. Es posible revertir la secuencia en la que se reproducen las animaciones utilizando valores de desplazamiento grandes para las animaciones que se producen al principio de la línea de tiempo.
Anime.js tiene una variedad de opciones para reproducir, pausar, reiniciar o buscar animaciones o líneas de tiempo en cualquier punto dado.
los jugar() La función nos permite iniciar la animación desde su progreso actual. los pausa() La función congelará la animación en el momento en que se llamó la función. los reiniciar() La función inicia la animación desde el principio, independientemente de su progreso actual. los buscar (valor) La función puede ser utilizada para avanzar la animación por valor número de milisegundos.
Debes tener en cuenta que jugar() La función solo reanuda la animación desde el momento en que se pausó. Si la animación ya ha llegado a su fin, no puede volver a reproducirla usando jugar(). Para reproducir la animación, deberás usar el reiniciar() función.
Accentsconagua
var slowAnimation = anime (objetivos: '.square', translateY: 250, borderRadius: 50, duración: 4000, suavizado: 'linear', reproducción automática: false); document.querySelector ('. play'). onclick = slowAnimation.play; document.querySelector ('. pause'). onclick = slowAnimation.pause; document.querySelector ('. restart'). onclick = slowAnimation.restart; var seekInput = document.querySelector ('. seek'); seekInput.oninput = function () slowAnimation.seek (slowAnimation.duration * (seekInput.value / 100)); ;Tenga en cuenta que no estamos usando seekInput.value para establecer un valor para la función de búsqueda. Esto se debe a que el valor máximo para el rango de entrada se ha establecido en 100 en el marcado. El uso directo del valor para el rango de entrada nos permitirá buscar solo hasta 100 ms. Al multiplicar el valor de entrada de rango con la duración de la animación, nos aseguramos de que podamos buscar la animación desde el principio hasta el final en nuestro control deslizante de rango..
En este tutorial, aprendió cómo animar diferentes valores de propiedad como números, funciones o fotogramas clave. También aprendiste a controlar y manipular líneas de tiempo en Anime.js para controlar el orden en el que se reproduce una secuencia de animación.
Si está buscando recursos adicionales para estudiar o usar en su trabajo, vea lo que tenemos disponible en el mercado de Envato.
Si tiene alguna pregunta relacionada con este tutorial, hágamelo saber en los comentarios..
