Share
¿Qué es TimelineMax? ¿Qué lo hace diferente de otras bibliotecas de la Plataforma de animación GreenSock (GSAP)? ¿Por qué necesitaría TimelineMax sobre TimelineLite? ¿Cómo puedo entender los parámetros para TimelineMax? Si se encuentra haciendo alguna de estas preguntas, entonces ha venido al lugar correcto..
Bienvenido a la cartilla de una serie de Tuts + sobre TimelineMax de GreenSock. Prepárese para una serie explosiva y alucinante para ayudarlo a convertirse en un profesional de la animación..
TimelineMax es una herramienta de secuenciación de JavaScript que actúa como un contenedor para interpolaciones y otras líneas de tiempo, lo que facilita el control de ellas en conjunto y la gestión precisa de la sincronización. TimelineMax proporciona métodos para permitir el acceso a múltiples aspectos de su animación. También puede ajustar dinámicamente la velocidad de una línea de tiempo en tiempo de ejecución, y mucho, mucho más.
Nota: interpolación es una abreviatura de entre medio creando marcos entre estados enuna secuencia de animación.
TimelineMax extiende TimelineLite, ofreciendo exactamente la misma funcionalidad junto con características adicionales (pero no esenciales) como:
Accentsconagua
repetirretardo de repeticiónyoyócurrentLabel ()tweenTo ()tweenFromTo ()getLabelAfter ()getLabelBefore ()getActive () TimelineMax le permite, como autor, el poder de hacer que las interpolaciones se superpongan en la línea de tiempo tanto como lo desee. Como profesional de la animación, usted tiene control completo sobre dónde se ubican las preadolescentes en la línea de tiempo. La mayoría de las otras herramientas de animación pueden ejecutar principalmente un básico uno después del otro secuenciación, pero no puede permitir que las interpolaciones se superpongan. ¿Imagina que agregas una interpolación que mueve un objeto y quieres que empiece a desaparecer 0,5 segundos antes de que termine esa interpolación? Con TimelineMax es mucho más limpio y extremadamente robusto para hacer que todo eso suceda.
Para mayor comodidad, los complementos principales como CSSPlugin (para proporcionar prefijos de proveedores de CSS), RoundPropsPlugin, DirectionalRotationPlugin, AttrPlugin y BezierPlugin están todos incluidos con TweenMax y TimelineMax. Dado que TweenMax le proporcionará TimelineMax y todos los otros elementos que se mencionaron anteriormente, GreenSock recomienda usar TweenMax para la mayoría de los casos de uso. Cargar TweenMax es más conveniente ya que un archivo contiene prácticamente todo lo que necesita.
Para comenzar, necesitará obtener el script TweenMax y cargarlo en su documento HTML anterior a su script de animación personalizado. Suerte para nosotros CDNJS tiene una copia disponible para nosotros (también hay una en GitHub).
TimelineMax permite opciones de configuración personalizadas mediante el uso de un objeto literal. Vamos a explorar cómo se ve eso..
TimelineMax (vars: )
La parte que ves usando el llaves es el objeto literal que mantendrá nuestra configuración. Esto significa que podemos insertar valor clave emparejamientos dentro de esas llaves para definir cómo se comportará nuestra línea de tiempo. Toda la linea TimelineMax (vars: ) es lo que se menciona en los documentos de TimelineMax como el "Constructor".
Aquí está la configuración completa de TimelineMax con cada clave dado su valor predeterminado. Coloque este derecho en la parte superior de su archivo de animación de JavaScript (que en nuestro ejemplo anterior llamamos "my-timelinemax-animation.js"). Aquí solo enumeramos la configuración completa para que pueda ver la variedad de opciones de configuración que ofrece TimelineMax. Normalmente, su objeto de configuración solo contendrá las propiedades necesarias para los ajustes. Puede leer más sobre estas opciones en la documentación de TimelineMax..
var tmax_options = retraso: 0, pausado: falso, onComplete: function () console.log ('la animación está completa'); , onCompleteScope: , tweens: [], stagger: 0, align: 'normal', useFrames: false, onStart: function () console.log ('on start called'); , onStartScope: , onUpdate: function () console.log ('en la actualización llamada'); , onUpdateScope: , onRepeat: function () console.log ('on repeat repeat'); , onRepeatScope: , onReverseComplete: function () console.log ('en reversa completa'); , onReverseCompleteScope: , autoRemoveChildren: false, smoothChildTiming: false, repetición: 0, repeatDelay: 0, yoyo: false, onCompleteParams: [], onUppateçasepe.jpg ]; Ahora que tiene la configuración en su lugar y entiende sus opciones, puede pasar su configuración literal de objeto personalizado a la TimelineMax () constructor, así que agregue lo siguiente al final de su archivo:
var tmax_tl = new TimelineMax (tmax_options);
Los preadolescentes se crean utilizando métodos como a(), desde() y escalonar de () Sólo para nombrar unos pocos. Como vimos anteriormente, tomamos nuestro objeto de opciones y lo pasamos como un argumento al constructor TimelineMax. Ahora tendremos que mover algunos objetos para mojarnos los pies. Para simplificar, movamos dos círculos desde la izquierda y la parte superior de la ventana gráfica:
Comprobar el JS pestaña en el ejemplo anterior para ver cómo se logra el efecto. Como se señaló anteriormente, configuré el constructor TimelineMax para la escena anterior y pasé el literal del objeto que contiene las opciones de la línea de tiempo:
var tl = new TimelineMax (tmax_options)
Cada círculo contiene una carné de identidad para que yo haga referencia a ellos por:
var tl = new TimelineMax (tmax_options), circle_top = $ ('# circle-top'), circle_bottom = $ ('# # circle-bottom'); y luego el a() Se utiliza el método para controlar la interpolación..
tl.to (circle_top, 1, left: 100) .to (circle_bottom, 1, top: 100);
Dentro a() efectivamente estamos diciendo que "use el elemento que se pasa como el primer argumento y muévalo desde la izquierda 100px. Luego usa el a() Método encadenado después de nuestro primer a() método para hacer lo mismo, pero mover ese elemento desde la parte superior de 100px ".
Tenga en cuenta que el círculo que se mueve desde la parte superior se activa una vez que el círculo que se mueve desde la izquierda tiene terminado su movimiento (tween). Aprenderemos en los próximos tutoriales cómo controlar elementos en diferentes momentos y acelerar a lo largo de la línea de tiempo utilizando el posición parámetro.
Si desea avanzar en este viaje de animación, no dude en dirigirse a la documentación de inicio de GreenSock. Manténgase atento a lo siguiente en la serie de esta aventura de animación donde cubro cosas como etiquetas, compensaciones, pausas, argumentos y cómo ajustar las opciones a once. Hasta la proxima vez!
