Share
Lo que vas a crearListo para algunas definiciones? Mecánica se define como un área relacionada con el comportamiento de los objetos sometidos a fuerzas o desplazamientos, y los efectos posteriores de esos objetos en su entorno. UNA línea de tiempo es una forma de mostrar una lista de eventos en orden cronológico, a veces descrito como un artefacto del proyecto. Vamos a unir las dos áreas para aprender cómo controlar y configurar nuestras animaciones como si realmente supiéramos lo que estamos haciendo..
Más definiciones que vienen: el término sintaxis Se refiere directamente a las reglas y principios que rigen la estructura. Como comentamos en nuestro tutorial anterior, la sintaxis de JavaScript para configurar una animación TimelineMax es la siguiente:
var config = ; var tmax_tl = new TimelineMax (config);
Aquí he definido una nueva línea de tiempo usando el TimelineMax () constructor y pasó el configuración objeto como argumento. Este argumento, si lo recuerda, es lo que se conoce como un "objeto literal" que contiene valor clave emparejamientos relacionados con nuestros ajustes de configuración. los TimelineMax () constructor es lo que se utiliza para crear una instancia de una nueva instancia de TimelineMax.
Tenga en cuenta que cuando se acostumbre a la sintaxis, las siguientes líneas son las mismas; lo que significa que ambos son idénticos (la última línea está diseñada para su comodidad).
tmax_tl.add (TweenLite.to (elemento, 1, izquierda: 100, opacidad: 0.5)); tmax_tl.to (elemento, 1, izquierda: 100, opacidad: 0.5);
Si eres como yo, es poco probable que recuerdes todos los parámetros aceptados para las opciones de configuración de TimelineMax. Afortunadamente, se puede encontrar una lista completa de las opciones de configuración y propiedades aquí como referencia..
Aparte de la configuración real, nuestra línea de tiempo también tiene propiedades disponibles. Por ejemplo, si escribo lo siguiente:
var config = repetir: -1, retardo: 1, repetir Retrasar: 0; var tmax_tl = new TimelineMax (config); console.log (tmax_tl.vars);
La consola registraría todo configuración variable (representada por tmax_tl.vars) como un objeto y me permite inspeccionar cada clave / valor que se ha establecido. Hay una lista completa de propiedades disponibles para su línea de tiempo en las que puede profundizar aquí para una mayor exploración..
Solo por diversión, inténtelo y luego inspeccione el resultado de su consola DevTools:
console.log (tmax_tl.timeline);
Debería ver una salida similar a la siguiente captura de pantalla:
Intente informar esta próxima propiedad en la consola y observe cómo su mente se desorienta (la consola debe informar un valor numérico):
console.log (tl.timeline._timeScale);
El verdadero secreto para construir secuencias de animación sorprendentes con una sincronización precisa es comprender el parámetro de posición. Este parámetro súper flexible controla la colocación de interpolaciones, etiquetas, devoluciones de llamada, pausas e incluso líneas de tiempo anidadas, por lo que podrá colocar cualquier cosa, en cualquier lugar y en cualquier secuencia.!
Por ejemplo, si nos fijamos en el siguiente código, verá que el parámetro de posición es el último argumento para el a() método.
tmax_tl.to (objetivo, duración, vars, posición)
Aquí hay un ejemplo de cómo se ve todo eso. Preste mucha atención a los comentarios que explican cómo el argumento de posición alinea la secuencia. También estamos colocando métodos uno tras otro: lo que se conoce como encadenamiento.
tmax_tl.to (elemento, 1, x: 200) .to (elemento, 1, y: 200, '+ = 1') // 1 segundo después del final de la anterior a () interpolación .to (elemento, 1, rotación: 360, '- = 0.5') // 0.5 segundos antes del final de la anterior a () tween .to (elemento, 1, escala: 4, 6); // Exactamente 6 segundos desde el inicio de la línea de tiempo
Puede pensar en el argumento de posición como una forma de controlar la ubicación de una interpolación en la línea de tiempo (de forma predeterminada, es el final de la línea de tiempo y se representa como '+ = 0'). Use un número para indicar un tiempo absoluto en términos de segundos. Los prefijos como '+ =' o '- =' Ayuda a compensar el punto de inserción en relación con el fin de la línea de tiempo. Por ejemplo, '+ = 2' Colocaría a la tween dos segundos después del final, dejando un espacio de dos segundos..
Cuando hayas terminado, twittea el enlace de CodePen a @greensock para que puedan hacerte sentir muy especial.
Puede pensar en las etiquetas como una forma de insertar marcadores en su animación para poder hacer referencia a puntos exactos más adelante en la secuencia. Este podría ser un punto donde #objetoX mueve 100px desde la parte superior y luego #objeto tiene una interacción superpuesta 0,5 segundos en el #objetoX secuencia.
Cuando use etiquetas, asegúrese de usar un valor de cadena para especificar dónde se debe colocar una interpolación e incluya el argumento de tiempo de posición para controlar el punto de ejecución.
Accentsconagua
// las interpolaciones se insertan en y relativas a la posición de una etiqueta var tmax_tl = new TimelineMax (); tmax_tl.to ('# green', 1, x: 750) // Agregar la etiqueta de blueGreenSpin 1 segundo después del final de la secuencia verde ... agregar ('blueGreenSpin', '+ = 1') .to ('# blue' , 2, x: 750, rotación: 360, 'blueGreenSpin') // Agregar interpolación en la etiqueta de blueGreenSpin .to ('# orange', 2, x: 750, rotación: 360, 'blueGreenSpin + = 0.5') ; // Insertar la interpolación 0,5 segundos después de la etiqueta blueGreenSpin Nota: La mayoría de los métodos llevan cero como valor predeterminado para el argumento de posición ('+ = 0').
Si define una etiqueta que aún no existe, se agregará automáticamente al final de la línea de tiempo antes de insertar la interpolación, lo que puede ser bastante conveniente..
Métodos son lo que ayudan a llevar a cabo el propósito de nuestra (s) acción (es) deseada (s), o en otras palabras, la acción que nos gustaría que ocurra para cada secuencia en nuestra línea de tiempo.
Solo por el bien de la ciencia, escribamos un método que tome un solo objeto con una identificación de #objetoA y haz que se mueva hacia el lado derecho de la pantalla. Así es como se vería usando el método to ():
/ * .to (target: [Object || Array], duración: Number, vars: Object, position: *) * / tmax_tl.to ($ ('# objectA'), 1, left: '100px') ; Lo importante a tener en cuenta basado en el código anterior es el hecho de que también necesitaremos la ayuda de CSS (posición: absoluta) para llevar a cabo nuestra solicitud (mover el objeto). Recuerde que los elementos en el sitio web tienen una posición estática, lo que significa que si desea mover un objeto utilizando el enfoque anterior, deberá asegurarse de que las propiedades CSS correspondientes estén en su lugar, de lo contrario no ocurrirá nada.
Ya es hora de que tengas algo más para diseccionar, ¿no crees??
La siguiente demo usa el a() método para controlar cada círculo de un cargador (se podría usar un enfoque más simple, pero hay un punto en esta locura). Trate de hacer que los círculos externos y el círculo medio se tambaleen en su movimiento usando el argumento de sincronización de posición. El objetivo del ejercicio es comprender visualmente cómo el parámetro de posición permite la superposición de sus interpolaciones durante la secuencia. Como puede ver en el siguiente .gif, la interpolación de cada círculo se produce exactamente al mismo tiempo. Prueba y dale un poco de sabor a esta animación superponiendo la secuencia como viste en el gif animado utilizado para la introducción de esta publicación. Buena suerte, déjanos saber cómo te va!
// El último argumento es el tiempo de posición. // Use este argumento para escalonar la visibilidad de los círculos circundantes tmax_tl.to ($ ('svg> circle: nth-of-type (1)'), 1, tween_options_to, 0) .to ($ ('svg> circle: nth-of-type (2) '), 1, tween_options_to, 0) .to ($ (' svg> circle: nth-of-type (3) '), 1, tween_options_to, 0) .to ($ (' svg> circle: nth-of-type (4) '), 1, tween_options_to, 0) .to ($ (' svg> circle: nth-of-type (5) '), 1, tween_options_to, 0) .to ($ ('svg> circle: nth-of-type (6)'), 1, tween_options_to, 0) .to ($ ('svg> circle: nth-of-type (7)'), 1, tween_options_to, 0) 
Mira la pluma, bifurca y juega con el tiempo. Como siempre, si desea avanzar en este viaje de animación, no dude en dirigirse a la documentación de GreenSock, especialmente en TweenLite y TweenMax. ¡Manténgase atento a la próxima entrega de esta serie que cubre el maravilloso mundo de la interpolación! Espero verte pronto!
