Share
Pluginurile pentru GSAP sunt excelente atunci când aveți nevoie de capacități avansate. BezierPlugin Voi explica în acest tutorial ajută la animarea practic a oricărei proprietăți (sau a proprietăților) de-a lungul unei căi Bezier curbe definite ca o serie de puncte / valori. Înainte de a sări, ar trebui să luăm un moment pentru a afla ce este o curbă bezier și de unde a venit.
Înapoi în acele vremuri primitive ale desenului manual, designerii grafici erau extrem de familiarizați cu uneltele numite "curbe franceze". Aceste piese ciudate (plastic tipic subțire) au ajutat proiectanții să creeze curbe elegante, așa cum vedem astăzi realizate cu stiloul în Illustrator.
Un instrument de mână primitiv numit curba franceză folosit de mulți designeri grafici și de tipografi (src: Wikipedia)
Aceste căi complicate pe care le numim "Bézier Curves". În lumea digitală, ele sunt exprimate ca o serie de puncte, calculate matematic pentru a îndoi linii în forme elegante și ornamentate. Mai precis, o curbă Bézier este utilizată pentru modelarea curbelor netede folosind o serie de puncte planificate care sunt conectate împreună printr-o cale.
Bézier curves pe măsură ce le vedem digital. Exemplu de mai sus, preluat din instrumentul Pen Illustrator: Ghidul complet
Bézier Curves au fost publicate pe scară largă în 1962 de către inginerul francez Pierre Bézier, care a folosit aceste căi ornate pentru a proiecta corpuri de automobile la Renault. Studiul inițial al Curbei Bézier a fost dezvoltat pentru prima dată în 1959 de către matematicianul Paul de Casteljau folosind algoritmul de Casteljau, o metodă stabilă numeric pentru evaluarea curbelor Bézier la Citroen. Vector illustratorii datorează mult industriei auto!
Pentru cei nebuni curioși, iată o mare explicație a lui Bézier Curves, numită Cubic Bézier Curves - Under the Hood, explicând în detaliu mai detaliat cum se naște curba conceptuală în termeni de principii matematice și vizuale.
A deveni unul cu Bézier face mare Jedi tu, dar numai un Bézier Jedi înțelege diferitele tipuri și arome Bézier Curves vin. Cele mai frecvente curbe sunt de obicei patratice și Cub după cum veți vedea în majoritatea cazurilor de utilizare.
Înainte de a ne arunca din nou în GSAP, este important să fiți atenți la faptul că folosesc TweenMax din motive discutate anterior. BezierPlugin este deja ambalat pentru noi!
Așa cum v-am arătat la începutul Călătoriei noastre GreenSock, instanțiăm o cronologie, astfel încât să putem da acestei animații o etapă de prezentare, plus o modalitate de a controla fiecare secvență.
Presupunând că avem setarea cronologică și mecanica sortată, putem examina cum să scriem și să folosim BezierPlugin. Rețineți că valorile noastre pentru căile Bézier sunt doar o serie de coordonate x și y, cunoscute sub numele de Sistemul de coordonate carteziene. Când creați, dezvoltatorii trebuie să se asigure că fiecare obiect din matrice are proprietăți potrivite.
var bezier_path = [x: valoare, y: valoare, x: valoare, y: valoare]; tl.staggerTo (element, durată, bezier: type: 'thru', valori: bezier_path, curviness: 1, ușurință: Power1.easeInOut, stagger_value);
Să ne imaginăm că am arătat un cerc SVG, trecând selectorul unde vedeți element, apoi setarea durată de asemenea. Oferirea X și y valori și a curviness de 1 va duce la animarea cercului nostru SVG pe o cale circulară:
Examinați sursa pentru detalii mai detaliate despre ceea ce o face să funcționeze.
De cand prin este Bézier implicit tip, nu trebuie să definiți deloc un tip. Creșterea și ajustarea valorilor, cum ar fi curvines pot crea câteva căi interesante pentru a putea călători animații. Folosind cercul pe care l-am privit mai sus mi-am luat libertatea de a adauga cateva cercuri SVG si de a regla valoarea curviness (12 pentru a fi exact).
Iată o trecere în revistă a tipurilor Bézier verișoare acceptate. Dacă intenționați să utilizați curviness proprietate (care vă permite să reglați tensiunea pe Bézier) trebuie să vă asigurați că utilizați prin tip.
Accentsconagua
prin (implicit): pluginul arată cum să desenezi Bézier în mod natural prin valorile furnizate folosind un algoritm proprietar GreenSock.moale: Valorile furnizate în matrice acționează aproape ca niște magneți care atrag curba spre ei, dar Bézier nu călătorește de obicei prin ei.pătratic: Definirea datelor standard Quadratic Bezier (Quadratic Beziers au un punct de control între fiecare ancora).cub: Vă permite să definiți date standard Cubic Bezier (Bezierul Cubic are două puncte de control între fiecare ancoră).thruBasic: Acest lucru este la fel ca prin cu excepția faptului că utilizează un algoritm mai puțin complex pentru plotarea inițială a lui Bezier prin valorile furnizate.BezierPlugin permite dezvoltatorilor să animeze și alte proprietăți în afara coordonatelor x și y. De fapt, puteți anima alte proprietăți, cum ar fi transformările, opacitatea și multe altele! Nu este deloc comun pentru a face acest lucru, dar este cu totul posibil. Proprietăți precum rotația, scara și chiar exemple personalizate!
De exemplu, am putea anima opacitate împreună cu x și y, pe măsură ce urmează să demonstrez (notați fiecare obiect din matrice trebuie să aibă proprietatea de opacitate pentru a se potrivi).
var = 0, y: 0, opacitate: 0, x: 0, y: 42, opacitate: 0, x: 42, y: 42; , y: 0, opacitate: 1, x: 0, y: 0, opacitate: 0];
Să ne uităm la câteva alte caracteristici, pentru că vă simțiți încrezători.
Această funcție rotește automat țintă în funcție de poziția sa pe traseul Bézier.
Dacă extravagant este ceea ce vă străduiți, atunci să fie super fantezie și animați un obiect pe o cale Bézier, așa cum demonstrează Jan Paepke pentru proiectul său ScrollMagic. Definiți punctele de curbă și le furnizați în definiția tween pentru a anima de-a lungul unei curbe definite.
Rămâi acordat pentru următoarea mea aventură în această serie TimelineMax unde te duc într-un alt plugin GSAP numit Draggable. Cu ajutorul unor linii temporale proprii Draggable vom experimenta pentru a crea un meniu de expansiune în care să poată fi tras să se deschidă și să fie târât pentru închidere. Ne vedem în curând profesioniști în animație!
