Share
Plugins för GSAP är bra när du behöver avancerade funktioner. Den BezierPlugin som jag förklarar i den här handledningen hjälper till att animera nästan vilken egenskap som helst (eller egenskaper) längs en kurvigare bana definierad som en uppsättning punkter / värden. Innan vi hoppar in borde vi ta en stund för att lära oss vad en snyggare kurva är och var den kom ifrån.
Tillbaka under de primitiva tiderna med handritning var grafiska designers mycket bekanta med verktyg som kallades "franska kurvor". Dessa konstigt formade bitar (vanligtvis tunn plast) bidrog till att leda konstruktörer i skapandet av eleganta kurvor, precis som vi ser idag gjort med pennan verktyg i Illustrator.
Primitivt handverktyg kallas den franska kurvan som används av många grafiska designers och typografer (src: Wikipedia)
Dessa komplicerade banor vi kallar "Bézier Curves". I den digitala världen uttrycks de som en serie punkter, matematiskt beräknad för att böja linjer i eleganta och utsmyckade former. Mer specifikt används en Bézier-kurva för att modellera släta kurvor med en serie plottade punkter som är förbundna med en väg.
Bézier kurvor som vi ser dem digitalt. Exempel ovan taget från Illustrators Penverktyg: Den omfattande handboken
Bézierkurvor publicerades i 1962 av franska ingenjören Pierre Bézier, som använde dessa utsmyckade banor för att utforma bilar på Renault. Den första studien av Bézier Curve var dock först utvecklad 1959 av matematiker Paul de Casteljau med hjälp av de Casteljaus algoritm, en numeriskt stabil metod för att utvärdera Bézier-kurvor, hos Citroën. Vektorillustratörer är mycket skyldiga till fordonsindustrin!
För den vansinnigt nyfikna, här är en bra förklaring till Bézier-kurvor som heter Cubic Bézier Curves - Under huven förklaras i finare detalj hur kurvan föddes konceptuellt när det gäller matematiska och visuella principer.
Att bli en med Bézier gör Jedi du bra, men bara en sann Bézier Jedi förstår de olika typerna och smakerna Bézierkurvor kommer in. De vanligaste kurvorna är typiskt Kvadratisk och Kubisk som du ser i de flesta användningsfall.
Innan vi dyker in i GSAP igen är det viktigt att du är uppmärksam på att jag använder TweenMax av skäl som diskuterats tidigare. BezierPlugin är redan förpackad för oss!
Som jag visade på dig i början av vår GreenSock Journey instämmer vi en tidslinje så att vi kan ge denna animering ett steg att presentera sig, plus ett sätt att styra varje sekvens.
Om vi antar att vi har tidslinjens inställning och mekanik sorterade kan vi undersöka hur man skriver och använder BezierPlugin. Observera att våra värden för Bézier-banorna bara är en serie x- och y-koordinater, känd som Cartesian Coordinate System. När du skriver, måste utvecklare se till att varje objekt i arrayen har matchande egenskapsnamn.
var bezier_path = [x: värde, y: värde, x: värde, y: värde]; tl.staggerTo (element, duration, bezier: typ: 'thru', värden: bezier_path, curviness: 1, lätthet: Power1.easeInOut, stagger_value);
Låt oss föreställa oss att vi har pekat på en SVG-cirkel som passerar väljaren där du ser element, ställer sedan in varaktighet för. Ger x och y värden och a curviness av 1 kommer att leda till att vår SVG-cirkel animerar på en cirkulär väg som så:
Undersök källan för mer detaljerade uppgifter om vad som gör det att fungera.
Eftersom thru är standard Bézier typ, du behöver inte verkligen definiera en typ alls. Öka och justera värden som curvines kan skapa några riktigt intressanta vägar för animationer att resa på. Med hjälp av cirkeln som vi tittade på ovan har jag tagit mig fri att lägga till några fler SVG-cirklar och justera kurvvärdet (12 för att vara exakt).
Här är en översyn av de verious Bézier-typerna som accepteras. Om du planerar att använda curviness egendom (som låter dig justera spänningen på Bézier) måste du se till att du använder thru typ.
Accentsconagua
thru (standard): Pluggen visar hur man ritar Bézier naturligt genom de medföljande värdena med en proprietär GreenSock-algoritm.mjuk: Värden som tillhandahålls i matrisen verkar nästan som magneter som lockar kurvan mot dem, men Bézier reser sig inte typiskt genom dem.kvadratisk: Definiera standard Quadratic Bezier-data (Quadratic Beziers har en kontrollpunkt mellan varje ankare).kubisk: Gör det möjligt att definiera standard Cubic Bezier-data (Cubic Béziers har två kontrollpunkter mellan varje ankare).thruBasic: Detta är detsamma som thru förutom att det använder en mindre komplex algoritm för den initiala planeringen av Bezier genom de tillförda värdena.BezierPlugin tillåter dessutom utvecklare att animera andra egenskaper utöver x och y-koordinaterna. Du kan faktiskt animera andra egenskaper som transformer, opacitet och mycket mer! Det är inte hemskt vanligt att göra det, men det är helt möjligt. Egenskaper som rotation, skala och även anpassade exempel också!
Till exempel kan vi animera opacitet tillsammans med x och y som jag håller på att demonstrera (notera varje objekt i array måste ha opacitet egenskapen att matcha).
var bezier = [x: 0, y: 0, opacitet: 0, x: 0, y: 42, opacitet: 0, x: 42, y: 42, opacitet: 1, x: 42 , y: 0, opacitet: 1, x: 0, y: 0, opacitet: 0];
Låt oss titta på några fler funktioner, för när du känner dig trygg.
Denna funktion roterar automatiskt målet efter sin position på Bézier-sökvägen.
Om fint är vad du strävar efter, var då super snygging och animera ett objekt på en Bézier-väg som Jan Paepke demonstrerar för sitt ScrollMagic-projekt. Definiera kurvpunkterna och ge dem i din interpoleringsdefinition för att animera längs en definierad kurva.
Håll dig klar för mitt nästa äventyr i den här TimelineMax-serien där jag sätter dig in i ett annat GSAP-plugin som heter Draggable. Med Draggable-drivna tidslinjer ska vi experimentera för att skapa en bildruta där den kan släpas för att öppna och dra för att stänga. Vi ses snart animation proffs!
