Share
En este tutorial aprenderemos cómo controlar animaciones, a pedido, utilizando un método llamado addPause (). Listo? ¿Set? ... ligera pausa ... vamos!
los addPause () método es un método de control que permite a los desarrolladores colocar un pausa En cualquier lugar en su línea de tiempo. Es mucho más preciso que usar una función de devolución de llamada que detiene otra función (algo que era necesario antes de addPause () existente).
Este método de control también puede insertar una devolución de llamada especial que detiene la reproducción de la línea de tiempo en una marca de tiempo o etiqueta en particular. Al hacerlo, se asegura de que si el cabezal virtual se mueve un poco más allá de la posición de pausa, volverá al lugar preciso.
La sintaxis de addPause es sencillo Así como escribimos otros métodos como .a(), la .addPause () El método se escribe de manera similar y acepta argumentos que pueden pasarse entre paréntesis. Si no está familiarizado con los métodos, diríjase a mi otro artículo centrado en GreenSock que explora los mecanismos de GSAP y esperaré su devolución..
timeline.addPause (2);
Agregar el código anterior pausará su animación exactamente en la marca de 2 segundos de la línea de tiempo. Si no está seguro de qué es una línea de tiempo y cómo crear una instancia, debería leer un artículo anterior que escribí al principio con TimelineMax.
También puede insertar una pausa en relación con las etiquetas. Si ha estado leyendo, recordará que hablamos sobre las etiquetas en el artículo de mecánica.
Accentsconagua
timeline.addPause ("yourLabel");Ahora, cuando su línea de tiempo encuentre la etiqueta "yourLabel", se insertará una pausa en "yourLabel".
Este ejemplo insertará una pausa 3 segundos después de "yourLabel" y, cuando se produzca esa pausa, una llamada a su función tendrá lugar.
timeline.addPause ("yourLabel + = 3", yourFunction);Si desea insertar una pausa exactamente a 4 segundos, llame al su función, pásale dos parámetros, param1 y param2 y finalmente vincular el alcance actual a la devolución de llamada, puede hacerlo así:
timeline.addPause (4, yourFunction, ["param1", "param2"], this);
Aquí hay algunos ejemplos divertidos para mojarse los pies insertando pausas en una línea de tiempo. El desafío para usted es tomar cada enfoque que mencioné anteriormente e intentar implementarlos usted mismo..
Para comenzar, aquí hay un gran ejemplo, basado en una demostración de Carl Schoof, que explica un enfoque lineal y una representación perfecta del uso típico con el addPause () método de control.
Un uso típico de addPause () Es dividir una experiencia lineal en múltiples secciones:
Cada vez que golpeas el siguiente botón de la línea de tiempo será jugar() hasta que llegue a la siguiente addPause () punto.
Aquí hay una demostración que hice llamada "Emisor de burbujas" para experimentar más con las inserciones de pausa en su tiempo libre. Pinchalo!
En la línea 90 del panel de JavaScript, busque esta línea comentada:
createBubbles (tub) .addPause (0.25);
Descomenta esto e interactúa con la demo para ver el addPause El método tiene lugar durante la reproducción de la animación.. Insinuación: la animación hará una pausa de 0.25 segundos en la secuencia de animación.
También dejé algunos comentarios en esta demostración (gracias a la ayuda de Jack Doyle) explicando cómo hacer que este efecto sea aún más eficaz.!
Esta demostración SVG por Chris Gannon es un ejemplo asombroso que muestra el complemento DrawSVG y es excelente para explorar addPause. También puedes usar addPause Para descubrir cada uno de los movimientos que emplea Chris para que el efecto cobre vida..
Intente agregar este fragmento a la línea 26 del panel de JavaScript de la demostración.
.addPause ()
Como mencioné anteriormente, la demostración de Chris usa el plugin drawSVG que vimos en un artículo anterior. Para aquellos que no están familiarizados, DrawSVG es un complemento particularmente útil para ayudar a animar los trazos de un SVG y le recomiendo que lo explore más cuando tenga tiempo..
Simplemente porque las cosas de Chris son tan buenas, ¿qué tal si agregamos algunas pausas a otra de sus demostraciones? Este es perfecto:
Si bifurcas esta demostración, borra todo el JavaScript que Chris ha escrito, verás todo el SVG y cómo usó el complemento DrawSVG para crear esta secuencia..
Este es el gráfico de SVGPara comenzar nuestro experimento, agregue el siguiente fragmento de código a la línea 60 del panel de JavaScript de la demostración de CodePen:
tl.addPause (1.15);
¿Notaste que la animación se detenía a 1.15 segundos en el movimiento? Muy bien eh?
Ahora para el siguiente truco. Reemplace las líneas 44-47 con lo siguiente, para agregar una etiqueta a la línea de tiempo:
.a (arcos, 2, drawSVG: '0% -5%', facilidad: Linear.easeNone). add ('archesLabel')Con el código anterior en su lugar, agregue el siguiente fragmento alrededor de la línea 60 para finalizar nuestro experimento. Vea la pausa de la animación exactamente en la "archesLabel" que definimos antes.
tl.addPause ('archesLabel')Habiendo cubierto el método addPause () y jugado con él en una serie de demostraciones, es hora de ver si puede aplicarlo. Aprender a hacer un simple botón para alternar reproducir / pausar para controlar cualquier animación GSAP (interpolaciones o líneas de tiempo) puede ser bastante útil, especialmente cuando estás tratando de aprender una técnica / enfoque particular.
En el video a continuación, Carl Schoff recorre los aspectos básicos y explica cómo hacer que el botón de alternar en la demostración.
¡En nuestra próxima aventura GreenSock aprenderemos de qué se trata la interpolación bezier! Investigaremos qué es una ruta Bézier y veremos algunos ejemplos de demostraciones que muestran cómo animar a lo largo de una ruta Bézier. Hasta la próxima animación feliz.!
