10 + millors biblioteques d’animació JavaScript a utilitzar el 2020

Les millors biblioteques d’animació JavaScript


Si voleu captar l’atenció del visitant del vostre lloc web, què pot ser millor que les animacions? Mitjançant els molts motors d’aplicacions disponibles lliurement a la web, podeu obtenir fàcilment els elements del vostre lloc web per esvair, rebotar o fer servir. A la publicació d’avui, veurem com poden ajudar les biblioteques d’animació JavaScript amb tot això.

En primer lloc, una mica sobre les animacions de JavaScript

Una cosa és afegir animacions senzilles que només necessiten una sola acció (per exemple, commutar). Per a això, sempre podeu utilitzar animacions CSS simples. Però, per a efectes més complexos o avançats, JavaScript és una millor eina. Val a dir que utilitzar JavaScript per crear animacions és més difícil que utilitzar CSS.

No obstant això, JavaScript pot gestionar coses que el CSS no pot fer. D’aquesta manera, els desenvolupadors proporcionen més poder per controlar animacions complexes que han de coordinar diverses parts mòbils.

Les animacions de JavaScript s’implementen afegint canvis graduals a l’estil d’un element. Podeu afegir-los en línia com a part del vostre codi o incloure’ls en altres objectes. Quan es mostra la representació, aquests canvis són cridats per un temporitzador. A més, podeu controlar la continuïtat de les animacions ajustant l’interval de temps dels canvis.

Les millors biblioteques d’animació JavaScript

A continuació, es mostra una llista de les biblioteques d’animació JavaScript que podeu utilitzar per afegir animacions impressionants al vostre lloc web:

1. Anime.js

Biblioteques d’animació JavaScript: Anime.js

Comencem aquesta llista de biblioteques d’animació JavaScript amb Anime.js. Aquesta lleugera biblioteca d’animació rellotge 35K + estrelles GitHub. Treballant des d’una sola API potent, podeu utilitzar-la per animar atributs HTML, CSS, JS, SVG i DOM. Amb un sistema integrat de creixement, pot fer que es crein ondulacions, moviments de direcció, efectes de seguiment i solapament. Aquest sistema es pot utilitzar tant en temps com en propietats.

Hi ha moltes coses que podeu fer mitjançant les funcions de control de devolució i de trucada incorporades. Per exemple, podeu reproduir, fer una pausa, controlar, revertir i activar esdeveniments en sincronització. Per veure què més és possible utilitzar aquesta biblioteca, podeu visitar-la Codepen.

2. Velocity.js

Velocit.js

Velocity.js combina el millor de les transicions jQuery i CSS. Valora prop de les estrelles de 17 quilòmetres GitHub i compta amb usuaris destacats com WhatsApp i Mailchimp. Enllaçar, revertir, retardar, ocultar / mostrar elements, matemàtiques de propietat (+, -, *, /) i acceleració de maquinari, formen part de les funcions..

Podeu utilitzar Velocity.js per desplaçar-vos per les finestres del navegador. Pot funcionar tant amb jQuery carregat al navegador i independent d’ell, i fins i tot desfer animacions anteriors.

3. Popmotion

Popmotion

A prop de 18K estrelles, Popmotion és una biblioteca d’animació funcional per a qualsevol entorn JavaScript. Pot funcionar amb gairebé qualsevol API que admeti nombres com a entrades com React, Three.js, A-Frame i PixiJS.

Popmotion només pesa 11,7kB, però té un cop de puny. Inclou animacions com fotogrames de teclat, decadència, línia de temps per sincronitzar diverses instàncies i molt més. Podeu esglaonar qualsevol sèrie d’animacions o funcions, així com utilitzar funcions pures per compondre les vostres configuracions.

4. Tres.js

Biblioteques d’animació JavaScript: Three.js

Three.js completa aquesta llista de biblioteques d’animació JavaScript amb 60K + estrelles activades GitHub. Depèn WebGL per crear i representar animacions 3D al navegador.

Hi ha una gran quantitat de documentació per ajudar-vos i, un cop superada la corba d’aprenentatge, no podreu assolir gaire la utilització d’aquesta biblioteca. Primerament, amb l’editor de Three.js, es crea una escena. A partir d’aleshores, podeu afegir figures geomètriques i ajustar la il·luminació i la càmera. Es pot ajustar el material, la textura, l’objecte, el color i la neteja i es pot publicar el fitxer final al vostre projecte.

5. GreenSock JS

GreenSock

El GSAP de GreenSock funciona amb un conjunt de petits fitxers JavaScript que fan que les animacions siguin excel·lents en tots els navegadors principals. Encadena de manera senzilla diverses propietats d’animació i elimina els errors del navegador.

Les accions GSAP inclouen crear animacions sobre tela i animar qualsevol objecte d’una escena. També es revela progressivament, es molesta o es mou qualsevol objecte per un camí. Per a aquest propòsit, funciona amb un munt d’aplicacions de programari com SVGPlugins, PixiPlugin, WebGL, Adobe Animate i EaseJS. La seva estructura modular us ajuda a triar només les funcions que necessiteu. Amb 8 milions d’usuaris i 10K + estrelles activades GitHub, aquesta potent biblioteca té molt a favor.

6. AniJS

AniJS

Entre les biblioteques JavaScript d’aquesta llista, AniJS és una mica exclusiu. Permet afegir animacions a elements d’una estructura senzilla “com a frase”, ideal per a persones noves en animació. A més, la seva naturalesa inespecífica permet a gairebé tothom utilitzar-la en el disseny de rutines UX.

Encès GitHub, AniJS valora més de 3,5K estrelles. No confia en cap biblioteca de tercers i ajuda generalment a accelerar el desenvolupament. Funciona igualment en Android i iOS, i també en tots els navegadors més populars.

7. Mo.js

Mo.js

El moviment gràfic té un gran paper a les animacions, i Mo.js és una opció amb la qual podeu impactar. Amb diversos tutorials i demostracions per ajudar-lo, potser als principiants no els sigui difícil crear formes geomètriques i animacions horàries..

Les API poden semblar senzilles, però hi podeu fer moltes coses. A la caixa d’eines, trobareu un editor de corbes i un editor de cronologia que us ajudarà a crear les vostres animacions, així com un reproductor per controlar les animacions. Hi ha diferents mòduls per a l’escalonament, la flexibilització, la línia de temps i molt més. Tot això guanya Mo.js prop de 16K estrelles endavant GitHub.

8. Vivus.js

Biblioteques d’animació JavaScript: Vivus

Si voleu imitar un dibuix de bolígraf en una pantalla en temps real, colpegeu la marca amb Vivus. Us permet animar SVGs donant la impressió de ser dibuixats. Com que no té dependències, és ràpid i lleuger.

Podeu triar qualsevol de les animacions disponibles: Retardat, Sincronització o OneByOne. Altrament, també podeu crear un script personalitzat per dibuixar el vostre SVG. Per a més flexibilitat, podeu substituir l’animació de cada ruta mitjançant una simple funció JavaScript. Més de 13K usuaris ofereixen un detall real a aquesta biblioteca GitHub.

9. ScrollReveal JS

ScrollReveal

Si voleu animar els vostres elements web mentre es desplacen a la vista, ScrollReveal no us decebrà. Aquesta biblioteca d’animació fàcil d’aprendre té zero dependències i 18,5 K + estrelles activades GitHub.

ScrollReveal admet diferents tipus d’efectes i funciona bé amb navegadors web i mòbils. Funciona intencionadament amb una configuració d’ossos nus, de manera que podeu utilitzar-la com a llenç per a la vostra creativitat. Per maximitzar l’efecte de les animacions, els creadors aconsellen utilitzar-lo amb moderació.

10. Tipus.js

Tipus.js

Typed.js és una biblioteca senzilla (més que un complement, realment) per animar a escriure a la pantalla. Una vegada que introduïu qualsevol cadena, un visitant pot veure que s’escriu a una velocitat establerta. No només això, podeu treballar el botó retrocés i començar una frase nova. Si voleu que els visitants amb JS desactivats també la puguin visualitzar, només heu de posar una divisió HTML a la pàgina. D’aquesta manera, els robots i els motors de cerca també podran veure les paraules que s’escrivien.

Aquesta biblioteca valora 9,5K + estrelles activades GitHub. Els usuaris de potència inclouen Slack i Envato.

11. Lottie d’AirBnB

Biblioteques d’animació JavaScript: Lottie

Lottie és un format gràfic animat lleuger que equilibra gràfics d’alta qualitat amb el cost de representació. Fa que les aplicacions siguin més petites i inclou funcions dinàmiques. Es pot utilitzar per a web, Android, iOS i IoTs, sense necessitat de programari addicional.

Lottie es pot executar en qualsevol navegador que suporti JavaScript. Les animacions es guarden en text sencer i es poden llegir per humans. Com que les dades de text s’emmagatzemen en el format JSON, s’assimila fàcilment amb qualsevol entorn JavaScript. Això el converteix en un format gràfic popular animat per millorar els frontends mòbils. La versió d’Android només gaudeix de prop de 30K GitHub.

Si heu arribat al final d’aquesta llista de biblioteques d’animació JavaSCript, també us pot interessar buscar altres biblioteques i marcs de JavaScript. O bé, consulteu aquestes millors biblioteques de components de la UI React.

No oblideu unir-se al nostre curs d’accidents per agilitzar el vostre lloc de WordPress. Amb algunes solucions senzilles, podeu reduir fins i tot un 50-80% del temps de càrrega:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map