Share
Primul tutorial al seriei sa axat pe furnizarea unei introduceri prietenoase pentru începători în biblioteca KUTE.js. În acest tutorial, am animat doar opacitate și rotateZ proprietate pentru elementele noastre. În acest tutorial, veți învăța cum să animați restul proprietăților CSS utilizând KUTE.js.
Unele dintre aceste proprietăți vor necesita încărcarea pluginului CSS, în timp ce altele pot fi animate utilizând motorul de bază propriu-zis. Ambele scenarii vor fi discutate separat în tutorial.
Motorul de bază KUTE.js poate anima numai cele mai obișnuite proprietăți ale modelului cutiei: lăţime, înălţime, top, și stânga. Va trebui să utilizați pluginul CSS pentru a anima aproape toate celelalte proprietăți ale modelului cutiei. Iată un exemplu care animă poziția de sus, lățimea și înălțimea cutiilor noastre din tutorialul anterior:
var animateTop = KUTE.allFromTo (Boxurile, top: 0, top: 100, offset: 100); var animateA = KUTE.fromTo (casetaA, înălțimea: 100, height: 175); var animateB = KUTE.fromTo (cutieB, lățimea: 100, lățimea: 200);
S-ar putea să fi observat că am folosit-o allFromTo () pentru a anima proprietatea de top a tuturor cutiilor. Cu toate acestea, am folosit de la catre() pentru a anima cutii individuale. Trebuie să vă amintiți că cutiile rămân în starea lor finală odată ce animația se termină.
Cu ajutorul pluginului CSS, veți putea anima margine, umplutură, și lățimea graniței de asemenea. Odată ce ați inclus pluginul în proiect, restul procesului este exact același.
Puteți anima aproape toate proprietățile de transformare menționate în spec. Cu ajutorul motorului de bază propriu-zis. Nu este necesar să încărcați pluginul CSS în acest caz.
Puteți anima traducerea elementului în spațiul 2D folosind Traduceți. În mod similar, puteți utiliza translateX, translateY, și translateZ pentru a anima elementele de-a lungul axelor respective. Pentru translateZ proprietatea de a avea orice efect, va trebui să setați și o valoare pentru parentPerspective proprietate. Iată un exemplu:
Accentsconagua
var animateAll = KUTE.allFromTo (Boxurile, translateY: 0, translateY: 100, offset: 1000); var animateA = KUTE.fromTo (casetaA, translateZ: 0, translateZ: 50, parentPerspectivă: 100, parentPerspectiveOrigin: "0% 0%"); var animateB = KUTE.fromTo (casetaB, translateX: 0, translateX: -200); startButton.addEventListener ("faceți clic", funcția () animateAll.start (); animateA.start (); animateB.start ();, false);Dacă faceți clic pe Începeți animația și observați îndeaproape animația, veți vedea că cutia roșie traduce mai întâi -200 în direcția X. După aceasta, se mișcă în poziția inițială și începe să traducă în direcția Y. Motivul pentru cutia de animat translateX în primul rând, am adăugat o întârziere pentru translateY animație folosind ofset proprietate.
La fel ca și traducerea, puteți efectua și rotații de-a lungul unei axe specifice, folosind roti, rotateX, rotateY, și rotateZ proprietăți. De cand rotateX și rotateY sunt rotații 3D, va trebui să utilizați perspectivă proprietate pentru animația de rotație să funcționeze așa cum era de așteptat. Următorul exemplu arată cum se utilizează perspectivă proprietatea afectează animația generală pentru aceste două proprietăți.
var animateAll = KUTE.allFromTo (Boxurile, rotate: 0, rotate: 360, offset: 1000); var animateA = KUTE.fromTo (casetaA, rotateY: 0, rotateY: 180, perspective: 100); var animateB = KUTE.fromTo (casetaB, rotateY: 0, rotateY: -180); startButton.addEventListener ("faceți clic", funcția () animateAll.start (); animateA.start (); animateB.start ();, false);În exemplul de mai sus, caseta A și caseta B își încep rotația de-a lungul axei Y în același timp, dar animația rezultată este foarte diferită din cauza perspectivă proprietate. S-ar putea să fi observat că cutia portocalie nu efectuează rotirea în jurul centrului, care a fost aplicată folosind animateAll. Acest lucru se datorează faptului că toate animațiile au o durată de 500 de milisecunde în mod prestabilit, iar noi aplicăm ambele animateAll și animateA pe cutie portocalie în același timp.
De cand animateA se aplică după animateAll, animația sa are prioritate animateAll. Veți vedea rotația obișnuită folosind animateAll este încă aplicată pe cutia portocalie odată ce creșteți durata de animație. Cu alte cuvinte, nu puteți anima diferite proprietăți de transformare utilizând mai multe obiecte tween în același timp. Toate proprietățile de transformare pe care doriți să le animați ar trebui specificate într-un singur obiect tween. Exemplul următor ar trebui să clarifice:
// Aceasta nu va funcționa așa cum era de așteptat var translateAll = KUTE.allFromTo (Boxes, translateY: 0, translateY: 100, offset: 1000); var rotateAll = KUTE.allFromTo (Boxurile, rotate: 0, rotate: 360, offset: 1000); startButton.addEventListener ("click", functie () translateAll.start (); rotateAll.start ();, false); // Aceasta va funcționa așa cum se aștepta var rtAll = KUTE.allFromTo (Boxes, translateY: 0, rotate: 0, translateY: 100, rotire: 360, offset: 1000); startButton.addEventListener ("faceți clic pe", funcția () rtAll.start ();, false);După cum am menționat mai devreme, nu toate proprietățile CSS pot fi animate folosind doar motorul KUTE.js de bază. Trebuie să utilizați un plugin suplimentar CSS pentru a anima proprietăți precum umplutura, marginea, poziția de fundal a imaginilor și alte proprietăți legate de graniță. Deci, înainte de a încerca oricare dintre exemplele din această secțiune, trebuie să includeți plugin-ul în proiectul dvs..
Odată ce ați inclus plugin-ul, veți putea să animați border-radius utilizarea proprietății borderRadius. De asemenea, puteți anima întregul colț border-radius valorile individuale folosind borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, și borderBottomRightRadius. Iată un exemplu care arată animația în acțiune.
Dacă faceți clic pe Începeți animația , veți observa că raza de margine din stânga sus pentru caseta roșie și galbenă este animată după o întârziere. Acest lucru se datorează faptului că ofset proprietate. Restul razei sunt animate de îndată ce faceți clic pe buton. Exemplul de mai sus a fost creat folosind următorul cod:
var animateAll = KUTE.allFromTo (Boxurile, borderTopLeftRadius: '0%', borderTopLeftRadius: '100%', offset: 1000); var animateA = KUTE.fromTo (casetaA, borderTopRightRadius: '0%', borderTopRightRadius: '100%'); var animateB = KUTE.fromTo (casetaB, borderBottomLeftRadius: '0%', borderBottomLeftRadius: '100%'); var animateC = KUTE.fromTo (cutieC, borderBottomRightRadius: '0%', borderBottomRightRadius: '100%'); startButton.addEventListener ("click", functie () animateAll.start (); animateA.start (); animateB.start (); animateC.start ();; false);Nu am legat împreună obiectele tween, deci toate animațiile încep deodată de data asta. Puteți, de asemenea, să animați culoarea diferitelor margini într-un mod similar folosind borderColor, borderTopColor, borderLeftColor, borderBottomColor, și borderRightColor.
În acest tutorial, am învățat despre diferite proprietăți CSS care pot fi animate cu și fără utilizarea pluginului CUTE.js CSS. Dacă aveți întrebări, vă rugăm să ne anunțați în comentarii.
Următorul tutorial va acoperi diferite animații care pot fi create utilizând pluginul KUTE.js SVG.
