Share
Lo que vas a crearEn los viejos tiempos de la animación. interpolación fue un término que se usa para describir una secuencia fotograma a fotograma, o lo que a veces se denomina "entre los dos". Es ese lugar donde un solo movimiento conduce al siguiente para crear un movimiento fluido. Para aquellos que tienen canas puedes recordar Flash; una aplicación que utiliza este término cuando se refiere a los movimientos de marco. Echemos un vistazo profundo a algunos ejemplos y demos a esta cosa de tweening un buen intento en la universidad..
Para los dos ejemplos de este tutorial, cargaré TweenMax.min.js, que nos dará acceso a TimelineMax y todas las otras herramientas principales sorprendentes que GSAP tiene para ofrecer. Si vuelve a recordar nuestro manual de TimelineMax, comenté cómo cargar TweenMax.min.js porque es más conveniente, además, este archivo contiene casi todo lo que necesitaremos (también lo que GreenSock recomienda 99% del tiempo).
TweenMax extiende TweenLite, agregando muchas características útiles (pero no esenciales) como repetir(), retardo de repetición(), yoyó(), actualización para(), y más. TweenMax fue creado para su comodidad, proporcionando un único archivo JavaScript que contiene todo lo que comúnmente necesitará para animar elementos DOM. Básicamente, permite a los autores especificar movimientos individuales, mientras que TimelineMax aceptará métodos encadenados para crear un conjunto más complejo de interpolaciones / secuencias..
Los cargadores son los objetos dados a los usuarios cuando esperan que se cargue un proceso. Nos dan el poder de explorar pequeños elementos de tamaño micro que pueden tener interacciones complejas o incluso simplistas, además de que son increíbles de hacer.
Eche un vistazo rápido a esta demostración de "Cadena de perlas":
Vamos a desglosar la secuencia para una mejor comprensión de cómo funciona todo esto "tweening".
Para crear esta secuencia se requerirá el uso del método staggerTo. Si no recuerdas qué es un método, entonces te animo a que te detengas en este momento y leas mi tutorial sobre mecánica..
Según la documentación de GreenSock, la escalonar () método:
“Ajusta una matriz de objetivos a un conjunto común de valores de destino.
En nuestro caso, esos objetivos múltiples serán cada uno de los círculos dentro de todo el SVG..
Accentsconagua
escalonar aceptará el selector que estamos usando para los círculos (en este caso círculos).Esto daría lugar a lo siguiente; asumiendo círculos contiene tres objetos ...
timeline.staggerTo (círculos, 15, x: 0, 0.2) // el círculo 1 comienza en el momento 0 // el círculo 2 comienza en el tiempo 0.2 // el círculo 3 comienza en el tiempo 0.4
Para comenzar correctamente, tendremos que definir una nueva línea de tiempo y algunos ajustes para nuestra configuración..
var loader = new TimelineMax (repetir: -1, yoyo: verdadero), círculos = $ ('svg circle'), stagger_options = opacidad: 0, y: -800, facilidad: Elastic.easeInOut;Para hacer que esta línea de tiempo se repita en la dirección inversa, estoy usando el yoyó clave y establecer su valor en cierto. Una vez más, esto hará que nuestra secuencia se reproduzca en la dirección opuesta una vez que la animación alcance su fotograma final. Activar la animación requerirá apuntar a cada círculo dentro del SVG y exactamente por qué necesitaremos una referencia usando el poder de jQuery.
Hay una serie de formas indicadas por los documentos para pasar a los selectores (siéntase libre de leer más sobre esto aquí). Para este ejemplo, seleccionaré todos los círculos a la vez usando la sintaxis típica de jQuery. También es un poco más rápido almacenar nuestra referencia en una variable para reutilizarla más tarde, por lo tanto círculos = $ ('svg circle').
los stagger_options variable es un objeto literal que contiene las propiedades para dar vida a esta animación. Movemos nuestros objetos utilizando el y clave porque el GSAP CSSPlugin convierte inteligentemente transformar valores a matriz equivalentes y en última instancia, acelera las cosas para nosotros. Hay una lista completa de propiedades de mano corta de transformación que son muy superiores y mucho más fáciles de usar en comparación con las transformaciones típicas de CSS:
| CSS | GSAP |
|---|---|
traducirX () | X |
traducirY () | y |
traducirZ () | z |
girar() | rotación |
rotarY () | rotaciónY |
rotateX () | rotaciónX |
escalaX () | escalaX |
escalaY () | escalable |
skewX () | skewX |
skewY () | sesgado |
También podemos controlar la relajación (la sensación de la animación) y pasar en varios tipos de movimiento. Para los amantes de lo visual, puede ver el visualizador de facilidad de GreenSock para obtener una mejor comprensión de la gran cantidad de posibilidades disponibles..
La pieza final de esta creación es adjuntar el escalonar Método a nuestra línea de tiempo e insertando las variables definidas anteriormente y en el orden correcto para este método en particular (elementos, duración, opciones, cantidad escalonada).
loader.staggerTo (círculos, 0.875, stagger_options, 0.025);
Si desea crear otra secuencia una vez que se complete la secuencia escalonada, podría encadenar otro método, como de a al igual que:
loader.staggerTo (círculos, 0.875, stagger_options, 0.025) .fromTo (target: Objeto, duración: Número, fromVars: , toVars: );
Intentémoslo con un SVG al que llamo "Polyman". Recientemente escribí un artículo para CSS-Tricks sobre la animación de polígonos y decidí usar ese ejemplo similar para otro ejercicio de interpolación aquí. Intentemos usar el staggerFromTo () Método y ver qué tipo de magia podemos evocar.
La siguiente salida de SVG (el XML) se abrevia un poco por el bien de la discusión, pero como verá, nuestro SVG incluye algunas etiquetas; específicamente
Para la configuración inicial de la línea de tiempo, definiremos nuestras opciones globales utilizando un objeto literal que retrasará la animación inicial, repetirá la secuencia, retrasará la repetición de la animación y finalmente la reproducirá en reversa.
var tmax_options = retraso: 0.25, repetición: -1, repeatDelay: 0.25, yoyo: true;
La siguiente es una propiedad bastante nueva y no documentada que obliga a los valores de transformación a colocarse en el atributo de transformación SVG (a diferencia de un estilo CSS).
CSSPlugin.useSVGTransformAttr = true;
Esta propiedad se agregó con el fin de facilitar las cosas a los desarrolladores para evitar un error en Safari donde se combinan opacidad y transforma (como transformar: escala () por ejemplo) produciría un resultado impar. A partir de 1.16.0 useSVGTransformAttr se establece en cierto Orientado de forma automática y específica a nuestro amigo Safari, por lo que ya no es necesario que los autores definan como lo he hecho anteriormente..
Desde el escalonar método acepta argumentos separados para desde y a posiciones que me gusta configurar tanto literales de objetos fuera del método para fines de organización y legibilidad.
var stagger_opts_from = opacity: 0, scale: 0, transformOrigin: 'center center'; var stagger_opts_to = opacidad: 1, escala: 1, facilidad: Elastic.easeInOut, force3D: true;
Definimos dos literales de objetos porque necesitamos todos nuestros desde y a Propiedades definidas para que esta animación haga su trabajo. Si no queda claro vamos a partir de los valores definidos en nuestra stagger_opts_from y terminando con los valores establecidos dentro stagger_opts_to.
los force3D key obliga a GSAP a aplicar un valor 3D a la transformación del elemento; sentido matrix3d () en lugar de matriz(), o translate3d () en lugar de traducir(). Por lo general, esto hace que el navegador coloque el elemento objetivo en su propia capa de composición, lo que permite actualizaciones más eficientes con animaciones..
Por defecto force3D se establece en auto (a partir de 1.15.0), por lo que en realidad no hay necesidad de usarlo (a menos que desee específicamente el comportamiento de cierto en lugar de auto para esa jovencita).
// Capa los objetivos al inicio de la interpolación y // los mantiene de esa manera utilizando una matriz 3D donde corresponda // (para transformaciones 2d y 3d). force3D: true // coloca en capas los objetivos al comienzo de la interpolación y // también los desacapa (cambiando de nuevo a una matriz 2D o transformadas //) al final de la interpolación también. Esto evita que // cree y se cuelgue en cientos de elementos en capas // (que pueden degradar el rendimiento) y también se asegura de que // los textos que se hayan rasterizado durante la interpolación vuelvan a // ser nítidos. force3D: auto
Puede configurar el global force3D valor para todas las interpolaciones utilizando el defaultForce3D Propiedad proporcionada por CSSPlugin:
// también acepta 'false' o 'auto' CSSPlugin.defaultForce3D = true;
O podría establecer esto en una base por tween en su lugar:
// mantendrá el elemento en capas después de que la interpolación se complete timeline.to (elemento, 1, x: 300, force3D: true); // mantendrá el elemento en capas después de que la interpolación haya finalizado timeline.to (elemento, 1, x: 300, force3D: false);
Si su animación intenta anular las propiedades de CSS, debe asegurarse de que su especificidad particular no coincida con lo que se declara en su JavaScript; de lo contrario, los valores CSS nativos tendrán prioridad y su animación no reaccionará como se esperaba..
/ * Estilos Polyman requeridos * / .polyman ruta opacidad: 0;
El CSS anterior ocultará a Polyman en la carga inicial de la ventana, por lo que inicialmente no vemos a nuestro compañero barbudo como usted experimentaría con lo que comúnmente se conoce como FOUT (Flash Of Unstyled Text).
Ya que la mayoría de nuestra configuración está definida, finalmente podemos comenzar a configurar nuestra línea de tiempo, apuntando a las rutas SVG, definiendo un valor escalonado (stagger_val) Y finalizando definiendo cuánto durará toda la animación (duración).
var tl = new TimelineMax (tmax_options), path = $ ('svg.polyman path'), stagger_val = 0.0125, duration = 1.25;Así, y con la delicada ola de nuestra varita mágica y un poco de polvo de unicornio, pasamos todas las variables necesarias que se definieron como argumentos en el escalonar método!
tl.staggerFromTo (ruta, duración, stagger_opts_from, stagger_opts_to, stagger_val, 0);
¡Viola! En una línea simple, el Polyman comienza a respirar y se convierte en un verdadero ser viviente (bueno, no realmente). Muy bien eh?
En el siguiente tutorial de nuestra serie TweenMax veremos cómo crear un punto de pausa en la línea de tiempo, por lo que la animación se detiene automáticamente cuando alcanza el punto deseado. El método addPause () es relativamente nuevo y le permite colocar una pausa en cualquier lugar de la línea de tiempo. Es mucho más preciso que usar una devolución de llamada que llama a una función para pausar la función (que es lo que tenía que hacer antes de addPause () existente). Hasta la próxima vez feliz tweening.!
Un agradecimiento especial a los lectores que siguieron en este viaje GreenSock!
