Share
Los complementos para GSAP son excelentes cuando necesitas capacidades avanzadas. El BezierPlugin que explicaré en este tutorial ayuda a animar virtualmente cualquier propiedad (o propiedades) a lo largo de un camino curvo de Bezier definido como una matriz de puntos / valores. Antes de saltar, deberíamos tomarnos un momento para aprender qué es una curva de bezier y de dónde proviene..
De vuelta durante esos tiempos primitivos del dibujo a mano, los diseñadores gráficos estaban extremadamente familiarizados con las herramientas llamadas "curvas francesas". Estas piezas de formas extrañas (típicamente de plástico fino) ayudaron a guiar a los diseñadores en la creación de curvas elegantes, como lo vemos hoy en día con la pluma. herramienta en Illustrator.
Herramienta de mano primitiva llamada la curva francesa utilizada por muchos diseñadores gráficos y tipógrafos (src: Wikipedia)
A estos complicados caminos los llamamos “Curvas de Bézier”. En el mundo digital se expresan como una serie de puntos, calculados matemáticamente para doblar las líneas en formas elegantes y ornamentales. Más específicamente, una curva de Bézier se utiliza para modelar curvas suaves utilizando una serie de puntos trazados que están conectados entre sí por una ruta.
Las curvas de Bézier como las vemos digitalmente. Ejemplo anterior tomado de la herramienta de lápiz de Illustrator: la guía completa
Las curvas de Bézier fueron ampliamente publicitadas en 1962 por el ingeniero francés Pierre Bézier, quien utilizó estos caminos ornamentados para diseñar carrocerías de automóviles en Renault. Sin embargo, el estudio inicial de la Curva de Bézier fue desarrollado por primera vez en 1959 por el matemático Paul de Casteljau utilizando el algoritmo de Casteljau, un método numéricamente estable para evaluar las curvas de Bézier, en Citroën. Los ilustradores de vectores le deben mucho a la industria automotriz.!
Para los increíblemente curiosos, aquí hay una gran explicación de Curvas de Bézier llamadas Curvas de Bézier cúbicas: Bajo el capó, explicando con mayor detalle cómo la curva nace conceptualmente en términos de principios matemáticos y visuales..
Convertirse en uno con el Bézier es un gran Jedi, pero solo un verdadero Bézier Jedi comprende los distintos tipos y sabores de las curvas de Bézier. Las curvas más comunes son típicamente Cuadrático y Cúbico Como verás en la mayoría de los casos de uso..
Antes de volver a sumergirnos en GSAP, es importante que tenga en cuenta que estoy utilizando TweenMax por las razones que se analizaron anteriormente. El BezierPlugin ya está empaquetado para nosotros!
Como les mostré al comienzo de nuestro GreenSock Journey, creamos una instancia de una línea de tiempo para que podamos dar a esta animación un escenario para presentarse, además de una manera de controlar cada secuencia..
Suponiendo que tengamos la configuración de la línea de tiempo y la mecánica ordenada, podemos examinar cómo escribir y usar BezierPlugin. Tenga en cuenta que nuestros valores para las rutas Bézier son solo una serie de coordenadas x e y, conocidas como Sistema de coordenadas cartesianas. Al crear, los desarrolladores deben asegurarse de que cada objeto de la matriz tenga nombres de propiedades coincidentes.
var bezier_path = [x: valor, y: valor, x: valor, y: valor]; tl.staggerTo (elemento, duración, bezier: type: 'thru', valores: bezier_path, curviness: 1, facilidad: Power1.easeInOut, stagger_value);
Imaginemos que hemos apuntado a un círculo SVG, pasando el selector donde se ve. elemento, luego configurando el duración también. Dando X y y valores y un curvatura de 1 resultará en la animación de nuestro círculo SVG en una ruta circular como la siguiente:
Examine la fuente para obtener detalles más completos de lo que hace que funcione.
Ya que a través de es el Bézier predeterminado tipo, Realmente no necesitas definir un tipo en absoluto. Incrementando y ajustando valores como curvinas Puede crear algunos caminos realmente interesantes para que las animaciones viajen. Usando el círculo que vimos arriba, me he tomado la libertad de agregar algunos círculos SVG más y ajustar el valor de curvatura (12 para ser exactos).
He aquí un resumen de los tipos de Bézier verious aceptados. Si planea usar el curvatura propiedad (que le permite ajustar la tensión en el Bézier) debe asegurarse de utilizar el a través de tipo.
Accentsconagua
a través de (predeterminado): el complemento descubre cómo dibujar el Bézier de forma natural a través de los valores proporcionados utilizando un algoritmo de GreenSock patentado.suave: Los valores proporcionados en la matriz actúan casi como imanes que atraen la curva hacia ellos, pero el Bézier no suele viajar a través de ellos..cuadrático: Defina los datos estándar de Bezier cuadrático (los Beziers cuadráticos tienen un punto de control entre cada ancla).cúbico: Le permite definir datos estándar de Bézier cúbico (los Béziers cúbicos tienen dos puntos de control entre cada ancla).thruBasic: Esto es lo mismo que a través de excepto que utiliza un algoritmo menos complejo para el trazado inicial de Bezier a través de los valores proporcionados.BezierPlugin también permite a los desarrolladores animar otras propiedades además de las coordenadas x e y. ¡Puedes animar otras propiedades como transformaciones, opacidad y mucho más! No es terriblemente común hacerlo, pero es completamente posible. Propiedades como rotación, escala e incluso ejemplos personalizados también!
Por ejemplo, podríamos animar el opacidad junto con x e y cuando estoy a punto de demostrarlo (tenga en cuenta que cada objeto de la matriz debe tener la propiedad de opacidad para coincidir).
var bezier = [x: 0, y: 0, opacidad: 0, x: 0, y: 42, opacidad: 0, x: 42, y: 42, opacidad: 1, x: 42 , y: 0, opacidad: 1, x: 0, y: 0, opacidad: 0];
Veamos algunas características más, para cuando te sientas seguro.
Esta función gira automáticamente el objetivo de acuerdo con su posición en la ruta Bézier.
Si lujoso Es por lo que te esfuerzas, entonces sé súper elegante y anime un objeto en una ruta Bézier como Jan Paepke demuestra para su proyecto ScrollMagic. Defina los puntos de la curva y proporciónelos en su definición de interpolación para animar a lo largo de una curva definida.
Mantente al tanto de mi próxima aventura en esta serie TimelineMax donde te sumerjo en otro complemento GSAP llamado Draggable. Con las líneas de tiempo potenciadas por arrastre, experimentaremos para crear un menú deslizable donde se pueda arrastrar para abrir y para cerrar. Hasta pronto profesionales de la animación.!
