Share
I plugin per GSAP sono grandi quando hai bisogno di funzionalità avanzate. Il BezierPlugin che spiegherò in questo tutorial aiuta ad animare virtualmente qualsiasi proprietà (o proprietà) lungo un percorso bezier curvo definito come una serie di punti / valori. Prima di saltare dovremmo prendere un momento per imparare che cos'è una curva di Bezier e da dove proviene.
Di ritorno in quei tempi primitivi di disegno a mano, i grafici erano estremamente familiari con strumenti chiamati "curve francesi". Questi pezzi dalla forma strana (tipicamente plastica sottile) aiutavano i designer nella creazione di curve eleganti, proprio come vediamo oggi con la penna strumento in Illustrator.
Strumento manuale primitivo chiamato curva francese utilizzato da molti grafici e tipografi (src: Wikipedia)
Questi percorsi complicati chiamiamo "Curve di Bézier". Nel mondo digitale sono espressi come una serie di punti, calcolati matematicamente al fine di piegare le linee in forme eleganti e ornate. Più in particolare, una curva di Bézier viene utilizzata per modellare curve morbide usando una serie di punti tracciati che sono collegati insieme da un percorso.
Curve di Bézier così come le vediamo digitalmente. Esempio sopra preso dallo strumento penna di Illustrator: la guida completa
Le curve di Bézier furono ampiamente pubblicizzate nel 1962 dall'ingegnere francese Pierre Bézier, che usò questi percorsi ornati per progettare corpi di automobili alla Renault. Lo studio iniziale della curva di Bézier fu tuttavia sviluppato nel 1959 dal matematico Paul de Casteljau usando l'algoritmo di de Casteljau, un metodo numericamente stabile per valutare le curve di Bézier, a Citroën. Gli illustratori di vettori devono molto al settore automobilistico!
Per i curiosi follemente, ecco una grande spiegazione delle Curve di Bézier chiamate Curve di Bézier Cubiche - Sotto il Cappuccio che spiegano nei minimi dettagli come la curva nasce concettualmente in termini di principi matematici e visivi.
Diventare uno con il Bézier ti rende grande Jedi, ma solo un vero Bézier Jedi comprende i vari tipi e sapori di Bézier Curves. Le curve più comuni sono tipicamente quadratico e Cubo come vedrai nella maggior parte dei casi d'uso.
Prima di immergerci nuovamente in GSAP, è importante che tu sia consapevole del fatto che sto utilizzando TweenMax per motivi precedentemente discussi. BezierPlugin è già incluso nel pacchetto per noi!
Come ti ho mostrato all'inizio del nostro viaggio GreenSock, istanziamo una timeline in modo che possiamo dare a questa animazione un palcoscenico per presentarsi, oltre a un modo per controllare ogni sequenza.
Supponendo di avere l'impostazione della sequenza temporale e la meccanica ordinata, possiamo esaminare come scrivere e utilizzare BezierPlugin. Prendi nota che i nostri valori per i percorsi di Bézier sono solo una serie di coordinate xey, note come sistema di coordinate cartesiane. Durante la creazione, gli sviluppatori devono assicurarsi che ogni oggetto nell'array abbia nomi di proprietà corrispondenti.
var bezier_path = [x: valore, y: valore, x: valore, y: valore]; tl.staggerTo (elemento, durata, bezier: tipo: 'thru', valori: bezier_path, curviness: 1, facilità: Power1.easeInOut, stagger_value);
Immaginiamo di aver indicato un cerchio SVG, passando il selettore dove vedi elemento, quindi impostando il durata pure. Dando X e y valori e a curviness di 1 risulterà nel nostro cerchio SVG che si anima su un percorso circolare in questo modo:
Esamina la fonte per maggiori dettagli su cosa lo fa funzionare.
Da attraverso è il default di Bézier genere, non hai davvero bisogno di definire un tipo. Aumentando e regolando valori come curvines può creare dei percorsi davvero interessanti per le animazioni su cui viaggiare. Usando il cerchio che abbiamo visto sopra ho avuto la libertà di aggiungere altri cerchi SVG e di regolare il valore di curvatura (12 per essere precisi).
Ecco una carrellata dei veriti tipi di Bézier accettati. Se prevedi di usare il curviness proprietà (che consente di regolare la tensione sul Bézier) è necessario assicurarsi di utilizzare il attraverso genere.
Accentsconagua
attraverso (impostazione predefinita): il plug-in calcola come disegnare il Bézier in modo naturale attraverso i valori forniti utilizzando un algoritmo proprietario di GreenSock.morbido: I valori forniti nell'array agiscono quasi come dei magneti che attraggono la curva verso di loro, ma il Bézier in genere non li attraversa.quadratico: Definisci i dati quadratici standard di Bezier (i quadratici Beziers hanno un punto di controllo tra ogni ancoraggio).cubo: Consente di definire i dati standard di Cubico Bezier (i Bézier cubici hanno due punti di controllo tra ogni ancoraggio).thruBasic: Questo è lo stesso di attraverso tranne che utilizza un algoritmo meno complesso per il tracciamento iniziale di Bezier attraverso i valori forniti.BezierPlugin consente inoltre agli sviluppatori di animare altre proprietà oltre ai coordinati x e y. Puoi effettivamente animare altre proprietà come trasformazioni, opacità e molto altro! Non è terribilmente comune farlo, ma è del tutto possibile. Proprietà come rotazione, scala e persino esempi personalizzati!
Ad esempio, potremmo animare il opacità insieme a x e y come sto per dimostrare (nota che ogni oggetto nell'array deve avere la proprietà opacity corrispondente).
var bezier = [x: 0, y: 0, opacità: 0, x: 0, y: 42, opacità: 0, x: 42, y: 42, opacità: 1, x: 42 , y: 0, opacità: 1, x: 0, y: 0, opacità: 0];
Diamo un'occhiata ad alcune altre funzionalità, per quando ti senti sicuro.
Questa funzione ruota automaticamente il bersaglio in base alla sua posizione sul percorso di Bézier.
Se fantasia è ciò per cui ti sforzi, quindi sii super fantasia e animare un oggetto su un percorso di Bézier come dimostra Jan Paepke per il suo progetto ScrollMagic. Definire i punti della curva e fornirli nella definizione dell'interpolazione per animare lungo una curva definita.
Restate sintonizzati per la mia prossima avventura in questa serie TimelineMax in cui vi immergo in un altro plug-in GSAP chiamato Draggable. Con le timeline alimentabili trascinabili sperimenteremo per creare un menu a scorrimento in cui può essere trascinato per aprire e trascinato per chiudere. A presto professionisti di animazione!
