Share
Plug-ins voor GSAP zijn geweldig als u geavanceerde functies nodig hebt. De BezierPlugin die ik in deze zelfstudie uitleg, helpt bij het animeren van vrijwel elke eigenschap (of eigenschappen) langs een gebogen bezierpad dat is gedefinieerd als een reeks punten / waarden. Voordat we naar binnen springen, moeten we even nadenken over wat een beziercurve is en waar deze vandaan komt.
In die primitieve tijden van het tekenen van de hand waren grafische ontwerpers zeer bekend met gereedschappen die 'franse curven' worden genoemd. Deze vreemd gevormde stukken (meestal dun plastic) hielpen ontwerpers te begeleiden bij het creëren van elegante rondingen, net zoals we vandaag de dag met de pen volbracht zien te krijgen hulpmiddel in Illustrator.
Primitieve handgereedschap genaamd de Franse curve gebruikt door vele grafische ontwerpers en typografen (src: Wikipedia)
Deze gecompliceerde paden noemen we "Bézier Curves". In de digitale wereld worden ze uitgedrukt als een reeks punten, wiskundig berekend om lijnen te buigen in elegante en sierlijke vormen. Meer specifiek wordt een Bézier-curve gebruikt om vloeiende lijnen te modelleren met behulp van een reeks geplotte punten die met elkaar zijn verbonden door een pad.
Bézier Curves zoals we ze digitaal zien. Voorbeeld hierboven overgenomen van Illustrator's Pen Tool: de uitgebreide handleiding
Bézier Curves werden in 1962 op grote schaal gepubliceerd door de Franse ingenieur Pierre Bézier, die deze sierlijke paden gebruikte om automobielcarrosserieën te ontwerpen bij Renault. De eerste studie van de Bézier-curve werd echter voor het eerst ontwikkeld in 1959 door wiskundige Paul de Casteljau met behulp van het de Casteljau-algoritme, een numeriek stabiele methode om Bézier-rondingen te evalueren, bij Citroën. Vectorillustrators hebben veel te danken aan de auto-industrie!
Voor de waanzinnig nieuwsgierigen, hier is een geweldige uitleg van Bézier Curves, genaamd Cubic Bézier Curves - Under the Hood, die in meer detail uitlegt hoe de curve conceptueel wordt geboren in termen van wiskundige en visuele principes..
Eén worden met de Bézier maakt geweldige Jedi voor jou, maar alleen een echte Bézier Jedi begrijpt de verschillende soorten en smaken waarin Bézier Curves komen. De meest voorkomende curven zijn typisch vierkant en kubiek zoals je in de meeste gevallen zult zien.
Voordat we opnieuw naar GSAP duiken, is het belangrijk dat u er rekening mee houdt dat ik TweenMax gebruik om eerder genoemde redenen. De BezierPlugin is al voor ons verpakt!
Zoals ik je aan het begin van onze GreenSock Journey liet zien, zetten we een tijdlijn in scène, zodat we deze animatie een podium kunnen geven om zichzelf voor te stellen, plus een manier om elke reeks te besturen.
Ervan uitgaande dat we de tijdlijn setup en mechanica gesorteerd hebben, kunnen we kijken hoe we de BezierPlugin kunnen schrijven en gebruiken. Houd er rekening mee dat onze waarden voor de Bézier-paden slechts een reeks x- en y-coördinaten zijn, ook bekend als het cartesiaanse coördinatensysteem. Bij het ontwerpen moeten ontwikkelaars ervoor zorgen dat elk object in de array overeenkomende eigenschapsnamen heeft.
var bezier_path = [x: waarde, y: waarde, x: waarde, y: waarde]; tl.staggerTo (element, duur, bezier: type: 'thru', waarden: bezier_path, curviness: 1, ease: Power1.easeInOut, stagger_value);
Laten we ons voorstellen dat we naar een SVG-cirkel hebben verwezen, waarbij we de selector passeren waar je hem ziet element, vervolgens het instellen van looptijd te. geven X en Y waarden en a curviness van 1 zal resulteren in onze SVG-cirkel die op een rond pad als volgt animeert:
Onderzoek de bron voor meer details over wat het werkt.
Sinds door is de standaard Bézier type, je hoeft eigenlijk helemaal geen type te definiëren. Waarden verhogen en aanpassen zoals curvines kan een aantal echt interessante paden maken voor animaties om verder te reizen. Met behulp van de cirkel die we hierboven hebben bekeken, heb ik de vrijheid genomen om nog een paar SVG-cirkels toe te voegen en de waarde van de ronding aan te passen (12 om precies te zijn).
Hier is een overzicht van de bekende Bézier-typen die zijn geaccepteerd. Als u van plan bent om het te gebruiken curviness eigenschap (waarmee u de spanning op de Bézier kunt aanpassen) moet u ervoor zorgen dat u de door type.
Accentsconagua
door (standaardinstelling): de plug-in berekent hoe de Bézier op natuurlijke wijze door de geleverde waarden kan worden getrokken met behulp van een gepatenteerd GreenSock-algoritme.zacht: Waarden in de array werken bijna als magneten die de curve naar zich toe trekken, maar de Bézier reist hier normaal niet doorheen.vierkant: Definieer standaard Kwadratische Bezier-gegevens (Kwadratische Beziers hebben één controlepunt tussen elk anker).kubiek: Hiermee kunt u standaard Cubic Bezier-gegevens definiëren (Cubic Béziers hebben twee controlepunten tussen elk anker).thruBasic: Dit is hetzelfde als door behalve dat het een minder complex algoritme gebruikt voor de eerste plotting van de Bezier via de geleverde waarden.Met de BezierPlugin kunnen ontwikkelaars naast de x- en y-coördinaten ook andere eigenschappen animeren. Je kunt zelfs andere eigenschappen animeren, zoals transformaties, dekking en nog veel meer! Het is niet erg gebruikelijk om dat te doen, maar het is heel goed mogelijk. Eigenschappen zoals rotatie, schaal en zelfs aangepaste voorbeelden!
We zouden bijvoorbeeld het kunnen animeren ondoorzichtigheid samen met x en y zoals ik ga demonstreren (let erop dat elk object in de array de opaciteitseigenschap moet hebben die overeenkomt).
var bezier = [x: 0, y: 0, dekking: 0, x: 0, y: 42, dekking: 0, x: 42, y: 42, dekking: 1, x: 42 , y: 0, dekking: 1, x: 0, y: 0, dekking: 0];
Laten we nog een paar functies bekijken, want als je zelfvertrouwen hebt.
Deze functie roteert het doel automatisch op basis van zijn positie op het Bézier-pad.
Als zin in hebben is waar je naar streeft, dan bent super chique en animeer een object op een Bézier-pad zoals Jan Paepke laat zien voor zijn project ScrollMagic. Definieer de curvepunten en lever ze in uw tween-definitie om te animeren langs een gedefinieerde curve.
Blijf op de hoogte voor mijn volgende avontuur in deze TimelineMax-serie, waarbij ik je onderdompel in een andere GSAP-plug-in genaamd Draggable. Met tijdlijnen van Draggable Power zullen we experimenteren om een uitschuifmenu te maken waar het kan worden gesleept om te openen en te slepen om te sluiten. Tot snel animatie-pro's!
