Share
Ce este TimelineMax? Care este diferența față de alte biblioteci ale platformei de animație GreenSock (GSAP)? De ce aș avea nevoie de TimelineMax peste TimelineLite? Cum fac să înțeleg parametrii pentru TimelineMax? Dacă vă aflați întrebând oricare dintre aceste întrebări, atunci ați ajuns la locul potrivit.
Bine ați venit la grund pentru o serie Tuts + care discută TimelineMax de GreenSock. Pregătește-te pentru o serie explozivă, care vă ajută să vă mutați într-o animație profesionistă.
TimelineMax este un instrument de secvențiere JavaScript care acționează ca un container pentru tweens și alte linii de timp, făcând mai ușor controlul acestora în ansamblul lor și gestionarea precisă a timpului lor. TimelineMax oferă metode pentru a permite accesul la mai multe aspecte ale animației dvs. De asemenea, poate ajusta dinamic viteza cronologică la timpul de execuție, plus mult, mult mai mult.
Notă: tweening este o abreviere de inbetweening; crearea cadrelor între statele dino secvență de animație.
TimelineMax extinde TimelineLite, oferind exact aceeași funcționalitate, împreună cu funcții suplimentare (dar care nu sunt esențiale), cum ar fi:
Accentsconagua
repetarepeatDelayYOYOcurrentLabel ()tweenTo ()tweenFromTo ()getLabelAfter ()getLabelBefore ()getActive () TimelineMax vă permite, ca autor, puterea de a face tweens să se suprapună pe cronologie cât doriți. Ca pro animație, aveți control complet asupra locului în care tweens-urile sunt plasate pe cronologie. Cele mai multe alte instrumente de animație pot executa în primul rând un element de bază unul dupa altul secvențializare, dar nu poate permite ca tweens să se suprapună. Imaginați-vă că ați adăugat un tween care mișcă un obiect și doriți ca acesta să înceapă să se estompeze cu 0,5 secunde înainte de sfârșitul acelui tween? Cu TimelineMax este mult mai curat, plus extrem de robust pentru a face tot ce se întâmplă.
Pentru comoditate, pluginurile majore cum ar fi CSSPlugin (pentru furnizarea prefixelor furnizorilor CSS), RoundPropsPlugin, DirectionalRotationPlugin, AttrPlugin și BezierPlugin sunt toate incluse în TweenMax și TimelineMax. Din moment ce TweenMax vă va oferi TimelineMax și toate celelalte bunuri enumerate anterior, GreenSock recomandă utilizarea TweenMax pentru majoritatea cazurilor de utilizare. Se încarcă TweenMax este mult mai convenabil, deoarece un fișier conține destul de mult tot ce aveți nevoie.
Pentru a începe, va trebui să obțineți scriptul TweenMax și să îl încărcați în documentul dvs. HTML anterior la scriptul personalizat de animație. Norocos pentru noi CDNJS are o copie disponibila pentru noi (exista si unul pe GitHub).
TimelineMax permite opțiuni personalizate de configurare prin utilizarea unui obiect literal. Să explorăm cum arată.
TimelineMax (vars: )
Partea pe care o vedeți folosind arcușurile cotitură este obiectul literal care va menține configurația noastră. Asta înseamnă că putem introduce valoare cheie împerecherea în acele bretele pentru a defini modul în care se va comporta cronologia noastră. Întreaga linie TimelineMax (vars: ) este ceea ce se face referire în documentele TimelineMax ca "Constructor".
Iată întreaga configurare TimelineMax cu fiecare tastă, având valoarea implicită. Plasați acest drept în partea de sus a fișierului de animație JavaScript (pe care l-am denumit "my-timelinemax-animation.js" în exemplul de mai sus). Vom lista doar întreaga config aici, pentru a putea vedea varietatea de opțiuni de configurare pe care TimelineMax le oferă. În mod obișnuit, obiectul dvs. de configurare va conține numai proprietățile necesare pentru ajustări. Puteți citi mai multe despre aceste opțiuni în documentația TimelineMax.
var tmax_options = întârziere: 0, pauză: false, onComplete: funcție () console.log ('animația este completă'); , peCompleteScope: , tweens: [], stagger: 0, aliniați: 'normal', useFrames: false, onStart: function () console.log ('la start numit'); , onStartScope: , peUpdate: function () console.log ('la actualizare numit'); , onUpdateScope: , peRepeat: function () console.log ('pe repetare numit'); , peRepeatScope: , peReverseComplete: functie () console.log ('in reverse complete'); , peReverseCompleteScope: , autoRemoveChildren: false, smoothChildTiming: false, repeat: 0, repeatDelay: 0, yoyo: false, onCompleteParams: [], onReverseCompleteParams: [], onUpdateParams: ]; Acum, dacă aveți config-ul în loc și înțelegeți opțiunile lui, puteți trece configul obiectului obișnuit config la TimelineMax () constructor, deci adăugați următoarele în partea de jos a fișierului:
var tmax_tl = noua TimelineMax (tmax_options);
Tweens sunt create folosind metode cum ar fi la(), din() și staggerFrom () doar pentru a numi câteva. După cum ați văzut anterior, am luat obiectul de opțiuni și l-am trecut ca argument pentru constructorul TimelineMax. Acum vom avea nevoie să mutați câteva obiecte pentru a vă uda picioarele. Din motive de simplitate, hai să mutăm două cercuri din stânga și din partea de sus a ferestrei de vizualizare:
Verifică JS din exemplul de mai sus pentru a vedea cum se obține efectul. După cum am menționat anterior, am configurat constructorul TimelineMax pentru scena de mai sus și am trecut în literal obiect care conține opțiunile cronologiei:
var tl = noua TimelineMax (tmax_options)
Fiecare cerc conține o id pentru mine să le menționez prin:
var tl = noua TimelineMax (tmax_options), circle_top = $ ('# cerc-top'), circle_bottom = $ ('# cerc-jos'); și apoi la() metoda este utilizată pentru a controla conturul.
tl.to (circle_top, 1, stânga: 100) .pentru (circle_bottom, 1, top: 100);
În la() spunem în mod eficient că "utilizați elementul care a trecut ca primul argument și mutați-l din stânga 100px. Apoi utilizați la() metoda înlănțuită după prima noastră la() metoda de a face același lucru, dar mutați acel element din top 100px. "
Rețineți că cercul care se mișcă din partea de sus este declanșat după ce cercul care se mișcă din stânga are terminat mișcarea sa (tween). Vom învăța în tutorialele viitoare cum să controlați elementele în momente diferite și să le deplasați viteza de-a lungul liniei de timp utilizând poziţie parametru.
Dacă doriți să treceți înainte în această călătorie de animație, nu ezitați să mergeți la documentația de pornire a GreenSock. Rămâi acordat pentru următoarea din seria acestei aventuri de animație, în care eu acoperă lucruri precum etichete, offseturi, pauze, argumente și învățând cum să optimizați opțiunile la unsprezece. Pana data viitoare!
