Share
Ce veți creaÎn zilele vechi ale animației tweening a fost un termen folosit pentru a descrie o secvență cadru după cadru sau ceea ce uneori se numește "inter-intersecție". Este locul în care o singură mișcare duce în următoarea, pentru a crea o mișcare fluidă. Pentru cei care au parul gri, puteți aminti Flash; o aplicație care folosește acest termen atunci când se referă la mișcările de cadre. Să examinăm câteva exemple și să încercăm să facem acest lucru cu un bun colegiu de modă.
Pentru ambele exemple din acest tutorial, voi încărca TweenMax.min.js care ne va oferi acces la TimelineMax și la toate celelalte instrumente de bază uimitoare pe care GSAP le poate oferi. Dacă vă gândiți la grinderul TimelineMax am discutat despre încărcarea TweenMax.min.js deoarece este mai convenabil, plus acest fișier conține aproape tot ceea ce vom avea nevoie (și ceea ce este recomandat de GreenSock 99% din timp).
TweenMax extinde TweenLite, adăugând multe funcții utile (dar neesențiale), cum ar fi repeta(), repeatDelay (), yoyo (), updateTo (), și altele. TweenMax a fost construit pentru comoditate, oferind un singur fișier JavaScript care conține tot ceea ce veți avea nevoie de obicei pentru animarea elementelor DOM. Este, în esență, permite autorilor să specifice mișcările unice, în timp ce TimelineMax va accepta metode înlănțuite pentru a crea un set mai complex de tweens / secvențe.
Încărcătoarele sunt acele obiecte date utilizatorilor atunci când așteaptă încărcarea unui proces. Ele ne dau puterea de a explora elemente mici, de dimensiuni mici, care pot avea interacțiuni complexe sau chiar simpliste - plus că sunt o explozie de făcut.
Uitați-vă rapid la demo-ul "String of Pearls":
Să rupem secvența în jos pentru o mai bună înțelegere a modului în care funcționează întregul lucru "tweening".
Pentru a crea această secvență, va fi necesară utilizarea metodei staggerTo. Dacă nu vă amintiți ce este o metodă, vă încurajez să opriți acest minut și să citiți tutorialul meu despre mecanică.
Potrivit documentației GreenSock, staggerTo () metodă:
"Tweens o serie de obiective la un set comun de valori de destinație.
În cazul nostru, aceste ținte multiple vor fi fiecare dintre cercurile din cadrul întregului SVG.
Accentsconagua
staggerTo va accepta selectorul pe care îl folosim pentru cercuri (în acest caz cerc).Acest lucru ar avea ca rezultat următoarele: presupunând cerc conține trei obiecte ...
timeline.staggerCo (cercuri, 15, x: 0, 0.2) // cercul 1 incepe la ora 0 // cercul 2 incepe la ora 0.2 // cercul 3 incepe la ora 0.4
Pentru a începe corect, va trebui să definim o nouă cronologie și câteva setări pentru configurația noastră.
var loader = noua TimelineMax (repeat: -1, yoyo: true), cercuri = $ ('svg circle'), stagger_options = opacitate: 0, y: -800, usurinta: Elastic.easeInOut;Pentru a repeta această cronologie în direcția inversă, folosesc YOYO cheie și setarea valorii acesteia la Adevărat. Din nou, acest lucru va determina secvența noastră să se joace în direcția opusă odată ce animația atinge cadrul final. Declanșarea animației va necesita direcționarea fiecărui cerc în interiorul SVG și exact de ce vom avea nevoie de o referință utilizând puterea jQuery.
Există o serie de modalități menționate de doc-uri pentru a trece selectorii (nu ezitați să citiți mai multe despre asta aici). Pentru acest exemplu, voi selecta toate cercurile folosind sintaxa tipică a selectorului jQuery. De asemenea, este puțin mai rapid să stocăm referința într-o variabilă pentru reutilizare mai târziu, prin urmare cercuri = $ ('svg cerc').
stagger_options variabila este un obiect literal care conține proprietățile pentru a da animației sale viața. Mișcăm obiectele folosind y cheie deoarece GSAP CSSPlugin convertește inteligent transforma valori pentru matrice echivalente și, în cele din urmă, accelerează lucrurile pentru noi. Există o întreagă listă de proprietăți de transformare cu o scurtă durată care sunt mult superioare și mult mai ușor de utilizat comparativ cu transformările CSS tipice:
| CSS | GSAP |
|---|---|
translateX () | X |
translateY () | y |
translateZ () | z |
roti() | rotație |
rotateY () | rotationY |
rotateX () | rotationX |
scaleX () | scaleX |
scaleY () | scaleY |
skewX () | skewX |
skewY () | skewY |
De asemenea, putem controla relaxarea (simțul animației) și putem trece în diferite tipuri de mișcare. Pentru iubitorii de viziune de acolo puteți verifica vizualizatorul de ușurință de către GreenSock pentru a obține o mai bună înțelegere a nenumăratelor facilități disponibile.
Piesa finală a acestei creații este atașarea staggerTo metoda pentru cronologia noastră și introducerea variabilelor definite anterior și în ordinea corectă pentru această metodă particulară (elemente, durată, opțiuni, sumă de eșalonare).
loader.staggerPentru (cercuri, 0.875, stagger_options, 0.025);
Dacă vă este foame pentru a crea o altă secvență odată ce secvența de eșalonare este completă, puteți cu siguranță să lanțați o altă metodă, cum ar fi de la catre ca astfel:
loader.staggerPentru (cercuri, 0.875, stagger_options, 0.025). de la T (Obiectiv: Obiect, Durată: Număr, de la Var: , toVars: );
Să facem o încercare cu un SVG pe care îl numesc "Polyman". Recent am scris un articol pentru CSS-Tricks privind animarea poligoanelor și am decis să folosesc exemplul similar pentru un alt exercițiu de îmbunătățire aici. Să încercăm să folosim staggerFromTo () metodă și să vedem ce fel de magie putem face.
Următoarea ieșire SVG (XML) este ușor abreviată de dragul discuției, dar după cum veți vedea, SVG conține câteva etichete; specific
Pentru setarea inițială a cronologiei, vom defini opțiunile noastre globale folosind un obiect literal care va întârzia animația inițială, va repeta secvența, va întârzia animația la repetare și va reda animația în sens invers.
var tmax_options = întârziere: 0.25, repet: -1, repeatDelay: 0.25, yoyo: true;
Următoarea este o proprietate destul de nouă și nedocumentată care forțează transformarea valorilor care trebuie plasate în atributul SVG transformare (spre deosebire de un stil CSS).
CSSPlugin.useSVGTransformAttr = true;
Această proprietate a fost adăugată pentru a face lucrurile mai ușor pentru dezvoltatori pentru a obține o problemă în Safari în cazul în care combinarea opacitate și transformatele (precum transformă: scară () de exemplu) ar produce un rezultat ciudat. De la 1.16.0 useSVGTransformAttr este setat sa Adevărat în mod automat și în mod special orientate spre pal Safari, astfel încât nu mai este necesar pentru autorii să definească așa cum am mai sus.
Din moment ce staggerFromTo metoda acceptă argumente separate pentru din și la Pozițiile îmi place să configurați ambii literali de obiecte în afara metodei, în scopuri organizaționale și de citire.
var stagger_opts_from = opacitate: 0, scară: 0, transformOrigin: 'centru centru'; var stagger_opts_to = opacitate: 1, scară: 1, ușurință: Elastic.easeInOut, force3D: true;
Definim două literali obiect, pentru că avem nevoie de toate noastre din și la proprietati definite pentru ca aceasta animatie sa-si faca treaba. Dacă nu este clar că mergem de la valorile definite în noastre stagger_opts_from și se încheie cu valorile stabilite în cadrul stagger_opts_to.
force3D forțe cheie GSAP de a aplica o valoare 3D la transformarea elementului; sens matrix3d () in loc de matrice(), sau translate3d () in loc de Traduceți(). În mod obișnuit, browserul pune elementul vizat pe stratul propriu de compoziție, permițând actualizări mai eficiente cu ajutorul animațiilor.
În mod implicit force3D este setat sa auto (de la 1.15.0), deci nu este de fapt necesar să-l utilizați deloc (cu excepția cazului în care doriți în mod specific comportamentul lui Adevărat in loc de auto pentru asta).
// stratifică țintele la începutul tween-ului și // le păstrează astfel folosind o matrice 3D unde este cazul // (pentru transformări 2d și 3d). force3D: true // stratifică țintele de la începutul tween-ului și // de asemenea le deformează (trecând la o matrice 2D sau // transformă) la sfârșitul tween-ului. Acest lucru vă împiedică // să creați și să atârnați peste sute de elemente stratificate // (care pot degrada performanța) și, de asemenea, să vă asigurați că textul // care poate a fost rasterizat în timpul revenirii Tween la // fiind ascuțit. force3D: auto
Puteți seta valoarea globală force3D valoare pentru toate tweens folosind defaultForce3D proprietate oferită de CSSPlugin:
// acceptă și "false" sau "auto" CSSPlugin.defaultForce3D = true;
Sau puteți seta acest lucru într-o bază per-tween în schimb:
// va păstra elementul stratificat după ce tween-ul este complet timeline.to (element, 1, x: 300, force3D: true); // va păstra elementul stratificat după ce tween-ul este complet timeline.to (element, 1, x: 300, force3D: false);
Dacă animația dvs. încearcă să suprascrie proprietățile CSS, trebuie să vă asigurați că specificul dvs. nu se ciocnește cu ceea ce este declarat în JavaScript, altfel valorile CSS native vor avea prioritate și animația dvs. nu va reacționa conform așteptărilor.
/ * Stilele Polyman necesare * / calea polimer opacitate: 0;
CSS de mai sus va ascunde Polyman la încărcarea inițială a ferestrei, astfel încât să nu vedem inițial bărbatul nostru cu barbă la fel ca și cum ați experimenta cu ceea ce este denumit frecvent FOUT (Flash Of Unstyled Text).
Deoarece majoritatea configurației noastre este definită, putem începe în sfârșit să ne stabilim cronologia, orientându-ne pe căile SVG, definind o valoare de eșalonare (stagger_val) Și terminând definind durata cât va dura întreaga animație (durată).
var tl = noua TimelineMax (tmax_options), path = $ ('calea svg.polyman'), stagger_val = 0.0125, duration = 1.25;La fel ca și cu un val delicios al baghetei noastre magice și o presiune ușoară de praf de unicorn, trecem toate variabilele necesare care au fost definite ca argumente în staggerFromTo metodă!
tl.staggerFromTo (cale, durată, stagger_opts_from, stagger_opts_to, stagger_val, 0);
Viola! Într-o linie simplă, Polyman începe să respire și să devină un lucru real (nu chiar). Destul de cool?
În următorul tutorial al seriei TweenMax vom examina modul de creare a unui punct de pauză pe cronologie, astfel încât animația să se oprească automat când atinge punctul dorit. Metoda addPause () este relativ nouă și vă permite să plasați o pauză oriunde într-o cronologie. Este mult mai precis decât folosirea unui apel invers care solicită o funcție pentru a întrerupe funcția (ceea ce a trebuit să faceți înainte de addPause () existent). Până la data viitoare fericire!
O mulțumire deosebită pentru acei cititori care au urmat această călătorie GreenSock!
