Share
Vad du ska skapaUnder den gamla tiden av animering tweening var en term som användes för att beskriva en ram för bildsekvens, eller vad som ibland kallas "in-betweens". Det är den platsen där en enda rörelse leder till nästa för att skapa en flytande rörelse. För dem som har grått hår kan du komma ihåg Flash; en applikation som använde denna term när man hänvisade till ramrörelser. Låt oss ta en inblick i titta på några exempel och ge den här tweening-saken en bra olikmodig högskoleförsök.
För båda exemplen i denna handledning laddar jag TweenMax.min.js som ger oss tillgång till TimelineMax och alla andra fantastiska kärnverktyg GSAP har att erbjuda. Om du tänker tillbaka till vår TimelineMax-primer diskuterade jag att ladda TweenMax.min.js som det är bekvämare, plus den här filen innehåller ganska mycket allt vi behöver (även vad rekommenderas av GreenSock 99% av tiden).
TweenMax utökar TweenLite och lägger till många användbara (men icke-väsentliga) funktioner som upprepa(), repeat (), jojo(), updateTo (), och mer. TweenMax byggdes för bekvämlighet, vilket ger en enda JavaScript-fil som innehåller allt du behöver för att animera DOM-element. Det tillåter i huvudsak författare att ange enstaka rörelser medan TimelineMax kommer att acceptera kedjerade metoder för att skapa en mer komplex uppsättning tweens / sekvenser.
Laddare är de objekt som ges till användare när de väntar på en process att ladda. De ger oss möjligheten att utforska små, mikrostora element som kan ha komplexa eller till och med enklare interaktioner, plus de är en jättebra för att göra.
Ta en snabb titt på denna "String of Pearls" -demo:
Låt oss bryta ner sekvensen för att få en bättre förståelse för hur denna hela "tweening" -saken fungerar.
För att skapa denna sekvens krävs det att man använder staggerTo-metoden. Om du inte kommer ihåg vad en metod är så uppmuntrar jag dig att sluta just denna minut och läsa min handledning om mekanik.
Enligt GreenSocks dokumentation, den staggerTo () metod:
"Tweens en rad mål till en gemensam uppsättning av destinationsvärden.
I vårt fall kommer dessa flera mål att vara var och en av cirklarna inom hela SVG.
Accentsconagua
staggerTo kommer att acceptera väljaren vi använder för cirklarna (i det här fallet cirklar).Detta skulle resultera i följande; under antagande cirklar innehåller tre objekt ...
tidslinje.staggerTo (cirklar, 15, x: 0, 0,2) // cirkel 1 börjar vid tidpunkten 0 // cirkel 2 börjar vid tidpunkten 0.2 // cirkel 3 börjar vid tidpunkten 0,4
För att starta rätt måste vi definiera en ny tidslinje och några inställningar för vår konfiguration.
var loader = ny TimelineMax (repeat: -1, yoyo: true), cirklar = $ ('svg cirkel'), stagger_options = opacitet: 0, y: -800, lätthet: Elastic.easeInOut;För att göra denna tidslinje upprepa i omvänd riktning använder jag jojo nyckeln och ställer in sitt värde till Sann. Återigen kommer detta att få vår sekvens att spela i motsatt riktning när animationen når sin slutram. Genom att aktivera animeringen måste du rikta in varje cirkel inuti SVG och exakt varför behöver vi en referens med hjälp av jQuery.
Det finns ett antal sätt som noterats av docs att passera selektörer (gärna läsa mer om det här). I det här exemplet väljer jag alla cirklar på en gång med jQuerys typiska väljarsyntax. Det är också lite snabbare att lagra vår referens i en variabel för återanvändning senare, därmed cirklar = $ ('svg cirkel').
De stagger_options variabel är ett objekt som är bokstavligt som innehåller egenskaperna för att ge denna animation sitt liv. Vi flyttar våra objekt med hjälp av y nyckeln eftersom GSAP CSSPlugin intelligent omvandlar omvandla värden till matris ekvivalenter och i slutändan snabbar saker upp för oss. Det finns en hel lista över transformerade kortegenskaper som är mycket överlägsen och mycket enklare att använda jämfört med typiska CSS-omvandlingar:
| CSS | GSAP |
|---|---|
translateX () | x |
translateY () | y |
translateZ () | z |
rotera() | rotation |
rotateY () | rotationY |
rotateX () | rotationX |
scaleX () | scaleX |
scaleY () | scaleY |
skewX () | skewX |
skewY () | skewY |
Vi kan också kontrollera lättnad (känslan av animationen) och passera i olika rörelse typer. För de visuella älskarna där ute kan du checka ut det enkla visualiseringsprogrammet från GreenSock för att få en bättre förståelse i den myriad av lättnader som finns.
Det sista stycket till denna skapelse är att bifoga staggerTo metod till vår tidslinje och infoga de variabler som definierats tidigare och i rätt ordning för den här metoden (element, längd, alternativ, staggerbelopp).
loader.staggerTo (cirklar, 0,875, stagger_options, 0,025);
Om du hungrar för att skapa en annan sekvens när stagger-sekvensen är klar kan du säkert kedja en annan metod som från till såhär:
loader.staggerTo (cirklar, 0.875, stagger_options, 0.025) .fromTo (mål: Object, duration: Number, fromVars: , toVars: );
Låt oss försöka med ett SVG jag kallar "Polyman." Nyligen skrev jag en artikel för CSS-Tricks på animeringspolygoner och bestämde mig för att använda det liknande exemplet för en annan tweening-övning här. Låt oss försöka använda staggerFromTo () metod och se vilken typ av magi vi kan framkalla.
Följande SVG-utdata (XML) är förkortad för diskussionens skull, men som du ser att vårt SVG innefattar några taggar; specifikt
För den ursprungliga tidslinjens inställning definierar vi våra globala alternativ med ett objekt som är bokstavligt, vilket fördröjer den ursprungliga animeringen, upprepa sekvensen, fördröja animationen vid upprepning och slutligen spela animeringen i omvänd.
var tmax_options = fördröjning: 0.25, upprepa: -1, repeatDelay: 0.25, yoyo: true;
Nästa upp är en ganska ny och obokumenterad egenskap som tvingar transformera värden som ska placeras i SVG-transformatributet (i motsats till en CSS-stil).
CSSPlugin.useSVGTransformAttr = true;
Den här egenskapen har lagts till för att göra det enklare för utvecklare att komma runt en bugg i Safari där man kombinerar opacitet och transformer (som omvandla: skala () till exempel) skulle producera ett udda resultat. Från och med 1,16,0 useSVGTransformAttr är satt till Sann automatiskt och specifikt riktade till vår pal Safari så det är inte längre nödvändigt för upphovsmän att definiera som jag har ovan.
Sedan staggerFromTo Metoden accepterar separata argument för från och till positioner Jag gillar att konfigurera både objekt litteratur utanför metoden för organisatoriska och läsbarhetsändamål.
var stagger_opts_from = opacitet: 0, skala: 0, transformOrigin: 'center center'; var stagger_opts_to = opacity: 1, scale: 1, ease: Elastic.easeInOut, force3D: true;
Vi definierar två objekt litteratur eftersom vi behöver alla våra från och till egenskaper definieras för att denna animering ska kunna göra sin sak. Om det inte är klart kommer vi från de värden som definieras i vår stagger_opts_from och slutar med de angivna värdena stagger_opts_to.
De force3D nyckel tvingar GSAP att tillämpa ett 3D-värde på elementets transform; menande Matrix3D () istället för matris(), eller translate3d () istället för Översätt(). Detta resulterar vanligtvis i webbläsaren som sätter det inriktade elementet i sitt eget kompositionslager vilket möjliggör effektivare uppdateringar med animeringar.
Som standard force3D är satt till bil (från och med 1.15.0) så det finns faktiskt inget behov av att använda det alls (om du inte vill ha beteendet hos Sann istället för bil för det mellanrummet).
// layerizes målen i början av intervallet och // håller dem på så sätt med en 3D-matris där det är tillämpligt // (för 2d och 3d-transformer). force3D: true // layerizes målen i början av tweenen och / / delagrar också dem (växlar tillbaka till en 2D-matris eller // transformer) i slutet av intervallet också. Detta förhindrar dig // från att skapa och hänga på hundratals lagrade element // (vilket kan försämra prestanda) och säkerställer också att text // som kan ha rasteriserats under intervallet återgår till // som är skarp. force3D: auto
Du kan ställa in det globala force3D värde för alla tweens med hjälp av defaultForce3D egendom som tillhandahålls av CSSPlugin:
// accepterar också "false" eller "auto" CSSPlugin.defaultForce3D = true;
Eller du kan ställa in det här på en mellanliggande grund istället:
// kommer att hålla elementet skiktat efter att tween är komplett timeline.to (element, 1, x: 300, force3D: true); // kommer att hålla elementet skiktat efter att tween är komplett timeline.to (element, 1, x: 300, force3D: false);
Om din animering försöker överdriva CSS-egenskaper måste du se till att din specifika specificitet inte kolliderar med vad som anges i JavaScript, annars kommer de inbyggda CSS-värdena att ha företräde och din animering reagerar inte som förväntat.
/ * Obligatoriska Polyman Styles * / .polyman path opacitet: 0;
CSS ovan kommer att gömma Polyman vid första fönsterbelastningen så vi förstår inte vår bearded kollega så mycket som du skulle uppleva med vad som vanligtvis kallas FOUT (Flash Of Unstyled Text).
Eftersom majoriteten av vår konfiguration är definierad kan vi äntligen börja konfigurera vår tidslinje, rikta in SVG-banorna, definiera ett staggervärde (stagger_val) Och slutar genom att definiera hur länge hela animationen kommer att vara kvar (varaktighet).
var tl = ny TimelineMax (tmax_options), sökväg = $ ('svg.polyman path'), stagger_val = 0,0125, duration = 1,25;Precis som det och med den tunna vågen av vår trollstav och ett litet stänk av enhörningsstoft passerar vi alla nödvändiga variabler som definierades som argument i staggerFromTo metod!
tl.staggerFromTo (sökväg, längd, stagger_opts_from, stagger_opts_to, stagger_val, 0);
Altfiol! I en enkel linje börjar Polyman andas och bli en riktig levande sak (inte riktigt). Ganska cool va?
I nästa handledning i vår TweenMax-serie ser vi hur man skapar en pauspunkt på tidslinjen, så animeringen pausar automatiskt när den når den önskade punkten. Metoden addPause () är relativt ny och låter dig placera en paus någonstans i en tidslinje. Det är mycket mer exakt än att använda en återuppringning som kallar en funktion för att pausa funktionen (vilket är vad du var tvungen att göra före addPause () existerande). Fram till nästa gång glad tweening!
Ett speciellt tack till de läsare som följer med på denna GreenSock-resa!
