Share
Plugins for GSAP er flotte når du trenger avanserte funksjoner. BezierPlugin som jeg skal forklare i denne opplæringen bidrar til å animere nesten hvilken som helst egenskap (eller egenskaper) langs en buet, mer behagelig bane definert som en rekke punkter / verdier. Før vi hopper inn, bør vi ta et øyeblikk for å lære hva en bezierkurve er og hvor den kom fra.
Tilbake under de primitive tider med håndtrækning, var grafiske designere ekstremt kjent med verktøy kalt "franske kurver". Disse merkelig formede stykkene (vanligvis tynn plast) bidro til å veilede designere i etableringen av elegante kurver, akkurat som vi ser oppnådd i dag med pennen verktøyet i Illustrator.
Primitivt håndverktøy kalt den franske kurven som brukes av mange grafiske designere og typografer (src: Wikipedia)
Disse kompliserte banene vi kaller "Bézier Curves". I den digitale verden uttrykkes de som en serie poeng, matematisk beregnet for å bøye linjer inn i elegante og utsmykkede former. Mer spesifikt er en Bézier-kurve brukt til å modellere glatte kurver ved hjelp av en serie plottede punkter som er koblet sammen med en sti.
Bézier-kurver som vi ser dem digitalt. Eksempel over tatt fra Illustrators pennverktøy: Den omfattende veiledningen
Bézier-kurver ble allment publisert i 1962 av fransk ingeniør Pierre Bézier, som brukte disse utsmykkede banene til å designe billegemer på Renault. Den første studien av Bézier-kurven ble imidlertid først utviklet i 1959 av matematiker Paul de Casteljau ved hjelp av de Casteljaus algoritme, en numerisk stabil metode for å evaluere Bézier-kurver, ved Citroën. Vector illustratører skylder mye for bilindustrien!
For den vanvittig nysgjerrige, her er en flott forklaring på Bézier-kurver kalt cubanske Bézier-kurver - under hetten forklares mer detaljert hvordan kurven er født konseptuelt når det gjelder matematiske og visuelle prinsipper.
Å bli en med Bézier gjør stor Jedi deg, men bare en sann Bézier Jedi forstår de forskjellige typene og smaker Bézier-kurver kommer inn. De vanligste kurver er vanligvis kvadratisk og Cubic som du ser i de fleste brukssaker.
Før vi dykker inn i GSAP igjen, er det viktig at du er oppmerksom på at jeg bruker TweenMax på grunn av tidligere diskuterte grunner. BezierPlugin er allerede pakket inn for oss!
Som jeg viste deg i begynnelsen av vår GreenSock Journey, ordner vi en tidslinje, slik at vi kan gi denne animasjonen et stadium for å presentere seg, samt en måte å styre hver rekkefølge på.
Forutsatt at vi har tidslinjens oppsett og mekanikk sortert, kan vi undersøke hvordan du skriver og bruker BezierPlugin. Vær oppmerksom på at våre verdier for Bézier-stiene bare er en serie x- og y-koordinater, kjent som Cartesian Coordinate System. Når du skriver, må utviklere sørge for at hvert objekt i arrayet har matchende eiendomsnavn.
var bezier_path = [x: verdi, y: verdi, x: verdi, y: verdi]; tl.staggerTo (element, varighet, bezier: type: 'thru', verdier: bezier_path, curviness: 1, lette: Power1.easeInOut, stagger_value);
La oss forestille oss at vi har pekt på en SVG-sirkel, som passerer väljeren der du ser element, Deretter setter du inn varighet også. Å gi x og y verdier og a curviness av 1 vil resultere i vår SVG-sirkel som animerer på en sirkulær sti som slik:
Undersøk kilden for fyldigere detaljer om hva som gjør det til å fungere.
Siden gjennom er standard Bézier type, du trenger egentlig ikke å definere en type i det hele tatt. Øke og justere verdier som curvines kan skape noen virkelig interessante stier for animasjoner å reise på. Ved å bruke sirkelen vi så på ovenfor har jeg tatt friheten til å legge til noen få SVG-sirkler og justere kurvens verdi (12 for å være nøyaktig).
Her er en oversikt over verious Bézier-typer akseptert. Hvis du planlegger å bruke curviness eiendom (som lar deg justere spenningen på Bézier) må du sørge for å bruke gjennom type.
Accentsconagua
gjennom (standard): Pluggen viser hvordan du tegner Bézier naturlig gjennom de medfølgende verdiene ved hjelp av en proprietær GreenSock-algoritme.myk: Verdier som tilbys i matrisen, virker nesten som magneter som tiltrekker seg kurven mot dem, men Bézier kjører vanligvis ikke gjennom dem.kvadratisk: Definer standard Quadratisk Bezier-data (Quadratic Beziers har ett kontrollpunkt mellom hvert anker).kubikk: Lar deg definere standard Cubic Bezier data (Cubic Béziers har to kontrollpunkter mellom hvert anker).thruBasic: Dette er det samme som gjennom bortsett fra at det bruker en mindre kompleks algoritme for den første plottingen av Bezier gjennom de medfølgende verdiene.BezierPlugin tillater i tillegg utviklere å animere andre egenskaper i tillegg til x- og y-koordinatene. Du kan faktisk animere andre egenskaper som transformer, opacity og mye mer! Det er ikke veldig vanlig å gjøre det, men det er helt mulig. Egenskaper som rotasjon, skala og til og med tilpassede eksempler også!
For eksempel kunne vi animere opasitet sammen med x og y som jeg er i ferd med å demonstrere (merk at hvert objekt i arrayet må ha opacitetsegenskapen til å matche).
var bezier = [x: 0, y: 0, opasitet: 0, x: 0, y: 42, opasitet: 0, x: 42, y: 42, opasitet: 1, x: 42 , y: 0, opacity: 1, x: 0, y: 0, opacity: 0];
La oss se på noen flere funksjoner, for når du føler deg trygg.
Denne funksjonen roterer automatisk målet etter sin posisjon på Bézier-banen.
Hvis fancy er det du strever etter, så vær super fancy og animere et objekt på en Bézier-bane som Jan Paepke demonstrerer for sitt ScrollMagic-prosjekt. Definer kurvepunkter og leverer dem i din mellomdefinisjon for å animere langs en definert kurve.
Hold deg oppdatert på mitt neste eventyr i denne TimelineMax-serien der jeg drar deg inn i et annet GSAP-plugin kalt Draggable. Med Draggable drevne tidslinjer vil vi eksperimentere for å lage en lysbildeutvalgsmeny der den kan dras for å åpne og dras for å lukke. Ser deg snart animasjonsproffer!
