Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. TimelineMax
Webdesign

TimelineMax: come ottenere un appiglio sulle Curve di Bézier

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called The Beginner’s Guide to TimelineMax.
TimelineMax: Controlling Playback With addPause()
Building a Draggable Off-Canvas Menu with GreenSock

Italian (Italiano) translation by Cristiano Verondini (you can also view the original English article)

La possibilità di utilizzare plugin per la libreria GSAP è una grossa opportunità quando si ha la necessità di implementare operazioni avanzate. In questo tutorial spiegherò come il plugin BezierPlugin aiuti ad animare praticamente ogni proprietà (o insieme di proprietà) lungo una curva di Bézier definita come un array di punti o valori. Prima di cominciare è necessario però capire che cosa sia e da dove venga una curva di Bézier.

Curve di Bézier

Quando ancora i disegni si facevano senza l'ausilio di computer i designer grafici utilizzavano uno strumento allora molto comune chiamato “Curvilineo” (French Curves). Questi strumenti dalla forma strana, tipicamente costruiti in plastica, aiutavano il grafico nella creazione di eleganti curve un po' come oggi avviene utilizzando lo strumento penna in Illustrator.

file

Strumenti di disegno "primitivi", chiamati Curvilinei, usati in passato dalla maggior parte dei designer grafici e tipografi (vedi Wikipedia)

Questi sono complicati tracciati che noi chiamiamo "Curve di Bézier". Nel mondo digitale questi tracciati sono espressi come una serie di punti calcolati attraverso formule matematiche in modo da piegare delle semplici linee e trasformarle in eleganti forme. In maniera più specifica, una Curva di Bézier viene usata per modellare curve che abbiano piegature morbide mediante una serie di punti che in questo modo vengono collegati fra di loro con un tracciato.

file

Una Curva di Bézier come appare in un applicativo per il disegno digitale. Questo esempio è stato preso da Illustrator’s Pen Tool: The Comprehensive Guide

Le Curve di Bézier furono largamente pubblicizzate nel 1962 dall'ingegnere francese Pierre Bézier che le usò per disegnare le carrozzerie delle automobili alla Renault. Lo studio su queste curve iniziò però nel 1959 ad opera del matematico Paul de Casteljau attraverso l'uso dell'algoritmo che prese il suo nome (algoritmo di de Casteljau) mentre lavorava alla Citroën. Questo algoritmo è un metodo numericamente stabile per calcolare le Curve di Bézier.  L'illustrazione vettoriale deve quindi moltissimo all'industria automobilistica!

Per quelli più curiosi è possibile trovare un'approfondita descrizione delle curve di Bézier in Cubic Bézier Curves - Under the Hood (Le curve cubiche di Bézier - un'analisi approfondita). Questo articolo spiega in modo dettagliato i principi matematici e visuali secondo i quali queste curve sono nate.

Tipi di Curve di Bézier

Diventare tutt'uno con Bézier può renderti un grande Jedi ma solamente un vero Jedi è in grado di capire i diversi tipi di Curve di Bézier che esistono. Le curve più comuni sono solitamente quelle Quadratiche e quelle Cubiche come sarà possibile vedere nella maggior parte dei casi d'uso.

  • Curve di Bézier Lineari: sono linee rette definite da due punti.
  • Curve di Bézier Quadratiche: sono curve definite da tre punti.
  • Curve di Bézier Cubiche: sono curve definite da quattro punti anche se il numero di punti, nel caso di questo tipo di curve, è irrilevante. È possibile infatti usare cinque, sei o anche sette punti!

Interpolazione usando Curve di Bézier in GSAP

Prima di entrare nel dettaglio dell'uso di GSAP è importante sottolineare come nel seguito verrà fatto uso di TweenMax per una serie di ragioni già spiegate in precedenza. Fortunatamente quind il plugin BezierPlugin è già incluso.

Curvilineo

Come ho già mostrato all'inizio del viaggio di GreenSock è necessario dapprima istanziare un oggetto timeline in modo da fornire all'animazione una scena nella quale possa essere rappresentata. Sarà inoltre necessario creare un modo per controllare ogni sequenza.

Supponendo quindi di avere impostato correttamente la timeline vediamo come sia possibile usare il plugin BezierPlugin. Teniamo presente che i valori per il tracciato di Bézier sono semplicemente una serie di coordinate x e y del piano cartesiano. Nella fase di scrittura del codice lo sviluppatore deve assicurarsi che ogni oggetto dell'array abbia nomi delle proprietà corrispondenti.

Supponiamo che element sia un puntatore ad un oggetto SVG che rappresenta un piccolo cerchio. Impostiamo inoltre un valore per duration. Fornendo i valori di x ed y e impostando la proprietà curviness ad 1 quello che otterremo sarà l'animazione del cerchio SVG lungo un tracciato circolare.

Per meglio capire il funzionamento è sufficiente esaminare il codice sorgente.

Siccome il valore di default per la proprietà type è thru in questo caso non è necessario definire il tipo della Curva di Bézier. Aumentando e regolando i valori delle proprietà curviness è possibile creare differenti ed interessanti tracciati per le animazioni. Ad esempio, utilizzando lo stesso cerchio dell'esempio precedente, aggiungendolo più volte e impostando il valore curviness a 12 si ottiene questo effetto:

Tipi di Curva di Bézier

Di seguito un elenco dei valori che è possibile impostare come tipo di curva. Nel caso in cui si desideri usare la proprietà curviness (che permette di variare la tensione della Curva di Bézier) sarà necessario usare, come tipo della curva stessa, il valore thru.

  • thru (default): il plugin determina in modo automatico come disegnare la Curva di Bézier in base ai valori forniti attraverso l'uso di un algoritmo proprietario di GreenSock
  • soft: i valori forniti nell'array agiscono come se fossero delle calamite che attraggono la curva verso di loro anche se la curva non vi passerà sopra
  • quadratic: definisce la classica Curva di Bézier Quadratica (queste curve hanno un punto di controllo fra ogni coppia di punti di ancoraggio)
  • cubic: consente di definire la classica Curva di Bézier Cubica (queste curve hanno due punti di controllo fra ogni coppia di punti di ancoraggio)
  • thruBasic: questa impostazione è analoga a thru ma usa un algoritmo di minor complessità per determinare il tipo di curva

Animazione di altre proprietà

Il plugin BezierPlugin consente di animare anche altre proprietà oltre alle coordinate x e y. In questo modo è possibile animare proprietà come quelle che determinano trasformazioni, opacità ed altro. Naturalmente questo tipo di animazioni non sono molto comuni, ma è comunque possibile realizzarle. Proprietà come la rotazione, la dimensione ed anche esempi personalizzati.

In questo esempio vediamo come sia possibile animare la proprietà opacity mentre il cerchio si muove sugli assi x ed y. In questo caso ogni oggetto nell'array deve avere un corrispondente valore per la proprietà opacity.

Andando oltre

Diamo ora un'occhiata ad un paio di funzioni più avanzate.

autoRotate

Questa funzione ruota automaticamente l'oggetto specificato in base alla sua posizione sul tracciato di Bézier.

Scrolling

Se siete alla ricerca di effetti gradevoli allora potrete creare effetti fantastici animando un oggetto lungo una Curva di Bézier così come Jan Paepke ha mostrato nel suo progetto ScrollMagic. Per ottenere questo è sufficiente definire i punti della curva e fornirli nella definizione dell'interpolazione così da animarli lungo la curva.

Prossimamente

Rimanete sintonizzati per la prossima puntata nella serie su TimelineMax nella quale ci immergeremo in un altro plugin per GSAP chiamato Draggable. Attraverso Draggable creeremo delle timeline che ci consentiranno di sperimentare per creare uno slide out menu che possa essere aperto e chiuso tramite trascinamento. Arrivederci alla prossima, professionisti dell'animazione!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.