Meniul
AcasăYandex

Comparație de animație folosind CSS și JavaScript. Biblioteci JavaScript și pluginuri promițătoare pentru animație

O mică bibliotecă pentru crearea de animații Bazat pe JavaScript. Poate fi folosit pentru a anima proprietățile CSS, imaginile SVG sau atributele arborelui DOM pe o pagină web. Biblioteca vă permite să controlați toate aspectele animației și oferă multe modalități de a desemna elementele care trebuie puse în mișcare.

Aveți control complet asupra ordinii în care este redată animația și controlați modul în care animațiile diferitelor elemente sunt sincronizate între ele. Biblioteca susține totul browsere moderne, inclusiv IE10 și versiuni ulterioare.

În această serie de tutoriale, veți afla despre toate caracteristicile Anime.js și veți putea folosi biblioteca în proiectele dvs.

Notă Dacă sunteți complet nou în JavaScript, vă sugerăm să vă familiarizați cu acest limbaj de programare.

Instalarea bibliotecii

Pentru a instala, puteți utiliza comenzi npm sau bower:

Npm instalează animejs bower instalează animejs

Puteți, de asemenea, să descărcați biblioteca și să includeți sau să faceți un link către ea în proiectul dvs ultima versiune prin CDN.

După instalarea cu succes, veți putea folosi Anime.js pentru a adăuga animații interesante elementelor dvs. Sa incepem cu capabilități de bază biblioteci.

Definirea elementelor țintă

Pentru a crea o animație folosind Anime.js, apelați funcția anime() și îi transmiteți un obiect cu perechi cheie-valoare care definesc elementele și proprietățile țintă pe care doriți să le animați. Puteți folosi cuvântul cheie targets pentru a informa biblioteca ce aveți nevoie pentru a anima. Acest cuvânt cheie poate lua o valoare în diferite formate.

Selectori CSS: puteți trece unul sau mai mulți selectori ca valori pentru cuvânt cheie tinte.

Var albastru = anime(( targets: ".blue", translateY: 200 )); var redBlue = anime(( targets: ".red, .blue", translateY: 200 )); var even = anime(( targets: ".square:nth-child(even)", translateY: 200 )); var notRed = anime(( targets: ".square:not(.red)", translateY: 200 ));

În primul caz, Anime.js va anima toate elementele cu clasa albastră. În al doilea - albastru sau roșu. În al treilea caz, Anime.js va anima toți copiii chiar elemente cu clasa pătratului. Și în acest din urmă caz, biblioteca va interacționa cu toate elementele cu clasa pătrată care nu au clasa roșie.

Noduri DOM sau NodeList: De asemenea, puteți utiliza un nod DOM sau NodeList ca valoare pentru cuvântul cheie targets. Uitați-vă la un exemplu de utilizare a unui nod DOM pentru ținte.

Var special = anime(( targets: document.getElementById("special"), translateY: 200 )); var blue = anime(( targets: document.querySelector(".blue"), translateY: 200 )); var redBlue = anime(( targets: document.querySelectorAll(".red, .blue"), translateY: 200 )); var even = anime(( targets: document.querySelectorAll(".square:nth-child(even)")), translateY: 200 )); var notRed = anime(( targets: document.querySelectorAll(".square:not(.red)"), translateY: 200 ));

În primul caz, funcția getElementById() a fost folosită pentru a accesa element specific. Funcția querySelector() a fost folosită pentru a accesa un element cu clasa blue . Și funcția querySelectorAll() a fost folosită pentru a accesa toate elementele din document care se potrivesc cu un grup de selectori specifici sau, dimpotrivă, nu sunt incluse în acesta.

Există multe funcții pe care le puteți utiliza și pentru a selecta elementul țintă. De exemplu, puteți accesa elemente cu o anumită clasă folosind funcția getElementsByClassName(). Sau la elemente cu o etichetă specifică folosind funcția getElementsByTagName().

Orice funcție care returnează un nod DOM sau NodeList poate fi utilizată pentru a seta valoarea țintelor în Anime.js.

Obiect: poți folosi obiecte JavaScript ca valoare pentru obiective . Cheia acestui obiect este folosită ca identificator, iar valoarea este folosită ca număr de animat.

Apoi puteți afișa animația în interiorul altui element HTML folosind cod JavaScript suplimentar. Mai jos este un exemplu de animare a valorilor a doi chei diferite un singur obiect.

Var fișiereScanate = (număr: 0, infectate: 0); var scanare = anime(( targets: filesScanned, count: 1000, infectate: 8, round: 1, update: function() ( var scanCount = document.querySelector(".scan-count"); scanCount.innerHTML = filesScanned.count ; var infectedCount = document.querySelector(".infected-count"); infectedCount.innerHTML = filesScanned.infected; ) ));

Codul de mai sus va conduce contorul de fișiere scanate de la 0 la 1.000 și contorul de fișiere infectate de la 0 la 8. Amintiți-vă că puteți anima valori numerice doar asa. Dacă încercați să animați o cheie de la AAA la BOY, va fi afișat un mesaj de eroare.

În plus, codul a folosit funcția sună din nou tasta de actualizare, care se numește fiecare cadru în timpul animației. Aici a fost folosit pentru a actualiza numărul de fișiere scanate și infectate. Cu toate acestea, puteți merge mai departe și arătați utilizatorilor un mesaj de eroare atunci când numărul de fișiere infectate depășește un anumit prag.

Matrice: capacitatea de a specifica Matrice JavaScriptțintele vor fi utile dacă trebuie să animați o mulțime de elemente care se referă la diferite categorii. De exemplu, dacă doriți să animați un nod DOM, un obiect și o varietate de alte elemente pe baza selectoarelor CSS, puteți face acest lucru punându-le într-o matrice și apoi definind matricea ca valoare pentru ținte . Exemplul de mai jos ar trebui să clarifice lucrurile.

Var multipleAnimations = anime(( targets: , translateY: 250 ));

Ce proprietăți pot fi animate folosind Anime.js

Acum știi cum să identifici diferitele elemente care trebuie animate. Este timpul să aflați ce proprietăți și atribute pot fi animate folosind biblioteca.

Proprietăți CSS

Acestea includ, de exemplu, lățimea, înălțimea și culoarea pentru diferite elemente țintă. Valorile finale ale diferitelor proprietăți animate, cum ar fi culoarea de fundal, sunt determinate folosind lowerCamelCase. Astfel background-color devine backgroundColor . Codul de mai jos ilustrează animarea poziției obiectului din stânga și a culorii de fundal (backgroundColor) a obiectului țintă.

Var animateLeft = anime(( targets: ".square", left: "50%" )); var animateBackground = anime(( targets: ".square", backgroundColor: "#f96" ));

Proprietățile pot lua tipuri diferite valorile pe care le-ar lua folosind CSS obișnuit. De exemplu, proprietatea stângă ar putea avea următoarele valori: 50vh , 500px sau 25em . De asemenea, puteți omite unitatea de măsură după număr, dar în acest caz va deveni px în mod implicit. Acțiuni similare se poate face cu background-color , specificând culoarea ca valoare hexazecimală sau folosind codul RGB sau HSL.

Transformare CSS

Transformarea de-a lungul axelor X și Y este realizată folosind proprietățile translateX și translateY. În mod similar, puteți scala, înclina sau roti un element de-a lungul unei axe specifice utilizând proprietățile de scalare, declinare sau rotire adecvate acelei axe specifice.

Este posibil să definiți diferite unghiuri fie în grade, fie folosind proprietatea turn. O valoare de viraj de 1 corespunde la 360 de grade. Acest lucru facilitează calculele deoarece știți cât de mult să rotiți elementele în raport cu axa lor. Exemplul de mai jos arată cum să animați scalarea, tranziția sau rotația unei singure proprietăți sau a tuturor simultan.

Var animateScaling = anime(( targets: ".square", scara: 0.8 )); var animateTranslation = anime(( targets: ".square", translateX: window.innerWidth*0.8 )); var animateRotation = anime(( targets: ".square", rotire: "1turn" )); var animateAll = anime(( ținte: „.square”, scară: 0,8, translateX: window.innerWidth*0,8, rotire: „1turn” ));

Atribute SVG

Singura condiție este ca valoarea atributului să fie numerică. Capacitatea de a anima diferite atribute deschide posibilitatea de a crea unele efecte misto. Deoarece acest articol are doar scop informativ, va conține exemple simple.

Rezumat: Un exemplu simplu: metoda extincției Culoarea galbena. Animație folosind biblioteci JavaScript. Mai mult exemplu complex: Mutați și redimensionați. Tranziții CSS.

Principiul din spatele decolorării este că culoarea de fundal a elementului de decolorare este setată la galben, iar apoi, printr-o serie de pași, culoarea acestuia revine la culoarea inițială. Deci, dacă culoarea originală de fundal a fost roșie, atunci culoarea este apoi setată la galben, apoi galben-portocaliu, apoi portocaliu, apoi roșu-portocaliu și apoi roșu. Numărul de pași utilizați determină cât de ușor are loc schimbarea culorii, iar timpul dintre pași determină cât de mult continuă schimbarea culorii. Când schimbați culoarea puteți utiliza fapt util din CSS: o culoare poate fi definită ca un triplu de numere regulate sau ca un șir hexazecimal. Prin urmare, #FF0000 (culoarea roșie) poate fi definită și ca rgb(255,0,0) . Trecerea de la galben la roșu în cinci pași înseamnă, prin urmare, trecerea de la rgb(255,255,0) (galben) la rgb(255,0,0) în următorii cinci pași:

rgb(255,255,0) rgb(255,192,0) rgb(255,128,0) rgb(255,64,0) rgb(255,0,0)

Exemplu mai complex: mutarea și redimensionarea

Deși metoda de decolorare galbenă demonstrează animație, este oarecum plictisitoare. Când majoritatea oamenilor se gândesc la animație, de obicei se gândesc la mișcare. O tehnică interesantă pentru a alerta utilizatorul că ceva s-a întâmplat fără a-i întrerupe fluxul de lucru este folosirea unui mesaj fără model. În loc să afișeze un dialog ferestre de alertă() care necesită ca utilizatorul să facă clic pe OK înainte de a putea continua, plasați mesajul pur și simplu într-un div plutitor pe pagina care rămâne discret acolo până când primește confirmarea. Al doilea este suficient lucru interesant aceasta ar putea fi apoi pentru a permite utilizatorului să revină la un mesaj pentru care a confirmat că dorește să-l citească din nou. Deci, să implementăm un mesaj plutitor care, atunci când se dă clic, se prăbușește în colțul ecranului și poate fi apoi restaurat din nou când se dă clic. Puteți urmări o scurtă demonstrație a acestui „mesaj care se prăbușește” (http://dev.opera.com/articles/view/javascript-animation/moving_messages_jq.html) pentru a vă face o idee generală.

Dacă faceți ceva serios de animație sau ceva serios JavaScript, merită aproape întotdeauna folosit Biblioteca JavaScript. Acest lucru vă va permite să creați prezentarea dorită pentru utilizatori fără a fi nevoie să vă faceți griji cu privire la complexitățile matematice necesare pentru a realiza animația. (După ce ați văzut primul exemplu de mai sus, acum știți cum să faceți calcule matematiceși cum să utilizați setInterval, dar veți economisi timp și puterea proprie folosind soluții gata făcute.)

Demo-ul de mai sus funcționează biblioteca jQuery(http://jquery.com/), dar după cum am menționat, majoritatea bibliotecilor oferă un concept de animație suficient de asemănător încât ar trebui să puteți implementa partea principală folosind biblioteca preferată. În esență, trebuie să faceți următoarele:

  • Afișează un mesaj plutitor în centrul ecranului
  • Când se face clic pe:
  • Mutați poziția orizontală în poziția extremă din dreapta
  • Mutați-i poziția verticală în sus
  • Setează-i lățimea la 20 px
  • Setați-i înălțimea la 20 px
  • Faceți-i densitatea egală cu 20%, astfel încât să devină aproape transparent și ascundeți textul din el
  • Când se face clic pe această versiune „mini” a mesajului, restabiliți-o în centrul ecranului (adică, opusul a ceea ce am făcut pentru a-l comprima) și astfel încât utilizatorul să aibă o imagine clară a ceea ce sa întâmplat cu mesajul său, sărind de la dimensiunea completă Mesajele la mini-mesaj ar trebui să fie animate (astfel încât să poată vedea mesajul „micșorând” în colțul ferestrei).

    • Efectuați animație cu folosind jQuery foarte ușor: utilizați doar . animate() și furnizați cel dorit rezultat final animație (și cât timp ar trebui să ruleze):

    $(ourObject).animate(( latime: "20px", inaltime: "20px", sus: "20px", dreapta: "20px", marginRight: "0px", opacitate: "0,2" ), 300);

    Funcția ia obiectul nostru și, în 300 de milisecunde, își înlocuiește lățimea și înălțimea cu 20px, pozițiile de sus și din dreapta cu 20px, proprietatea de stil margine-dreapta cu 0px și densitatea (în browserele care acceptă densitatea imaginii) cu 20%. Atunci este doar o chestiune de programare în stil

    Paul este un avocat pentru design și performanță

    Evanghelizează Chrome și web-ul mobil în echipa de relații cu dezvoltatorii de la Google.

    Există două modalități principale de a crea animație pe Internet: cu folosind CSSși JavaScript. Pe care ar trebui să-l alegi? Acest lucru depinde de alte caracteristici ale proiectului dvs., precum și de efectele pe care încercați să le obțineți

    TL;DR
    • Utilizați animația folosind CSS pentru tranziții simple, scurte, cum ar fi comutarea stării elementelor interfața cu utilizatorul.
    • Utilizați animația JavaScript atunci când aveți nevoie de efecte complexe, cum ar fi săritul, oprirea, întreruperea, derularea înapoi sau încetinirea.
    • Dacă alegeți să animați folosind JavaScript, utilizați TweenMax sau, dacă doriți o soluție mai simplă, TweenLite.

    Cel mai animație simplă poate fi creat folosind atât CSS, cât și folosind JavaScript, cu toate acestea, cantitatea de muncă și timpul petrecut vor varia (vezi și articolul). Fiecare opțiune are propriile avantaje și dezavantaje, dar există reguli bune a urma:

    • Utilizați CSS atunci când lucrați cu stări mici, autonome ale elementelor UI. Tranzițiile și animațiile CSS sunt ideale pentru afișarea unui meniu de navigare pe partea laterală a ecranului sau pentru afișarea unui sfat instrument. JavaScript poate fi folosit pentru a controla starea, dar animația în sine va fi realizată folosind CSS.
    • Utilizați JavaScript atunci când aveți nevoie de un grad ridicat de control asupra animației dvs. Când trebuie să implementați urmărirea dinamică a poziției tactile sau o animație care trebuie oprită, întreruptă, încetinită sau pornită în direcție inversă, ar trebui să utilizați JavaScript.

    Dacă utilizați deja jQuery sau un cadru JavaScript care are funcționalitate de animație, s-ar putea să vă simțiți mai confortabil să utilizați aceste funcții decât să treceți la CSS.

    Animație cu CSS

    Animația cu CSS este, fără îndoială, cea mai mare într-un mod simplu face ceva să se miște pe ecran.

    Următorul este codul CSS care mută un element cu 100 de pixeli de-a lungul axelor X și Y. Acest lucru se face folosind Tranziții CSS, care sunt setate să ruleze în 500 ms. Când adăugați clasa mutare, valoarea proprietății de transformare se schimbă și începe tranziția.

    Caseta ( -webkit-transform: translate(0, 0); -webkit-transition: -webkit-transform 500ms; transform: translate(0, 0); tranziție: transform 500ms; ) .box.move ( -webkit-transform: translate(100px, 100px); transform: translate(100px, 100px); )

    Dacă, ca în fragmentul de mai sus, creați clase CSS separate pentru a controla animația, puteți activa și dezactiva fiecare animație folosind JavaScript:

    Box.classList.add("mutare");

    Acest lucru va permite aplicațiilor dvs. să fie foarte bine echilibrate. Accentul se poate pune pe gestionarea stării utilizând JavaScript. În caz contrar, trebuie doar să setați clasele corespunzătoare pentru elementele țintă, iar animația va fi realizată de browser. Dacă alegeți această cale, puteți primi evenimente de final de tranziție pentru element. Cu toate acestea, nu este potrivit pentru vechi versiuni de internet Explorator; versiunea 10 a fost prima care a susținut aceste evenimente. Toate celelalte browsere acceptă acest eveniment de ceva timp.

    Codul JavaScript necesar pentru a primi evenimentul de încheiere a tranziției este următorul:

    Var box = document.querySelector(".box"); box.addEventListener("transitionend", onTransitionEnd, false); funcția onTransitionEnd() ( // Gestionează finisarea tranziției. )

    Pe lângă utilizarea tranzițiilor CSS, puteți utiliza și Animație CSS, care permite un control mult mai precis asupra cadrelor cheie individuale, duratelor și trecerilor de animație.

    Notă: dacă animația este nouă pentru dvs., ar trebui să știți că cadrele cheie sunt un termen vechi folosit din zilele în care animația era desenată manual. Animatorii au creat cadre speciale pentru o piesă de acțiune numită cadre cheie. Au capturat lucruri precum partea exterioară a mișcării și apoi au desenat toate cadrele individuale dintre cadrele cheie. Astăzi, atunci când creați animații cu CSS, există un proces similar în care îi spunem browserului ce valori ar trebui să aibă. Proprietăți CSSîn anumite puncte, iar browserul completează golurile.

    De exemplu, puteți anima un pătrat folosind tranziții în același mod, dar animația va avea loc fără nicio acțiune a utilizatorului (de exemplu, făcând clic) și se va repeta la nesfârșit. În plus, puteți modifica mai multe proprietăți în același timp:

    /** * Aceasta este o versiune simplificată fără * prefixe de furnizor. Cu ele incluse * (de care veți avea nevoie) lucrurile devin mult * mai verbose! */ .box ( /* Alegeți animația */ animation-name: movingBox; /* Durata animației */ animation-duration: 1300ms; /* De câte ori dorim ca animația să ruleze */ animation-iteration-count : infinit; /* Face ca animația să se inverseze la fiecare iterație ciudată */ direcția animației: alternativă; ) @keyframes movingBox ( 0% ( transform: translate(0, 0); opacitate: 0,3; ) 25% ( opacitate: 0,9) ; ) 50% ( transforma: translate(100px, 100px); opacitate: 0,2; ) 100% ( transform: translate(30px, 30px); opacitate: 0,8; ) )

    Când creați o animație folosind CSS, definiți animația în sine independent de elementul țintă și apoi selectați animația dorită folosind proprietatea animation-name.

    Animația cu CSS este încă foarte specifică browserului, prefixul -webkit- fiind folosit pentru a o desemna în Chrome, Safari, Opera, Safari Mobile și browserul Android. ÎN Internet Explorer iar prefixele Firefox nu sunt folosite. Există multe instrumente care vă permit să creați cele necesare versiuni CSS cu prefixe, în timp ce o versiune fără prefix poate fi scrisă în fișierele sursă.

    Animație cu JavaScript

    Crearea de animații cu JavaScript este mai dificilă decât scrierea de tranziții sau animații cu CSS, dar JavaScript oferă, în general, dezvoltatorului mult mai mult oportunități ample. De obicei, utilizați funcția requestAnimationFrame și apoi determinați manual valoarea fiecărei proprietăți a elementului animat pe fiecare cadru al animației.

    Notă: Pe Internet puteți găsi publicații de cod în care funcția setInterval sau setTimeout este folosită pentru animație. Aceasta este o soluție teribilă, deoarece animația nu va fi sincronizată cu frecvența ecranului și, prin urmare, există o șansă foarte mare de jitter și abandon. Nu este recomandabil să folosiți un astfel de cod în nicio situație și, în schimb, este recomandat să folosiți funcția requestAnimationFrame, care este sincronizată corespunzător.

    Caseta funcție () ( var animationStartTime = 0; var animationDuration = 500; var target = document.querySelector(".box"); this.startAnimation = function() ( animationStartTime = Date.now(); requestAnimationFrame(update); ) ; function update() ( var currentTime = Date.now(); var positionInAnimation = (currentTime - animationStartTime) / animationDuration; var xPosition = positionInAnimation * 100; var yPosition = positionInAnimation * 100; target.style.transform = "translate(" + xPosition + "px, " + yPosition + "px)"; if (positionInAnimation 1000 / 50 = 20ms var timer = setInterval(function())( // scade valoarea curentă a opacității op -= d0; // setează opacitatea la elementul DOM elem .style.opacity = op; // reduce numărul de pași de animație rămași--; // dacă animația este terminată if(pași