Biblioteci de animație JavaScript: 10 opțiuni populare

Îmi place să experimentez cu diverse efecte de animație, în special cele care sunt simple și pot fi implementate cu CSS. Dar, dacă ne uităm la imaginea mai largă – animațiile CSS vă vor duce doar atât de departe. Și, dacă doriți să creați experiențe de utilizator complexe și interactive - mai devreme sau mai târziu, va trebui să treceți la JavaScript.

Principalul avantaj al folosirii JavaScript pentru efecte de animație este că poți controla mult mai mult din logica animației. Aceasta include fluiditatea tranzițiilor, controlul stării și răspunsul DOM, dar și utilizarea graficelor 2D și 3D datorită WebGL.

Tipurile de biblioteci de animație JavaScript

Așadar, deoarece bibliotecile de animație JS au multe forme și forme, chiar ajută la restrângerea zonei specifice de focalizare. Multe dintre motoare și cadre nu sunt folosite doar pentru chestii front-end, ci și pentru a crea jocuri și a crea alt conținut interactiv.

Pentru această rezumare specifică, mă concentrez pe bibliotecile care sunt cel mai frecvent utilizate în dezvoltarea front-end, fie pe cont propriu, fie împreună cu oricare dintre cadrele actuale.

În timp util, voi lua în considerare adăugarea mai multor biblioteci la această listă, care au o scară mai mică, dar care oferă în continuare modalități semnificative de a adăuga animații interactive la proiectele dvs.

Fiecare bibliotecă are link-uri către site-ul său web și pagina GitHub. Am adăugat, de asemenea, un exemplu CodePen pe care îl puteți rula de pe această pagină și resurse suplimentare – care sunt fie tutoriale, fie ghiduri video.

#1 – Trei.js

Three.js este biblioteca de bază pentru crearea de efecte animate 3D pe care le utilizați în dezvoltarea de site-uri creative. Three.js elimină nevoia dezvoltatorilor de a învăța despre WebGL și, în schimb, se poate concentra pe construirea de efecte 3D interactive fără complexitate.

La nivel superior, Three.js este folosit pentru a crea experiențe virtuale interactive, precum Mozilla Hubs. În plus, biblioteca este adesea folosită și pentru a crea experiențe captivante în paginile de destinație. Editori și editoriale de talie mondială au folosit Three.js de ani de zile pentru a crea pagini bazate pe date cu actualizări dinamice.

Dacă vizitați pagina de pornire, există un număr mare de proiecte evidențiate enumerate, care ar trebui să vă ofere o mulțime de inspirație/claritate cu privire la modul în care această bibliotecă este utilizată în mediile de zi cu zi.

Three.js Exemplu de animație

Vedeți fundalul Pen Mesh Line Waves – THREE.js de CP Designer (@cpandya) pe CodePen.

Resurse suplimentare Three.js

• Cum am construit globul GitHub
• Efect de distorsiune a pixelilor cu Three.js

#2 – Anime.js

Anime.js de la Julian Garnier este probabil a doua cea mai cunoscută bibliotecă pentru integrarea animațiilor în proiecte bazate pe web. Popularitatea sa provine din instrumentele încorporate pentru a ajuta la accelerarea procesului de animare a elementelor CSS, SVG și DOM.

De exemplu, puteți viza anumite selectoare CSS și apoi să aplicați o logică de animație rafinată prin JavaScript, spre deosebire de a scrie singur @keyframes .

 anime({ targets: '.staggering-axis-grid-demo .el', translateX: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'x'}), translateY: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'y'}), rotateZ: anime.stagger([0, 90], {grid: [14, 5], from: 'center', axis: 'x'}), delay: anime.stagger(200, {grid: [14, 5], from: 'center'}), easing: 'easeInOutQuad' });

Doar cu fragmentul de mai sus, puteți realiza un efect care arată astfel:

Dacă ar fi să faceți acest lucru cu CSS - ar trebui să selectați fiecare bloc de grilă individual și să scrieți o logică separată pentru el. Nu numai că este nepractic, dar este și multă muncă. Pe pagina de documente Anime.js, veți găsi o mulțime de exemple similare. Și, demonstrația de mai jos face un pas mai departe pentru a prezenta modul în care această bibliotecă poate fi utilizată în dezvoltarea front-end modernă.

Anime.js Exemplu de animație

Vedeți animația siglei Pen anime.js de Julian Garnier (@juliangarnier) pe CodePen.

Resurse suplimentare Anime.js

• Tutorial Anime.js – Motor de animație JavaScript în 10 minute
• Animație interfață utilizator cu Anime.js

#3 – Popmotion

Popmotion este o bibliotecă de animație de nivel scăzut scrisă în TypeScript. Este, de asemenea, biblioteca care alimentează populara bibliotecă Framer Motion (o avem listată în acest articol) folosită în proiectele React. Fiind lipsit de păreri, puteți folosi Popmotion pentru a integra efecte personalizate scriind funcții suplimentare pe care doriți să le utilizați.

După cum sugerează și numele, Popmotion este deosebit de bun pentru animarea elementelor interfeței cu utilizatorul prin utilizarea diferitelor animații bazate pe mișcare. Aceasta include efecte precum relaxarea, arcuri, cadre cheie și efecte de tranziție mai complexe. Exemplul de mai jos face o treabă bună de a prezenta aplicarea practică a efectelor de animație pentru elementele componente.

Exemplu de animație Popmotion

Vezi demonstrațiile Pen Popmotion de Arden (@aderaaij) pe CodePen.

Popmotion Resurse suplimentare

• Vizualizați algoritmul pentru clătite cu React și Popmotion.io
• Adăugați animații de primăvară în aplicația dvs. unghiulară cu popmotion

#4 – mo.js

Mo.js se concentrează pe grafica în mișcare și excelează în furnizarea unei structuri de cod simplă pe care o puteți implementa în proiecte autonome, dar și împreună cu cadre precum React.

Și, deoarece Mo.js este livrat cu propriul său API declarativ, puteți controla fiecare pas al animației. Aceasta include definirea nu numai a logicii a ceea ce doriți să realizați, ci și a modului în care veți ajunge acolo. Biblioteca include componente și exemple prefabricate care sunt adaptate pentru experiențe vizuale bogate ale utilizatorului.

Iată un fragment de probă:

 const travelCircleExpand = new mojs.Shape({ fill: COLORS.BLACK, radius: 126, scale: { .1: 1 }, opacity: { 0 : 1 }, easing: 'cubic.out', duration: 400, isForce3d: true, isTimelineLess: true, });

După cum puteți vedea, o mare parte a logicii este predefinită. Deci, în loc să trebuiască să vii cu propriile tale idei, poți lua notă de proprietățile furnizate și poți construi drumul în sus. Secțiunea de tutorial din documente conține destul de multe exemple de aplicații practice, în special efecte care adaugă animații minuscule, dar semnificative, elementelor zilnice ale paginii web.

mo.js Exemplu de animație

Vedeți Efectele Hover Link Pen w/ mo.js de Mike Quinn (@mprquinn) pe CodePen.

mo.js Resurse suplimentare

• Cum se utilizează MoJS cu React
• Începeți cu MoJS

#5 – p5.js

p5.js este implementarea JavaScript a procesării – un „limbaj” separat destinat utilizării de către artiștii vizuali. Spre deosebire de unele dintre exemplele pe care le-am văzut până acum, p5.js este o bibliotecă de animație universală, oferind soluții nu numai pentru aplicații practice, ci și pentru proiecte mai robuste și complexe. Aceasta include suport complet pentru efecte 2D și 2D.

În ceea ce privește utilizarea p5.js în proiectele de site-uri web, biblioteca deschide o cale pentru creativitate aprofundată. De exemplu, puteți porni rapid efecte precum o cortină de fum, arbori animați și pagini de destinație bazate pe date cu care utilizatorii pot interacționa.

Trebuie să faci singur toate desenele, dar având în vedere numărul de resurse disponibile pentru p5.js – cred că vei descoperi că nu este atât de dificil să începi. Și, de la sine înțeles, comunitatea din spatele ambelor proiecte este foarte implicată.

p5.js Exemplu de animație

Vedeți Pen P5.JS Twist and Turn. de Sdsmnc (@supastrocat) pe CodePen.

p5.js Resurse suplimentare

• Procesarea și p5.js
• Apusuri de soare și stele căzătoare în p5.js

#6 – Mișcare

React este atât de popular încât are sens doar să aibă propria bibliotecă de animații. Framer Motion vine cu un API pre-construit care le permite dezvoltatorilor React să simplifice procesul de construire a componentelor animate, dar atenuează și unele dintre obstacolele legate de necesitatea de a învăța CSS și proprietățile sale independente de animație. Și este destul de ușor să lucrezi cu el.

Un exemplu de fragment:

 import { motion } from "framer-motion" export const MyComponent = () => ( <motion.div animate={{ rotate: 360 }} transition={{ duration: 2 }} /> )

Animațiile din Framer sunt definite de proprietățile de motion și animate . Acest lucru vă permite să selectați componente întregi și elementele lor interioare, pe care apoi le puteți îmbogăți cu logica de animație personalizată. Articolul Smashing de la Nefe Emadamerho-Atori din secțiunea de resurse este un punct de plecare excelent pentru a vedea cum funcționează Framer Motion.

Exemplu de animație de mișcare

Vedeți butonul Vizualizare laser al stiloului de la codebro (@codebro) pe CodePen.

Motion Resurse suplimentare

• Vă prezentăm Framer Motion
• Animații receptive cu Framer Motion

#7 – GSAP

Am văzut destul de mult arta GSAP distribuită pe Twitter recent. Dar nu este o surpriză. Multe dintre animațiile și efectele dinamice pe care le vedem în proiectele creative au fost posibile datorită motorului robust GSAP.

Biblioteca nu numai că este optimizată pentru performanță, dar este și foarte compatibilă cu tehnologiile tale preferate. Acestea includ cadre precum React și Vue, dar și biblioteci precum jQuery, cu suport suplimentar pentru browsere web mobile și datate .

Deoarece GSAP este capabil să interogheze și să anime practic orice tip de element web (de la CSS la Canvas la obiecte DOM) - îl puteți folosi pentru ceva la fel de simplu ca un efect de rotație sau puteți face tot posibilul și construiți experiențe de site cu adevărat dinamice.

Secțiunea Showcase are sute de exemple de proiecte la care au lucrat dezvoltatorii. Verificați-l atât pentru inspirație, dar și pentru a vedea ce este posibil cu această bibliotecă.

Exemplu de animație GSAP

Vedeți introducerea Pen Hulu Originals de Hyperplexed (@Hyperplexed) pe CodePen.

Resurse suplimentare GSAP

• Tehnici de animație uimitoare cu GSAP
• Crearea de secvențe elaborate de animație pentru site-ul web – Tutorial GSAP 3

#8 – Paper.js

Paper.js este o bibliotecă de animație cu un accent strict pe animarea graficelor vectoriale. Această abordare vă permite nu numai efecte statice, ci și experiențe dinamice interactive. În special, Paper.js este popular printre proiectele de animație în care utilizatorul poate trage obiecte, le poate rearanja și poate oferi o intrare personalizată.

Obiectele pot fi clasificate prin straturi, fiecare strat având o specificație de animație personalizată. Acest lucru este util atunci când lucrați la structuri complexe, permițându-vă să eliminați/dezactivați anumite straturi, dacă nu sunt solicitate de către utilizator.

Paper.js Exemplu de animație

Vedeți paharele de umplere a stiloului – Paper.js de Fiorald Ismaili (@Fiorald) pe CodePen.

Resurse suplimentare Paper.js

• Paper.js Vector Erase
• Waves în Paper.js

#9 – Animații web

Această bibliotecă este un port JavaScript direct al API-ului Web Animation. Biblioteca se integrează direct cu specificația Element.animate() , permițându-vă să utilizați caracteristici de animație scrise de obicei folosind logica CSS. Autorii au explicat-o spunând:

„O implementare JavaScript a API-ului Web Animations care oferă funcții de animație web în browsere care nu o acceptă în mod nativ. Polyfill-ul revine la implementarea nativă atunci când una este disponibilă.”

Animații Web Exemplu de animație

Vedeți animațiile Pen Imperative de Sam Thorogood (@samthor) pe CodePen.

Resurse suplimentare pentru animații web

• Web Animations API – Web API-uri | MDN
• Animații Web Nivelul 2 | W3C

#10 – Proton

Efectele de particule sunt cu siguranță acolo în tendințele moderne de design web. Designerii nu le implementează doar pentru efecte de fundal, ci și pentru tranziții interesante și chiar pentru prezentări pentru proiecte creative. Biblioteca Proton este adaptată special nevoilor de scalare rapidă a efectelor creative ale particulelor.

Puteți face lucruri precum crearea de efecte de scânteie și interacțiuni bazate pe coliziuni, dar și să transformați textul în experiențe de animație noi și interesante.

Animație cu exemple de protoni

Vedeți Pen my-emitter de matsu7089 (@matsu7089) pe CodePen.

Resurse suplimentare Proton

• Exemple de motoare cu protoni
• Componenta React pentru fundaluri de particule

rezumat

Lucrul frumos la multe dintre aceste biblioteci este că există de ceva vreme. Ca atare, este relativ ușor să găsiți exemple, dar și ghiduri aprofundate despre cum să utilizați o anumită bibliotecă într-un anumit context.

Mai presus de toate, vă ajută să știți ce fel de obiectiv încercați să îl atingeți, mai ales dacă veți lucra la animații care implementează date în timp real sau intrări bazate pe utilizator.

Cu alte cuvinte, nu există cel mai bun lucru. Fiecare bibliotecă are propriile sale puncte forte și puncte slabe. Pentru mine, probabil că aș merge cu GSAP, deoarece este frumos optimizat pentru a fi utilizat în aproape orice proiect front-end imaginabil.

Dar dacă fac un proiect mai puțin ambițios, o bibliotecă precum Popmotion este suficientă.