Share
Después de completar los tres primeros tutoriales de la serie, ahora debería sentirse muy cómodo con muchas características de Anime.js. El primer tutorial le mostró cómo seleccionar elementos de destino. En el segundo tutorial, aprendió acerca de los diferentes tipos de parámetros que se pueden usar para tener un control preciso sobre el retraso y la duración de las animaciones de diferentes elementos. El tercer tutorial se centró en aprender cómo tener un mayor control sobre los valores de una sola propiedad durante el curso de la animación..
En este tutorial, aprenderá sobre diferentes devoluciones de llamada que se pueden utilizar para ejecutar una función basada en el progreso de la animación. Casi todos los ejemplos de los tutoriales anteriores utilizaron propiedades CSS para demostrar cómo funcionan los diferentes métodos y parámetros. Esto podría haberle dado la idea de que la biblioteca es más adecuada para animar las propiedades CSS. Esta vez, tendremos una sección dedicada a la creación de animaciones interesantes relacionadas con SVG en Anime.js.
Como mencioné en la introducción, puede usar las devoluciones de llamada para ejecutar funciones basadas en el progreso de la animación. Hay cuatro callbacks diferentes: empezar, correr, actualizar, y completar. Cada función de devolución de llamada se activa en un momento específico, y cada una acepta un objeto de animación como argumento..
los empezar() La función se llama cuando la animación realmente comienza. Esto significa que si una animación tiene un retraso de 800ms., empezar() se llamará solo después de que el retraso haya terminado. Puede comprobar si una animación ha comenzado a reproducirse o no se está utilizando. animaciónName.begin, que volverá cierto o falso respectivamente.
los correr La devolución de llamada se puede usar para ejecutar una función en cada fotograma después de que una animación realmente comienza a reproducirse. Si desea ejecutar una función en cada fotograma desde el principio de la animación, independientemente de su retrasar, debes usar el actualizar devolución de llamada en su lugar.
los completar la devolución de llamada es similar a empezar excepto por el hecho de que se llama una vez que la animación ha terminado de reproducirse. Al igual que empezar, puedes usar animaciónName.complete para comprobar si una animación ha terminado de reproducirse o no.
Ya has visto en el primer tutorial cómo usar el actualizar devolución de llamada mientras se animan los valores numéricos de un objeto JavaScript. En este tutorial, modificaremos ese ejemplo y veremos cómo usar todas estas devoluciones de llamadas para proporcionar más información al usuario..
Accentsconagua
var filesScanned = count: 0, infectado: 0; var scanCount = document.querySelector (". scan-count"); var infected = document.querySelector (". infected-count"); var scan = anime (target: filesScanned, autoplay: false, count: 100, infectado: 8, delay: 1000, duration: 2000, suavizado: "linear", round: 1, update: function (anim) if (anim .tiempo actual < 1000) document.querySelector(".update-cb").innerHTML = "Creating an Index… "; , begin: function() document.querySelector(".begin-cb").innerHTML = "Starting the Scan… "; , run: function() scanCount.innerHTML = filesScanned.count; infected.innerHTML = filesScanned.infected; , complete: function() document.querySelector(".complete-cb").innerHTML = "Scan Complete… "; );Intencionalmente he agregado algún retraso en esta animación para que podamos notar la diferencia en el tiempo de ejecución de diferentes devoluciones de llamada. los actualizar La devolución de llamada comienza a ejecutar su función tan pronto como comienza la instancia de animación..
La animación real comienza a reproducirse después de 1000 ms, y ahí es cuando empezar La función muestra su mensaje "Iniciando el escaneo ..." al usuario. los correr La función también comienza a ejecutarse al mismo tiempo y actualiza los valores numéricos del objeto después de cada fotograma. Una vez finalizada la animación, el completar La devolución de llamada muestra un mensaje de "Exploración completa ..." al usuario.
Las funciones de simplificación se pueden usar para controlar cómo el valor de una propiedad pasa de su valor inicial a su valor final. Estas funciones de aceleración se pueden especificar utilizando el parámetro de aceleración, que puede aceptar cadenas y coordenadas de curva de Bézier personalizadas (en forma de una matriz).
Hay 31 diferentes funciones de aceleración incorporadas. Uno de ellos es lineal, y los otros 30 consisten en diez variaciones diferentes de facilidad en, Facilitarse, y EasyInOut. Hay tres ecuaciones de flexibilización elásticas llamadas easeInElastic, easeOutElastic, y easeInOutElastic. Puedes controlar su elasticidad utilizando el elasticidad parámetro. El valor de elasticidad Puede estar en cualquier lugar entre 0 y 1000.
Facilidad en Las ecuaciones aceleran el cambio de valor de la propiedad comenzando desde cero. Esto significa que el cambio en el valor sería lento al principio y muy rápido al final. La tasa de cambio es cero al principio y máxima al final.. Facilitarse las ecuaciones desaceleran el cambio de valor de la propiedad a partir del cambio de tasa máxima.
Esto significa que el cambio en el valor sería muy rápido al principio y muy lento al final. EaseInOut Las ecuaciones aceleran el cambio de velocidad al principio y lo desaceleran al final. Esto significa que la velocidad de cambio será lenta tanto al principio como al final, y será más rápida en la mitad de la animación. La siguiente demostración muestra la diferencia en la tasa de cambio para cada una de estas funciones de aceleración..
También puede agregar sus propias funciones de aceleración personalizadas a la lista integrada con la ayuda de anime.easings. Aquí hay un ejemplo de cómo crear funciones personalizadas de aceleración..
anime.easings ['tanCube'] = function (t) return Math.pow (Math.tan (t * Math.PI / 4), 3); anime.easings ['tanSqr'] = function (t) return Math.pow (Math.tan (t * Math.PI / 4), 2); var tanCubeSequence = anime (objetivos: '.tan-cube', translateX: '75vw', duración: 2000, suavizado: 'tanCube', autoplay: false); var tanSqrSequence = anime (objetivos: '.tan-sqr', translateX: '75vw', duración: 2000, suavizado: 'tanSqr', autoplay: false);
Todas las animaciones relacionadas con el movimiento que hemos creado hasta ahora movieron los elementos de destino en líneas rectas. También es posible en Anime.js mover un elemento a lo largo de una ruta SVG compleja con muchas curvas. Puede controlar tanto la posición como el ángulo de los elementos de animación en la ruta. Para mover un elemento a la coordenada x de la ruta, puede usar camino (x). De manera similar, un elemento se puede mover de acuerdo con la coordenada y de la ruta usando camino (y).
A menos que la trayectoria sea una línea recta, casi siempre formará un ángulo con respecto a la línea de base horizontal. Si está rotando cualquier elemento no circular, se sentirá más natural si el elemento sigue el ángulo de la trayectoria. Puedes hacerlo configurando girar propiedad para ser igual a camino ('ángulo'). Aquí está el código que anima cuatro elementos con diferentes valores de suavizado a lo largo de una ruta SVG.
var ruta = anime.path ('ruta'); var easings = ['linear', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic']; var motionPath = anime (target: '.square', translateX: path ('x'), translateY: path ('y'), rotate: path ('angle'), easing: function (el, i) return servidumbre [i];, duración: 10000, bucle: verdadero);Puedes ver en la siguiente demostración que el cuadrado rojo con easeInCubic la relajación es más lenta al principio y la más rápida al final. Del mismo modo, el cuadrado naranja con easeOutCubic Es el más rápido al principio y el más lento al final..
También puede animar la transformación de diferentes formas SVG entre sí utilizando Anime.js. La única condición es que ambas formas deben tener el mismo número de puntos. Esto significa que solo puedes transformar triángulos en otros triángulos y cuadriláteros en otros cuadriláteros. Tratar de transformarse entre un número desigual de puntos poligonales resultará en un cambio de forma abrupto. Aquí hay un ejemplo de transformar una forma triangular..
var morphing = anime (objetivos: 'polígono', puntos: [valor: '143 31 21 196 286 223', valor: '243 31 21 196 286 223', valor: '243 31 121 196 286 223 ', valor:' 243 31 121 196 386 223 ', valor:' 543 31 121 196 386 223 '], suavizado:' linear ', duración: 4000, dirección:' alternate ', loop: true );
Otro efecto interesante que puede crear con SVG es el dibujo de líneas. Todo lo que tienes que hacer es darle a Anime.js la ruta que deseas utilizar para el dibujo de líneas y otros parámetros que controlan su duración, demora o mejora. En la siguiente demostración, he usado el completar Devolución de llamada para rellenar el dibujo lineal del icono de ancla Font Awesome con un color amarillo.
var lineDrawing = anime (target: 'path', strokeDashoffset: [anime.setDashoffset, 0], suavizado: 'easeInOutCubic', duración: 4000, complete: function (anim) document.querySelector ('path'). setAttribute ( "relleno", "amarillo"););Combinando el conocimiento de todos los conceptos que ha aprendido hasta ahora, puede crear dibujos lineales más complejos con mucho mejor control sobre la forma en que se dibujan. Aquí hay un ejemplo en el que he escrito mi propio nombre usando SVG.
var letterTime = 2000; var lineDrawing = anime (target: "path", strokeDashoffset: [anime.setDashoffset, 0], alivio: "easeInOutCubic", duración: letterTime, delay: function (el, i) return letterTime * i;, comienza: function (anim) var letters = document.querySelectorAll ("path"), i; para (i = 0; i < letters.length; ++i) letters[i].setAttribute("stroke", "black"); letters[i].setAttribute("fill", "none"); , update: function(anim) if (anim.currentTime >= letterTime) document.querySelector (". letter-m"). setAttribute ("fill", "# e91e63"); if (anim.currentTime> = 2 * letterTime) document.querySelector (". letter-o"). setAttribute ("fill", "# 3F51B5"); if (anim.currentTime> = 3 * letterTime) document.querySelector (". letter-n"). setAttribute ("fill", "# 8BC34A"); if (anim.currentTime> = 4 * letterTime) document.querySelector (". letter-t"). setAttribute ("fill", "# FF5722"); if (anim.currentTime> = 5 * letterTime) document.querySelector (". letter-y"). setAttribute ("fill", "# 795548"); , reproducción automática: falso); Comienzo por asignar el valor 2000 a la variable tiempo de letra. Este es el tiempo que quiero que Anime.js tome mientras dibuja cada letra de mi nombre. los retrasar La propiedad utiliza el parámetro de índice basado en la función para establecer un valor apropiado. retrasar valor con la ayuda de la tiempo de letra variable.
El índice de la primera letra "M" es cero, por lo que Anime.js comienza a dibujarlo inmediatamente. La letra "O" tiene un retraso de 2000 ms porque es la cantidad de tiempo que se tarda en dibujar completamente la letra "M"..
Dentro de empezar devolución de llamada, he establecido el carrera valor de todas las letras para negro y ellos llenar valores a ninguna. De esta manera podemos borrar todos los valores de color aplicados dentro de la actualizar devolución de llamada para que las letras puedan volver a su estado inicial cuando se ejecutan en varios bucles. Intenta hacer clic en el Escribe el nombre Botón en la siguiente demo para ver el código en acción..
En este tutorial, aprendió sobre las diferentes funciones de devolución de llamada que se pueden usar para realizar tareas como actualizar el DOM o cambiar el valor de un atributo según el progreso de la animación. También aprendió sobre las diferentes funciones de aceleración y cómo crear una propia. La sección final del tutorial se centró en la creación de animaciones basadas en SVG..
Después de completar los cuatro tutoriales de la serie, deberías tener suficiente conocimiento de Anime.js para crear algunos efectos interesantes para tu próximo proyecto. Si tiene alguna pregunta relacionada con este tutorial, hágamelo saber en los comentarios..
