Share
Hva du skal skapeI gamle dager med animasjon tweening var et begrep som ble brukt til å beskrive en ramme etter ramme-sekvens, eller det er noen ganger referert til som "in-betweens". Det er det stedet hvor en enkelt bevegelse fører inn i neste for å skape en væskebevegelse. For de som har grå hår, kan du huske Flash; et program som brukte denne termen når det refererte til rammebevegelser. La oss få et innsiktsfulle kikk på noen få eksempler og gi denne tweening-tingen en god olympisk prøve.
For begge eksemplene i denne opplæringen vil jeg laste TweenMax.min.js som vil gi oss tilgang til TimelineMax og alle de andre fantastiske kjerneverktøyene GSAP har å tilby. Hvis du tenker tilbake til vår TimelineMax-primer, diskuterte jeg lasting av TweenMax.min.js som det er mer praktisk, pluss denne filen inneholder stort sett alt vi trenger (også det som anbefales av GreenSock 99% av tiden).
TweenMax utvider TweenLite, og legger til mange nyttige (men ikke-essensielle) funksjoner som gjenta(), repeatDelay (), yoyo (), updateTo (), og mer. TweenMax ble bygget for enkelhets skyld, og gir en enkelt JavaScript-fil som inneholder alt du vanligvis trenger for å animere DOM-elementer. Det gjør det i hovedsak mulig for forfattere å spesifisere enkeltbevegelser mens TimelineMax vil akseptere kjedede metoder for å lage et mer komplekst sett med tweens / sekvenser.
Lastere er de objektene som er gitt til brukerne når de venter på en prosess å laste. De gir oss muligheten til å utforske små, mikro-store elementer som kan ha komplekse eller til og med enkle interaksjoner, pluss at de er et blast å lage.
Ta en rask titt på denne "String of Pearls" demo:
La oss slå sekvensen ned for å få bedre forståelse for hvordan denne hele "tweening" -funksjonen fungerer.
For å opprette denne sekvensen vil det kreve bruk av staggerTo-metoden. Hvis du ikke husker hva en metode er så oppfordrer jeg deg til å stoppe akkurat dette minuttet og lese min veiledning på mekanikk.
Ifølge GreenSocks dokumentasjon, staggerTo () metode:
"Tweens en rekke mål til et felles sett av målverdier.
I vårt tilfelle vil disse flere målene være hver av kretsene i hele SVG.
Accentsconagua
staggerTo Vil godta selgeren vi bruker til kretsene (i dette tilfellet sirkler).Dette vil resultere i følgende; forutsatt sirkler inneholder tre objekter ...
timeline.staggerTo (sirkler, 15, x: 0, 0.2) // sirkel 1 starter ved tid 0 // sirkel 2 starter ved tid 0.2 // sirkel 3 starter ved tid 0.4
For å starte riktig må vi definere en ny tidslinje og noen få innstillinger for vår konfigurasjon.
var loader = ny TimelineMax (repeat: -1, yoyo: true), sirkler = $ ('svg sirkel'), stagger_options = opacity: 0, y: -800, ease: Elastic.easeInOut;For å gjøre denne tidslinjen gjenta i omvendt retning bruker jeg yoyo nøkkel og sette verdien til ekte. Igjen vil dette føre til at vår sekvens spiller i motsatt retning når animasjonen når sin sluttramme. Utløsing av animasjonen vil kreve målretting av hver sirkel inne i SVG, og nøyaktig hvorfor trenger vi en referanse som bruker kraften til jQuery.
Det finnes en rekke måter notert av docs for å bestå selectors (gjerne lese mer om det her). For dette eksempelet velger jeg alle kretsene på en gang ved hjelp av jQuery's typiske velgesyntax. Det er også litt raskere å lagre vår referanse i en variabel for gjenbruk senere, derfor sirkler = $ ('svg sirkel').
De stagger_options variabel er et objekt som er bokstavelig som inneholder egenskapene for å gi denne animasjonen sitt liv. Vi flytter objektene våre ved hjelp av y nøkkel fordi GSAP CSSPlugin intelligent konverterer forvandle verdier til matrise ekvivalenter og i siste rekke gir ting til rette for oss. Det er en hel liste over transformere korte egenskaper som er langt overlegen og mye lettere å bruke i forhold til typiske CSS-transformasjoner:
| CSS | GSAP |
|---|---|
translateX () | x |
translateY () | y |
translateZ () | z |
rotere() | rotasjon |
rotateY () | rotationY |
rotateX () | rotationX |
scaleX () | scaleX |
Scaley () | Scaley |
skewX () | skewX |
skewY () | skewY |
Vi kan også kontrollere lettelsen (følelsen av animasjonen) og passere i ulike bevegelsestyper. For de visuelle elskerne der ute kan du sjekke det enkle visualiseringsverktøyet fra GreenSock for å få en bedre forståelse i det mylder av lettere tilgjengelig.
Det endelige stykket til denne etableringen er vedlegg av staggerTo metode til vår tidslinje og sette inn variablene som er definert tidligere og i riktig rekkefølge for denne metoden (elementer, varighet, alternativer, staggerbeløp).
loader.staggerTo (sirkler, 0,875, stagger_options, 0,025);
Hvis du sulter for å opprette en annen sekvens når stagger-sekvensen er fullført, kan du sikkert kjede en annen metode som fra til som så:
loader.staggerTo (sirkler, 0.875, stagger_options, 0.025) .fraTo (mål: Objekt, varighet: Nummer, fraVars: , tilVars: );
La oss gi dette en prøve med en SVG jeg ringer "Polyman." Nylig skrev jeg en artikkel for CSS-Tricks på animerende polygoner og bestemte seg for å bruke det tilsvarende eksempelet for en annen tweening øvelse her. La oss prøve å bruke staggerFromTo () metode og se hva slags magi vi kan fremheve.
Følgende SVG-utdata (XML) er forkortet for diskusjonens skyld, men som du vil se vår SVG, er det noen få tagger; nærmere bestemt
For den opprinnelige tidslinjens oppsett definerer vi våre globale alternativer ved hjelp av et objekt som er lettere som vil forsinke den første animasjonen, gjenta sekvensen, forsink animasjonen på repetisjon og endelig spille animasjonen i omvendt.
var tmax_options = delay: 0.25, repeat: -1, repeatDelay: 0.25, yoyo: true;
Neste opp er en ganske ny og ikke-dokumentert egenskap som tvinger transformere verdier som skal plasseres i SVG transform attributten (i motsetning til en CSS stil).
CSSPlugin.useSVGTransformAttr = true;
Denne egenskapen ble lagt til for å gjøre det enklere for utviklere å omgå en feil i Safari der det kombineres opasitet og forvandler (som for eksempel transformere: skala () for eksempel) ville gi et merkelig resultat. Fra 1.16.0 useSVGTransformAttr er satt til ekte automatisk og spesifikt rettet mot vår pal Safari, så det er ikke lenger nødvendig for forfattere å definere som jeg har over.
Siden staggerFromTo Metoden aksepterer separate argumenter for fra og til stillinger Jeg liker å sette opp både objektlitteratur utenfor metoden for organisatoriske og lesbarhetsformål.
var stagger_opts_from = opacity: 0, scale: 0, transformOrigin: 'center center'; var stagger_opts_to = opacity: 1, scale: 1, ease: Elastic.easeInOut, force3D: true;
Vi definerer to objektstavler fordi vi trenger alle våre fra og til Egenskaper definert for at denne animasjonen skal gjøre dens ting. Hvis det ikke er klart, går vi fra verdiene som er definert i vår stagger_opts_from og slutter med de innstilte verdiene stagger_opts_to.
De force3D nøkkelen tvinger GSAP til å bruke en 3D-verdi til elementets transformasjon; betydning matrix3d () i stedet for matrise(), eller translate3d () i stedet for oversette(). Dette resulterer vanligvis i nettleseren som setter det målrettede elementet på sitt eget komposittlag, noe som gjør det mulig å effektivisere oppdateringer med animasjoner.
Som standard force3D er satt til auto (fra 1.15.0) så det er egentlig ikke nødvendig å bruke det i det hele tatt (med mindre du spesielt ønsker atferden til ekte i stedet for auto for den tween).
// lagrer målene ved starten av tweenen og / / holder dem på den måten ved hjelp av en 3D-matrise hvor det er aktuelt // (for 2d og 3d-transformasjoner). force3D: true // layerizes målene i begynnelsen av tween og // de-layerizes dem også (bytter tilbake til en 2D matrise eller // transformer) på slutten av tweenen også. Dette forhindrer deg // fra å lage og henge på hundrevis av lagdelte elementer // (som kan nedbryte ytelsen) og sørger også for at tekst // som har blitt rasterisert under tween går tilbake til // som skarp. force3D: auto
Du kan sette den globale force3D verdi for alle tweens ved hjelp av defaultForce3D eiendom levert av CSSPlugin:
// aksepterer også 'false' eller 'auto' CSSPlugin.defaultForce3D = true;
Eller du kan sette dette på en per-milli-basis i stedet:
// vil beholde elementet lagdelt etter at tween er fullstendig timeline.to (element, 1, x: 300, force3D: true); // vil holde elementet lagret etter at tween er fullstendig tidslinje.to (element, 1, x: 300, force3D: false);
Hvis animasjonen din forsøker å overstyre CSS-egenskaper, må du forsikre deg om at din spesifikitet ikke kolliderer med det som er oppgitt i JavaScript, ellers vil de innfødte CSS-verdiene ha forrang, og animasjonen vil ikke reagere som forventet..
/ * Påkrevd Polyman Styles * / .polyman bane opacity: 0;
CSS ovenfor vil gjemme Polyman ved første vindusbelastning, slik at vi ikke i utgangspunktet ser vår skjeggete mann som du vil oppleve med det som ofte kalles feil (Flash Of Unstyled Text).
Siden flertallet av vår konfigurasjon er definert, kan vi endelig begynne å sette opp vår tidslinje, målrette mot SVG-banene, definere en staggerverdi (stagger_val) Og etterbehandling ved å definere hvor lenge hele animasjonen varer (varighet).
var tl = ny TimelineMax (tmax_options), sti = $ ('svg.polyman path'), stagger_val = 0,0125, varighet = 1,25;På den måten og med den delikate bølgen av vår tryllestav og en liten dryss av enhjørningsstøv passerer vi alle de nødvendige variablene som ble definert som argumenter inn i staggerFromTo metode!
tl.staggerFromTo (sti, varighet, stagger_opts_from, stagger_opts_to, stagger_val, 0);
Viola! I en enkel linje begynner Polyman å puste og bli en virkelig levende ting (vel ikke egentlig). Ganske kul hei?
I neste veiledning i TweenMax-serien ser vi på hvordan du lager et pause punkt på tidslinjen, slik at animasjonen automatisk pause når den når det ønskede punktet. Metoden addPause () er relativt ny og lar deg sette pause overalt i en tidslinje. Det er mye mer nøyaktig enn å bruke et tilbakering som kaller en funksjon for å pause funksjonen (som er hva du måtte gjøre før addPause () eksisterende). Til neste gang lykkelig tweening!
En spesiell takk til de leserne som følger med på denne GreenSock-reisen!
