Comparație de animație folosind CSS și JavaScript. Animații CSS3 și noua metodă javascript Animate().
Partea finală va descrie diferitele funcții de apel invers utilizate pentru a efectua funcții în funcție de progresul animației. Aproape fiecare exemplu din articolele anterioare a folosit proprietăți CSS pentru a arăta cum funcționează diverse metode si parametrii. S-ar putea să aveți impresia că Anime.js este mai potrivit pentru animarea proprietăților CSS. În acest tutorial veți afla că poate fi folosit și pentru a anima fișiere SVG.
În cele trei articole anterioare, am examinat multe dintre funcțiile bibliotecii Anime.js. Puteți învăța cum să selectați elementele țintă; despre tipurile de parametri care sunt utilizați pentru a controla întârzierea și durata animației; c - cum să aveți mai mult control asupra valorilor proprietăților individuale.
Funcții de apel invers
Apelurile inverse sunt folosite pentru a efectua funcții bazate pe progresul animației. Există 4 funcții în Anime.js sună din nou: începe , rulează , actualizează și completează . Fiecare dintre ei intră în fugă anumit timpși ia ca argument un obiect de animație.
Funcția begin() este apelată când începe animația. Aceasta înseamnă că, dacă animația are un parametru de întârziere cu o valoare de 800 de milisecunde, atunci begin() nu va fi apelat decât după 800 de milisecunde. Puteți verifica dacă o animație a început sau nu folosind funcția animationName.begin, care returnează true (started) sau false (nu a început).
Run este folosit pentru a executa o funcție la fiecare cadru după începerea animației. Dacă trebuie să executați o funcție la fiecare cadru de la începutul animației, indiferent de parametrul de întârziere, atunci utilizați funcția de actualizare callback.
Funcția de apel invers complet este similară cu începe, doar că este apelată după sfârșit. Pentru a verifica dacă animația s-a finalizat sau nu, utilizați animationName.complete , la fel ca cu begin .
Am folosit funcția de actualizare a apelului înapoi în acea zi pentru a actualiza numărul de fișiere scanate și infectate. În acest articol vom extinde exemplul de scanare și veți vedea cum funcționează toate funcțiile de apel invers.
Var fișiereScanate = (număr: 0, infectate: 0); var scanCount = document.querySelector(".scan-count"); var infectat = document.querySelector(".infected-count"); var scanare = anime(( targets: filesScanned, autoplay: false, count: 100, infectate: 8, delay: 1000, duration: 2000, easing: "linear", round: 1, update: function(anim) ( if (anim) .ora curentă< 1000) { document.querySelector(".update-cb").innerHTML = "Creating an Index..."; } }, begin: function() { document.querySelector(".begin-cb").innerHTML = "Starting the Scan..."; }, run: function() { scanCount.innerHTML = filesScanned.count; infected.innerHTML = filesScanned.infected; }, complete: function() { document.querySelector(".complete-cb").innerHTML = "Scan Complete..."; } });
În exemplul de mai sus, am adăugat în mod intenționat o întârziere a animației, astfel încât să putem vedea diferențele în timpul de execuție a diferitelor funcții de apel invers. Funcția de actualizare callback începe să se execute imediat după ce obiectul de animație este creat.
Animația în sine începe cu o întârziere de 1000 de milisecunde și în acest moment se declanșează funcția de început, care arată utilizatorului mesajul „Starting the Scan...”. În același timp, rularea începe să se execute și să se actualizeze valori numerice obiect după fiecare cadru. După ce animația se termină, apelarea completă afișează mesajul „Scanare finalizată...”.
Funcții de netezime
Funcțiile de netezime sunt folosite pentru a controla tranziția valoarea initiala proprietăți în final. Aceste funcții pot fi definite folosind parametrul de relaxare, care poate lua valori fie ca șiruri de caractere, fie ca coordonate personalizate ale curbei Bezier (ca o matrice).
Există 31 de funcții de netezire încorporate. Una dintre ele se numește liniară, celelalte 30 constau din diferite variante de easeIn, easeOut și easeInOut. Clasa elastică definește trei funcții de netezime: easeInElastic, easeOutElastic și easeInOutElastic. Le puteți controla folosind parametrul de elasticitate. Valoarea acestui parametru poate fi doar în intervalul de la 0 la 1000.
Utilizarea easeIn face ca valoarea să se schimbe mai rapid, începând de la zero. Aceasta înseamnă că se va schimba încet la început și rapid în cele din urmă. Rata de schimbare este zero la început și 1000 la sfârșit.
Funcția easeOut încetinește schimbarea valorii pornind de la viteza maximă.
easeInOut crește viteza cu care se schimbă valorile la început și le încetinește la sfârșit. Aceasta înseamnă că la mijlocul animației viteza va fi cea mai rapidă. Următoarea casetă arată diferența dintre aceste funcții de netezire:
Vă puteți crea propriile caracteristici de relaxare folosind anime.easings. Mai jos este un exemplu de creare funcții personalizate finete:
Anime.easings["tanCube"] = function(t) ( return Math.pow(Math.tan(t * Math.PI / 4), 3); ) anime.easings["tanSqr"] = function(t) ( return Math.pow(Math.tan(t * Math.PI / 4), 2); ) var tanCubeSequence = anime(( targets: ".tan-cube", translateX: "75vw", duration: 2000, easing: " tanCube", redare automată: fals )); var tanSqrSequence = anime(( targets: ".tan-sqr", translateX: "75vw", duration: 2000, easing: "tanSqr", autoplay: false ));
Animații bazate pe fișiere SVG
În toate animațiile legate de mișcare care au fost create până în acest moment, elementele țintă s-au deplasat în linie dreaptă. În Anime.js puteți muta elemente pe căi complexe SVG cu o cantitate mare curbe cu capacitatea de a controla poziția și unghiul elementelor animate de pe contur. Pentru a muta un element de-a lungul axei X pe o cale, utilizați path("x") . În mod similar, elementele pot fi mutate de-a lungul axei Y folosind path("y").
Dacă conturul nu este reprezentat ca o linie dreaptă, atunci va forma aproape întotdeauna un unghi relativ la principal linie orizontală. Când rotiți orice element de animație necircular, imaginea de ansamblu va arăta mai naturală dacă elementul se mișcă de-a lungul colțului traseului. Acest lucru se poate face prin setarea proprietății rotire la path("angle") . Mai jos este un exemplu de cod care anima patru elemente cu sensuri diferite netezime de-a lungul conturului SVG:
Var cale = anime.path("cale"); var easings = ["liniar", "easeInCubic", "easeOutCubic", "easeInOutCubic"]; var motionPath = anime(( targets: ".square", translateX: path("x")), translateY: path("y"), rotate: path("angle"), easing: function (el, i) ( return easings[i]; ), durata: 10000, buclă: adevărat ));
În insertul de mai jos, puteți vedea că pătratul roșu cu funcția easeInCubic se mișcă cel mai lent la început, dar cel mai rapid la sfârșit. Situația este similară și în cazul pătratului portocaliu - se mișcă cel mai repede la început, dar cel mai lent la sfârșit.
Este posibil să animați transformările diferitelor forme SVG de la una la alta folosind Anime.js. Singura condiție pentru transformarea formelor este să existe un număr egal de puncte de ancorare. Aceasta înseamnă că triunghiurile pot fi convertite doar în alte triunghiuri, patrulaterele în patrulatere și așa mai departe. Încercarea de a transforma elemente cu un număr inegal de puncte de ancorare va duce la o schimbare drastică a formei. Mai jos este un exemplu de transformări triunghiulare:
Var morphing = anime(( ținte: "poligon", puncte: [ ( valoare: "143 31 21 196 286 223"), ( valoare: "243 31 21 196 286 223" ), ( valoare: "243 31 121 196 286" 223" ), ( valoare: "243 31 121 196 386 223" ), ( valoare: "543 31 121 196 386 223" ) ], relaxare: "liniar", durata: 4000, direcție: "alternativ", buclă: adevărat ));
Una dintre cele mai efecte interesante Anime.js este capacitatea de a crea desene linii. Tot ce trebuie să faceți este să furnizați bibliotecii conturul pe care doriți să îl utilizați pentru desenul liniilor; furnizați alți parametri prin care sunt controlate durata, întârzierea și netezimea. Exemplul de mai jos a folosit apelarea completă pentru a face umplerea graficului de ancorare Font Awesome în galben.
Var lineDrawing = anime(( targets: "cale", strokeDashoffset: , easing: "easeInOutCubic", duration: 4000, complete: function(anim) ( document.querySelector("path").setAttribute("fill", "yellow" ); ) ));
Folosind cunoștințele despre toate conceptele pe care le-ați învățat, veți putea crea desene mai complexe cu mult mai multe control mai bun asupra modului în care sunt desenate. Mai jos este un exemplu de redare a unui nume folosind SVG:
Var letterTime = 2000; var lineDrawing = anime(( targets: "cale", strokeDashoffset: , easing: "easeInOutCubic", duration: letterTime, delay: function(el, i) ( return letterTime * i; ), begin: function(anim) ( var letters = document.querySelectorAll ("calea"), i; pentru (i = 0; i< letters.length; ++i) { letters[i].setAttribute("stroke", "black"); letters[i].setAttribute("fill", "none"); } }, update: function(anim) { if (anim.currentTime >= letterTime) ( document.querySelector(".letter-m").setAttribute("fill", "#e91e63"); ) if (anim.currentTime >= 2 * letterTime) ( document.querySelector(".letter-o ").setAttribute("fill", "#3F51B5"); ) if (anim.currentTime >= 3 * letterTime) ( document.querySelector(".letter-n").setAttribute("fill", "#8BC34A" ); ) if (anim.currentTime >= 4 * letterTime) ( document.querySelector(".letter-t").setAttribute("fill", "#FF5722"); ) if (anim.currentTime >= 5 * letterTime ) ( document.querySelector(".litera-y").setAttribute("fill", "#795548"); ) ), redare automată: false ));
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<= 1) requestAnimationFrame(update); } } var box = new Box(); box.startAnimation();
Acest cod devine foarte complex și dificil de gestionat dacă încercați să acoperiți mai multe cazuri, așa că în general este recomandat să alegeți una dintre numeroasele biblioteci de animații JavaScript disponibile. Dacă utilizați deja jQuery în proiectul dvs., atunci probabil că nu ar trebui să treceți la alte opțiuni. Utilizați funcțiile .animate(). Dacă aveți nevoie de o bibliotecă specializată, încercați TweenMax excepțional de puternic de la Greensock. Există o versiune simplificată numită TweenLite care produce fișiere mai mici.
Deoarece animația JavaScript vă permite să aveți control complet asupra stilurilor elementelor la fiecare pas, puteți încetini, întrerupeți, opriți, redați în sens invers și puteți face alte manipulări cu animația.
Cu excepția cazului în care se menționează altfel, conținutul acestei pagini este licențiat sub Licența Creative Commons Attribution 3.0, iar mostrele de cod sunt licențiate sub Licența Apache 2.0. Pentru detalii, consultați-l pe al nostru. Java este o marcă înregistrată a Oracle și/sau a afiliaților săi.
Actualizat 8 august 2018
Acest material este dedicat animației pe pagini HTML, performanței animației, perspectivelor de utilizare, precum și animației în aplicații și jocuri mobile HTML5.
Animație Javascript
În primul rând, să începem prin a ne uita la animația JS pe o pagină HTML. Animația în JavaScript poate fi realizată fie cu setInterval, cu ajutorul căruia puteți seta cadre statice pe secundă, fie folosind o funcție obișnuită care la final se autoapelează sau cu window.requestAnimationFrame.
Iată cea mai simplă logică a modului în care funcționează animația în JS:
var el=document.getElementById("elem");
mar=10; //date inițiale statice
//începe ciclul
mar=mar+1;
el.style.marginLeft=mar+"px";
// bucla se termină
Frumusețea JS este că puteți extinde în mod convenabil instrumentele native și puteți utiliza, de exemplu, animația jQuery sau puteți utiliza Velocity. Acest lucru accelerează semnificativ productivitatea. Cu toate acestea, în special, Velocity nu folosește JS pentru animație, dar animația în sine este realizată acolo în CSS, ceea ce va fi discutat mai jos.
Animație SVG
Nu putem să nu menționăm animația SVG. În sine este foarte bun, dar nu funcționează în browserele mobile. Sau, mai degrabă, doar SMIL funcționează pe Android 3.0 mai mare. Oricât de neplăcut ar fi să spunem, SVG-ul în sine funcționează în metoda WebView, dar tot ce ține de animație în această etichetă, din păcate...
Oriunde lucrează, dă o performanță bună. Convinge-te singur.
O caracteristică distinctivă este că nu există pixeli în interiorul SVG, ci mai degrabă niște valori abstracte. Odată ce ați specificat înălțimea și lățimea elementului svg, puteți specifica un atribut viewbox, cu care puteți ajusta poziția elementelor interioare și dimensiunea relativă a acestora. SVG poate fi realizat la orice lungime și lățime și va ajusta obiectele interne pentru a se potrivi cu dimensiunea casetei de vizualizare.
Animație canvas
Acest tip de animație este foarte comun în browserele de pe computerele obișnuite, în special atunci când se creează jocuri. Dezavantajele sunt:
1. Lipsa identificării DOM pentru elemente.
2. Cu cât rezoluția este mai mare, cu atât performanța este mai mică.
În browserele mobile, animația canvas nu funcționează fără probleme.
Animație CSS
Să ne uităm la animație folosind CSS3. După cum știți, în CSS3 am ajuns la o proprietate uimitoare de animație cu care puteți anima complet anumite obiecte.
Cum se întâmplă asta? De exemplu, dorim să mutăm elementul #obj la dreapta cu 300 de pixeli și să-l mutăm înapoi, repetând animația la nesfârșit. Cu CSS3 aceasta a devenit o operațiune foarte ușoară.
Pe lângă lățimea și înălțimea standard, atribuim următoarele proprietăți obiectului:
Webkit-animație: 3s mișcare liniar infinit;
animație: 3s în mișcare liniar infinit;
Pentru o mai mare compatibilitate între browsere, setăm două proprietăți pentru obiect, în care 3s - 3 secunde pentru a finaliza întreaga animație, mutând - numele animației care este aplicată obiectului (mai multe detalii mai jos), liniar - un steag care face obiectul să se miște cu aceeași viteză în toate zonele, infinit - steag care face animația fără sfârșit.
Ei bine, acum să atingem animația în mișcare în sine. Va trebui să fie scris în același fișier CSS în care îl aplicați. Anterior, și chiar și acum, unii oameni folosesc parametrii stânga/dreapta/sus/jos sau margini pentru a muta un obiect pe ecran. Aceasta este de fapt o practică destul de proastă și nu ar trebui făcută deoarece este puțin neoptimizat - puteți obține o mișcare mai lină cu alte proprietăți CSS3. Aceste proprietăți sunt translatex și translatey.
/*animație proastă*/
@-webkit-keyframes în mișcare (
de la (marja-stânga: 0;)
50% (marja-stânga: 300px;)
la (marja-stânga: 0;)
}
/*animație bună*/
@-webkit-keyframes în mișcare (
din (transforma: translatex(0);)
50% (transform: translatex(300px);)
la (transforma: translatex(0);)
}
De asemenea, trebuie remarcat faptul că tranziția în evenimente precum hover se comportă foarte bine și pe dispozitivele mobile. Ei bine, în general, puteți atașa aceeași tranziție sau animație CSS3 la orice element folosind JS. În acest caz, veți obține cea mai bună opțiune (JS specifică ce să anime, CSS anime).
Deoarece acesta este cazul, atunci când creează jocuri, ei folosesc de obicei cadre și instrumente care facilitează dezvoltarea. Unul dintre acestea este Sencha Animator, care vă permite să faceți diverse lucruri folosind CSS și are o interfață ușor de utilizat.
Ce este mai bun și mai rapid: animație CSS sau animație JS?
În primul rând, putem aprofunda puțin în partea de calcul pentru a clarifica puțin situația. Javascript este un limbaj interpretat și pentru a-l executa, motorul JS al browserului trebuie să analizeze constant instrucțiunea (codul) în timpul execuției și apoi să o convertească în cod care poate fi citit de mașină. Situația cu CSS este puțin diferită. Faptul este că este compilat imediat în limbajul mașinii și astfel arată o performanță mai bună în animație.
Animația CSS în mod implicit este cu un ordin de mărime mai productivă decât Javascript, dar există unele nuanțe atunci când folosirea JS oferă un avantaj de performanță mai mare.
După cum sa spus în ultimele propuneri despre animația CSS, este mai bine să folosiți CSS pentru procesarea animației și JS pentru a indica ce să procesați (pur și simplu prin agățarea, de exemplu, de un element de clasă cu animațiile prescrise necesare).
A fost o chestiune de performanță, următoarea întrebare a fost relevanța. În ciuda tuturor aspectelor aparent avantajoase ale CSS, apar situații în care este mai bine să utilizați JS. S-a întâmplat.
Optimizarea performanței animației
Dacă creați o aplicație HTML 5 pe Android, puteți încerca următoarele:
Adăugați android:hardwareAccelerated="true" la parametrii de activitate
Acest lucru va oferi accelerare hardware, GPU-ul, cu această opțiune activată, se va grăbi să lucreze și, împreună cu CPU, va fi complet ocupat cu procesarea aplicației dvs. Singurul dezavantaj este că durata de viață a bateriei va fi puțin mai distractivă.
De asemenea, nu utilizați evenimentul onclick (chiar dacă funcționează pe ecranul tactil). Faptul este că acest eveniment provoacă o întârziere de aproximativ o treime de secundă și, pentru a evita acest lucru, este mai bine să utilizați ontouchstart și ontouchend.
Asigurați-vă că adăugați și scrieți în comentarii ceea ce nu a fost menționat în articol. Împreună vom crea materiale de înaltă calitate în limba rusă.
07.02.2016Dacă acum vă aflați într-o situație în care trebuie să creați o animație impresionantă pentru un site web, atunci această postare vă va oferi cu siguranță instrumente utile.
Bună prieteni! În acest articol, vă invit să verificați selecția mea de biblioteci CSS grozave și plugin-uri JS care vă vor ajuta să implementați cele mai compatibile animații pe site-ul dvs. în câteva minute.
Pluginuri JavaScript pentru animație
Dacă doriți să creați animații care sunt declanșate de un eveniment sau acțiune, atunci pluginurile de animație JavaScript vă vor ajuta foarte mult în acest sens. Dar este de remarcat faptul că majoritatea acestor animații sunt scrise în CSS3 și controlate folosind JavaScript.
AniJS
Dynamics.js
Dynamic.js este o bibliotecă JavaScript pentru crearea de animații bazate pe fizică.
mo.js
mo.js este o bibliotecă excelentă pentru crearea de grafică în mișcare. Ați văzut adesea un exemplu de astfel de grafică atunci când Google a plasat o nouă siglă tematică (doodle), care se anima atunci când trecea cu mouse-ul sau făcea clic.
cta.js
cta.js - plugin JavaScript pentru crearea de apeluri animate la acțiune. Multe dintre ele arată foarte impresionant.
animo.js
animo.js este un instrument puternic pentru gestionarea animațiilor CSS3.
html5tooltips.js
html5tooltips.js - sfaturi vechi bune, cu design modern și animație fără dependențe, conectați și utilizați.
Rachetă
Rocket este o bibliotecă JS interesantă care vă permite să animați calea unui element către o țintă.
scrollReveal.js
scrollReveal.js este un plugin care vă permite să animați elemente atunci când derulați o pagină.
Wow.js
Wow.js este un alt plugin javascript pentru controlul animației atunci când derulați o pagină.
Tranzit
Transit este un plugin jQuery pentru netezirea tranzițiilor și transformărilor furnizate în jQuery.
paralax.js
parallax.js este un plugin care reacționează la poziția smartphone-ului în spațiu, pe baza acestuia, controlează indentarea, poziția și adâncimea straturilor. Dacă dispozitivul nu are un giroscop, atunci calculele sunt efectuate pe baza poziției cursorului mouse-ului. În două cuvinte - paralaxă avansată!
Viclean
Sly - Bibliotecă JavaScript pentru crearea unui scroll unidirecțional cu navigare pe bucăți implementată. Poate părea complicat în cuvinte, vă recomand să vă uitați doar la un exemplu.
Move.js
Move.js este o mică bibliotecă JavaScript pentru crearea de animații CSS3 personalizate.
slider.js
slidr.js este o bibliotecă JavaScript ușor de utilizat și ușoară pentru crearea unui glisor vertical și, în același timp, orizontal.
CreateJS
CreateJS este un set de biblioteci și instrumente modulare care pot lucra împreună sau independent pentru a îmbogăți conținutul cu interactivitate. Funcționalitatea acestor biblioteci vă va permite să creați site-uri web și aplicații uimitoare, asigurați-vă că consultați demonstrațiile.
Flippant.js
Flippant.js - plugin JavaScript pentru crearea de elemente cu efect de rotație în jurul axei lor.
jmpress.js
jmpress.js este o bibliotecă JavaScript cu o idee unică de a crea un site web pe o pânză HTML5 nesfârșită. Ideea merită atenție.
biblioteci CSS3
Dezvoltatorii experimentați s-au ocupat deja de crearea unei biblioteci cu animații CSS3 pentru noi cu destul de mult timp în urmă. Acum putem pur și simplu să le luăm și să le aplicăm în proiectele noastre și să avem încredere în eficacitatea lor.
Prin termenul „animație” ne referim cel mai adesea la filme de animație - „desene animate” pe care le-am iubit încă din copilărie. Dar dacă ne uităm la dicționarul explicativ, aflăm că tradus din franceză înseamnă „renaștere”, „animație”. Și aici se dovedește că acest sens se potrivește în mod surprinzător de precis nu numai industriei cinematografice, ci și tehnologiilor web.
Folosind diverse efecte de animație(tranziții, mișcări, transformări etc.) „înviorează” în mod semnificativ site-ul web, vă permit să controlați atenția utilizatorului, trecându-l la elementul necesar și oferind anumite indicii vizuale.
Vorbind despre animație, nu putem să nu amintim despre binecunoscutele 12 principii formulate de animatorii studioului Disney, a căror utilizare este extrem de importantă pentru utilizarea rezonabilă și de înaltă calitate a efectelor de animație.
Vorbind despre tehnologiile care oferă utilizarea animației în paginile web, se pot distinge mai multe, dar poate niciunul nu este la fel de puternic ca . Cu doar câțiva ani în urmă, tehnologia de animație Flash era un concurent formidabil și foarte popular. Dar acum, se pare, cei mai buni ani ai săi sunt în urmă și este înlocuit treptat de pe paginile site-urilor cu script-uri Java mai puternice și mai flexibile. Și dacă te hotărăști serios utilizați animația pe site-ul dvs, atunci ar trebui să pariezi pe JavaScript. Și pentru a face o alegere inteligentă a bibliotecii, am făcut recenzia de astăzi.
Dynamics.js
Probabil că voi începe cu Dynamics.js. Aceasta este o bibliotecă serioasă și puternică care vă permite să creați animații realiste din punct de vedere fizic (cum ar fi oscilațiile amortizate armonice ale unui punct de pe pagina principală a unui site web). Biblioteca este capabilă să gestioneze proprietățile oricărui element DOM. Dynamics.js este folosit pentru a crea meniuri, butoane, indicatori de proces, markeri. În acest caz, sunt disponibile o mare varietate de parametri, cum ar fi frecvența, scăderea amortizarii, parametrii care caracterizează elasticitatea sau durata procesului etc.
Cta.js
Mic ca volum biblioteca cta.js destinat pentru a crea efecte de animație pe pagină tipul „acțiune-efect”, adică plasarea cursorului sau clicul cursorului mouse-ului peste un obiect produce un efect specific. Este foarte convenabil de utilizat atunci când se dezvoltă interfețe cu teracote, când clic pe un element duce la deschiderea acestuia ca o fereastră modală, pe întreaga pagină sau ca un panou lateral de diapozitiv.
Beep.js
O bibliotecă interesantă care utilizează API-ul WebAudio pentru a crea un sintetizator de muzică pe o pagină. Poate fi folosit în dezvoltarea unui manual de muzică online sau ca o jucărie distractivă.
Rainyday.js
Efect de ploaie incredibil de frumos, cu picături de diferite dimensiuni care curg în jos. Cu toate acestea, după părerea mea, picăturilor mari le lipsește realismul (poate aceeași fizică care este prezentă în Dynamics.js?). Cu toate acestea, API-ul existent vă permite să vă creați propriile obiecte și să controlați comportamentul acestora, creând efecte și mai incredibile.
Dom-Animator.js
Dom-Animator.js este un așa-numit „ou de Paște”. Efectul pe care îl produce nu este vizibil cu ochiul „liber”, adică. pentru cei care vizualizează pagina într-o fereastră obișnuită a browserului. Dar cei care vă analizează codul îl vor vedea în consolă (dacă încă nu înțelegeți despre ce vorbim, există un videoclip aici care va clarifica totul).
faimos
Faimos - bazat pe evenimente Bibliotecă JS pentru crearea de animații moderne. Are un nucleu geometric puternic care vă permite să manipulați diverse obiecte 3D - punctuale și volumetrice - să le aplicați forțe și accelerații, să impuneți restricții și să controlați coliziunile.
Bounce.js
Nu-i rău Bibliotecă JavaScript pentru crearea de animații impresionante folosind CSS. Vă permite să aplicați diferite tipuri de mișcare, rotație, scalare și transformare obiectelor.
Snabbt.js
O bibliotecă ușoară și rapidă care, potrivit dezvoltatorilor, produce 60 fps chiar și pe dispozitivele mobile. Folosind matrice de transformare, CSS vă permite să mutați, să rotiți, să scalați și să efectuați alte manipulări cu obiecte. De asemenea, vă permite să aplicați efecte speciale obiectelor care atrag atenția, care pot fi folosite la completarea formularelor.
Rekapi
Rekapi vă permite să utilizați ambele Animație CSS cadru cheie(@keyframes rule) și animație DOM folosind JavaScript. Această bibliotecă vă permite să creați obiecte dinamice destul de complexe, cum ar fi diagrame cu piese și linii, cronologie și alte elemente ale interfeței cu utilizatorul.
Şmecher
Shifty este o bibliotecă care conține tot ce ai nevoie pentru o completare animație cadru cheie(așa-numita „înfrățire”), iar numărul de obiecte poate fi pur și simplu enorm. Este o bibliotecă de nivel scăzut care poate fi folosită ca bază pentru platforme sau biblioteci de nivel superior. De fapt, Shifty este folosit ca nucleu al Rekapi-ului menționat mai sus.
