Share
Wat je gaat creërenIn de oude dagen van animatie tweening was een term die werd gebruikt om een beeld-voor-beeld reeks te beschrijven, of wat soms wordt aangeduid als 'tussenafstand'. Het is die plaats waar een enkele beweging naar de volgende leidt om een vloeiende beweging te creëren. Voor degenen die grijs haar hebben, kun je Flash herinneren; een toepassing die deze term gebruikte bij het verwijzen naar frame-bewegingen. Laten we een inzichtelijke blik werpen op een paar voorbeelden en dit tweening-ding een goede klassieke manier van proberen geven.
Voor beide voorbeelden in deze zelfstudie zal ik TweenMax.min.js laden. Dit geeft ons toegang tot TimelineMax en alle andere fantastische kerntools die GSAP te bieden heeft. Als je terugdenkt aan onze TimelineMax-primer, besprak ik het laden van TweenMax.min.js omdat dit handiger is, plus dit ene bestand bevat vrijwel alles wat we nodig hebben (ook wat 99% van de tijd door GreenSock wordt aanbevolen).
TweenMax breidt TweenLite uit en voegt veel handige (maar niet-essentiële) functies toe, zoals herhaling(), herhalingsvertraging(), yoyo (), updateTo (), en meer. TweenMax is gebouwd voor het gemak en biedt een enkel JavaScript-bestand met alles wat u vaak nodig zult hebben voor het animeren van DOM-elementen. In wezen kunnen auteurs afzonderlijke bewegingen specificeren, terwijl TimelineMax geketende methoden accepteert om een complexere reeks tweens / sequenties te creëren.
Laders zijn die objecten die aan gebruikers worden gegeven wanneer ze wachten op het laden van een proces. Ze geven ons de kracht om kleine, micro-kleine elementen te ontdekken die complexe of zelfs simplistische interacties kunnen hebben - plus ze zijn een knaller om te maken.
Bekijk deze demo van "String of Pearls" snel:
Laten we de volgorde afbreken voor een beter begrip van hoe dit hele 'tweening'-ding werkt.
Voor het maken van deze reeks is het gebruik van de methode staggerTo vereist. Als je je niet herinnert wat een methode is, raad ik je aan om dit moment te stoppen en mijn tutorial over mechanica te lezen.
Volgens de documentatie van GreenSock, de staggerTo () methode:
"Tweens een reeks doelen naar een gemeenschappelijke set bestemmingswaarden.
In ons geval zijn die meerdere doelen elk van de cirkels binnen de gehele SVG.
Accentsconagua
staggerTo accepteert de selector die we voor de kringen gebruiken (in dit geval cirkels).Dit zou het volgende tot gevolg hebben; ervan uitgaande dat cirkels bevat drie objecten ...
tijdlijn.staggerTo (cirkels, 15, x: 0, 0.2) // cirkel 1 begint op tijdstip 0 // cirkel 2 begint op tijdstip 0.2 // cirkel 3 begint op tijdstip 0.4
Om goed te beginnen, moeten we een nieuwe tijdlijn en een paar instellingen voor onze configuratie definiëren.
var loader = new TimelineMax (repeat: -1, yoyo: true), circles = $ ('svg circle'), stagger_options = opacity: 0, y: -800, ease: Elastic.easeInOut;Om deze tijdlijn in de omgekeerde richting te herhalen, gebruik ik de yoyo sleutel en de waarde ervan instellen op waar. Nogmaals, dit zorgt ervoor dat onze reeks in de tegenovergestelde richting wordt gespeeld zodra de animatie zijn eindframe bereikt. Als u de animatie triggert, moet u elke cirkel binnen de SVG targeten en precies waarom we een referentie nodig hebben met behulp van de kracht van jQuery.
Er zijn een aantal manieren aangegeven door de documenten om selectors door te geven (voel je vrij om hier meer over te lezen). Voor dit voorbeeld selecteer ik alle kringen in één keer met behulp van de typische selector-syntaxis van jQuery. Het is ook een beetje sneller om onze referentie op te slaan in een variabele voor later gebruik, vandaar cirkels = $ ('svg-cirkel').
De stagger_options variabele is een letterlijk object dat de eigenschappen bevat om deze animatie zijn leven te geven. We verplaatsen onze objecten met behulp van de Y sleutel omdat de GSAP CSSPlugin intelligent converteert transformeren waarden voor Matrix equivalenten en uiteindelijk versnelt dingen voor ons. Er is een hele lijst van korte-handeigenschappen die veel beter zijn en veel gemakkelijker te gebruiken tegenover typische CSS-transformaties:
| CSS | GSAP |
|---|---|
translateX () | X |
translateY () | Y |
translateZ () | z |
draaien() | omwenteling |
rotateY () | rotationY |
rotateX () | rotationX |
scaleX () | scaleX |
scaleY () | scaleY |
skewX () | skewX |
skewY () | skewY |
We kunnen ook de versnelling (het gevoel van de animatie) regelen en verschillende bewegingstypen doorgeven. Voor de visuele liefhebbers die er zijn, kun je het gemak visualizer door GreenSock uitchecken om een beter begrip te krijgen van de talloze eases beschikbaar.
Het laatste stuk aan deze creatie is het bevestigen van de staggerTo methode aan onze tijdlijn toevoegen en de eerder gedefinieerde variabelen invoegen in de juiste volgorde voor deze specifieke methode (elementen, duur, opties, staffel).
loader.staggerTo (cirkels, 0.875, stagger_options, 0.025);
Als je honger hebt om een andere reeks te maken als de spreidingsvolgorde voltooid is, kun je een andere methode, zoals van naar zoals zo:
loader.staggerTo (circles, 0.875, stagger_options, 0.025) .fromTo (doel: Object, duration: Number, fromVars: , toVars: );
Laten we dit eens proberen met een SVG die ik "Polyman" noem. Onlangs schreef ik een artikel voor CSS-Tricks over het animeren van polygonen en besloot om datzelfde voorbeeld te gebruiken voor een andere tweening-oefening hier. Laten we het gebruiken staggerFromTo () methode en zie welke soort magie we kunnen oproepen.
De volgende SVG-uitvoer (de XML) is enigszins afgekort omwille van de discussie, maar zoals u zult zien bevat onze SVG een paar tags; specifiek
Voor de initiële tijdlijnopstelling zullen we onze globale opties definiëren met behulp van een letterlijk object dat de initiële animatie zal vertragen, de reeks zal herhalen, de animatie op herhaling zal vertragen en de animatie uiteindelijk in omgekeerde volgorde zal afspelen.
var tmax_options = delay: 0.25, repeat: -1, repeatDelay: 0.25, yoyo: true;
De volgende is een vrij nieuwe en ongedocumenteerde eigenschap die ervoor zorgt dat transformatiewaarden in het SVG-transformatieattribuut worden geplaatst (in tegenstelling tot een CSS-stijl).
CSSPlugin.useSVGTransformAttr = true;
Deze eigenschap is toegevoegd om het de ontwikkelaars gemakkelijker te maken om een bug in Safari te omzeilen en te combineren ondoorzichtigheid en transformaties (zoals transformeren: schaal () bijvoorbeeld) zou een vreemd resultaat opleveren. Vanaf 1.16.0 useSVGTransformAttr ingesteld op waar automatisch en specifiek gericht op onze Pal Safari, dus het is niet langer nodig voor auteurs om te definiëren zoals ik hierboven heb.
Sinds de staggerFromTo methode accepteert afzonderlijke argumenten voor van en naar posities Ik vind het leuk om zowel objectliterals buiten de methode in te stellen voor organisatorische doeleinden als voor leesbaarheid.
var stagger_opts_from = opacity: 0, scale: 0, transformOrigin: 'center center'; var stagger_opts_to = opacity: 1, scale: 1, ease: Elastic.easeInOut, force3D: true;
We definiëren twee object-letterwoorden omdat we al onze objecten nodig hebben van en naar eigenschappen die zijn gedefinieerd om deze animatie te laten werken. Als het niet duidelijk is, gaan we van de waarden die in ons zijn gedefinieerd stagger_opts_from en eindigend met de waarden die zijn ingesteld in stagger_opts_to.
De force3D toetsingskrachten GSAP om een 3D-waarde toe te passen op de transformatie van het element; betekenis Matrix3D () in plaats van Matrix(), of translate3d () in plaats van vertalen(). Dit resulteert meestal in de browser die het getargete element op zijn eigen laag van de compositor plaatst, wat zorgt voor efficiëntere updates met animaties.
Standaard force3D ingesteld op auto (vanaf 1.15.0) dus eigenlijk is het helemaal niet nodig om het te gebruiken (tenzij je specifiek het gedrag van wilt waar in plaats van auto voor die tween).
// Lagen de doelen aan het begin van de tween en // houdt ze op die manier met behulp van een 3D-matrix, indien van toepassing // (voor 2D- en 3D-transformaties). force3D: true // gelaagde de doelen aan het begin van de tween en // deselecteert ze ook aan het einde van de tween (terugschakelen naar een 2D-matrix of // transforms). Hiermee wordt voorkomen dat // je honderden gelaagde elementen kunt maken en ophangen (waardoor de prestaties afnemen) en wordt er ook voor gezorgd dat tekst // die mogelijk is gerasterd tijdens de tween terugkeert naar // scherp is. force3D: auto
U kunt de globale instellen force3D waarde voor alle tweens met de defaultForce3D property geleverd door CSSPlugin:
// accepteert ook 'false' of 'auto' CSSPlugin.defaultForce3D = true;
Of u kunt dit op een tween-basis instellen in plaats van:
// houdt element gelaagd nadat tween voltooid is timeline.to (element, 1, x: 300, force3D: true); // houdt element gelaagd nadat tween voltooid is timeline.to (element, 1, x: 300, force3D: false);
Als uw animatie CSS-eigenschappen probeert te onderdrukken, moet u ervoor zorgen dat uw specifieke specificiteit niet botst met wat is gedeclareerd in uw JavaScript, anders hebben de native CSS-waarden voorrang en reageert uw animatie niet zoals verwacht.
/ * Vereist Polyman Styles * / .polyman-pad opacity: 0;
De bovenstaande CSS verbergt Polyman bij het laden van het eerste venster, dus we zien onze bebaarde kerel in eerste instantie niet zoals je zou ervaren met wat gewoonlijk wordt aangeduid als FOUT (Flash Of Unstyled Text).
Aangezien het merendeel van onze configuratie is gedefinieerd, kunnen we eindelijk beginnen met het instellen van onze tijdlijn, de SVG-paden targeten en een staffelfunctie definiëren (stagger_val) En afwerking door te definiëren hoe lang de hele animatie duurt (looptijd).
var tl = new TimelineMax (tmax_options), path = $ ('svg.polyman path'), stagger_val = 0.0125, duration = 1.25;Net als dat, en met de delicate golf van onze toverstaf en een kleine hoeveelheid eenhoornstof, passeren we alle vereiste variabelen die werden gedefinieerd als argumenten in de staggerFromTo methode!
tl.staggerFromTo (pad, duur, stagger_opts_from, stagger_opts_to, stagger_val, 0);
Altviool! In een eenvoudige rij begint de Polyman te ademen en een echt levend ding te worden (en niet echt). Best cool he?
In de volgende tutorial van onze TweenMax-serie zullen we kijken hoe je een pauzepunt op de tijdlijn kunt maken, zodat de animatie automatisch pauzeert wanneer het het gewenste punt bereikt. De methode addPause () is relatief nieuw en u kunt overal in een tijdlijn een pauze plaatsen. Het is veel nauwkeuriger dan het gebruiken van een callback die een functie oproept om de functie te onderbreken (wat je daarvoor moest doen) addPause () bestaand). Tot de volgende keer dat je goed tweent!
Een speciale dank aan de lezers die deze GreenSock-reis volgen!
