Biblioteki animacji JavaScript: 10 popularnych wyborów

Uwielbiam eksperymentować z różnymi efektami animacji, szczególnie tymi, które są proste i można je zaimplementować za pomocą CSS. Ale jeśli spojrzymy na szerszy obraz – animacje CSS zaprowadzą Cię tylko tak daleko. A jeśli chcesz tworzyć złożone i interaktywne środowiska użytkownika – prędzej czy później będziesz musiał przełączyć się na JavaScript.

Główną zaletą używania JavaScript do efektów animacji jest to, że możesz kontrolować znacznie więcej logiki animacji. Obejmuje to płynność przejść, kontrolowanie stanu i odpowiedzi DOM, ale także wykorzystanie grafiki 2D i 3D dzięki WebGL.

Rodzaje bibliotek animacji JavaScript

Tak więc, ponieważ biblioteki animacji JS mają wiele kształtów i form, naprawdę pomaga zawęzić konkretny obszar zainteresowania. Wiele silników i frameworków jest używanych nie tylko do rzeczy front-endowych, ale także do tworzenia gier i tworzenia innych interaktywnych treści.

W tym konkretnym podsumowaniu skupiam się na bibliotekach, które są najczęściej używane w programowaniu front-end, samodzielnie lub w połączeniu z dowolnym z obecnych frameworków.

W odpowiednim czasie rozważę dodanie do tej listy większej liczby bibliotek, które są mniejsze w skali, ale nadal zapewniają sensowne sposoby dodawania interaktywnych animacji do twoich projektów.

Każda biblioteka ma linki do swojej witryny i strony GitHub. Dodałem również przykład CodePen, który można uruchomić z tej strony, oraz dodatkowe zasoby – samouczki lub przewodniki wideo.

#1 – Three.js

Three.js to biblioteka do tworzenia animowanych efektów 3D, które można wykorzystać w kreatywnym tworzeniu witryn internetowych. Three.js eliminuje potrzebę uczenia się przez programistów WebGL i może zamiast tego skoncentrować się na tworzeniu interaktywnych efektów 3D bez komplikacji.

W high-endzie Three.js służy do tworzenia interaktywnych wirtualnych doświadczeń, takich jak Mozilla Hubs. Ponadto biblioteka jest często wykorzystywana do tworzenia wciągających wrażeń na stronie docelowej. Światowej klasy wydawcy i redakcje od lat używają Three.js do tworzenia stron opartych na danych z dynamicznymi aktualizacjami.

Jeśli odwiedzisz stronę główną, znajduje się tam ogromna liczba wyróżnionych projektów, które powinny dać ci mnóstwo inspiracji/klarowności, jak ta biblioteka jest używana w codziennym środowisku.

Przykładowa animacja Three.js

Zobacz tło fal siatki pióra – THREE.js autorstwa CP Designer (@cpandya) na CodePen.

Dodatkowe zasoby Three.js

• Jak zbudowaliśmy globus GitHub
• Efekt zniekształcenia pikseli z Three.js

#2 – Anime.js

Anime.js autorstwa Juliana Garniera jest prawdopodobnie drugą najbardziej znaną biblioteką do integracji animacji z projektami internetowymi. Jego popularność wynika z posiadania wbudowanych narzędzi, które pomagają przyspieszyć proces animacji elementów CSS, SVG i DOM.

Na przykład możesz kierować reklamy na określone selektory CSS, a następnie zastosować udoskonaloną logikę animacji za pomocą JavaScript, zamiast samodzielnie pisać @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' });

Za pomocą samego powyższego fragmentu możesz uzyskać efekt, który wygląda tak:

Gdybyś miał to zrobić za pomocą CSS – musiałbyś wybrać każdy pojedynczy blok siatki i napisać dla niego osobną logikę. Jest to nie tylko niepraktyczne, ale także dużo pracy. Na stronie z dokumentacją Anime.js znajdziesz wiele podobnych przykładów. Poniższe demo idzie o krok dalej, aby pokazać, jak ta biblioteka może być używana w nowoczesnym programowaniu front-end.

Przykładowa animacja anime.js

Zobacz animację logo Pen anime.js autorstwa Juliana Garniera (@juliangarnier) na CodePen.

Dodatkowe zasoby anime.js

• Samouczek Anime.js — silnik animacji JavaScript w 10 minut
• Animacja interfejsu użytkownika za pomocą Anime.js

#3 – Popmotion

Popmotion to biblioteka animacji niskiego poziomu napisana w języku TypeScript. Jest to również biblioteka, która obsługuje popularną bibliotekę Framer Motion (mamy ją wymienioną w tym artykule) używaną w projektach React. Nie mając opinii, możesz użyć Popmotion do zintegrowania niestandardowych efektów, pisząc dodatkowe funkcje, których chcesz użyć.

Jak sama nazwa wskazuje, Popmotion jest szczególnie dobry do animowania elementów interfejsu użytkownika za pomocą różnych animacji opartych na ruchu. Obejmuje to takie efekty, jak wygładzanie, sprężyny, klatki kluczowe i bardziej skomplikowane efekty przejścia. Poniższy przykład dobrze pokazuje praktyczne zastosowanie efektów animacji dla elementów składowych.

Przykładowa animacja popmotion

Zobacz demo Pen Popmotion autorstwa Arden (@aderaaij) na CodePen.

Dodatkowe zasoby Popmotion

• Wizualizuj algorytm naleśników za pomocą React i Popmotion.io
• Dodaj animacje wiosenne do swojej aplikacji kątowej za pomocą popmotion

#4 – mo.js

Mo.js koncentruje się na grafice ruchomej i przoduje w dostarczaniu prostej struktury kodu, którą można zaimplementować w samodzielnych projektach, ale także razem z frameworkami, takimi jak React.

A ponieważ Mo.js jest dostarczany z własnym deklaratywnym API – masz kontrolę nad każdym krokiem animacji. Obejmuje to określenie nie tylko logiki tego, co chcesz osiągnąć, ale także sposobu, w jaki zamierzasz to osiągnąć. Biblioteka zawiera gotowe komponenty i przykłady, które są dostosowane do bogatych wizualnie doświadczeń użytkownika.

Oto przykładowy fragment:

 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, });

Jak widać, wiele logiki jest z góry określonych. Więc zamiast wymyślać własne pomysły, możesz zwrócić uwagę na dostarczone właściwości i budować swoją drogę do góry. Sekcja samouczka w dokumentacji zawiera sporo przykładów praktycznych zastosowań, w szczególności efektów, które dodają maleńkie, ale znaczące animacje do codziennych elementów strony internetowej.

Przykładowa animacja mo.js

Zobacz Pen Link Hover Effects w/ mo.js autorstwa Mike'a Quinna (@mprquinn) na CodePen.

Dodatkowe zasoby mo.js

• Jak korzystać z MoJS w React
• Zapoznanie się z MoJS

#5 – p5.js

p5.js to implementacja JavaScript Processing – osobnego „języka” przeznaczonego do użytku przez artystów wizualnych. W przeciwieństwie do niektórych przykładów, które widzieliśmy do tej pory, p5.js jest uniwersalną biblioteką animacji, dostarczającą rozwiązania nie tylko do praktycznych zastosowań, ale także do bardziej solidnych i złożonych projektów. Obejmuje to pełną obsługę efektów 2D i 2D.

Jeśli chodzi o używanie p5.js w projektach stron internetowych, biblioteka otwiera drogę do dogłębnej kreatywności. Na przykład możesz szybko załadować efekty, takie jak zasłona dymna, animowane drzewa i oparte na danych strony docelowe, z którymi użytkownicy mogą wchodzić w interakcje.

Musisz zrobić wszystkie rysunki samodzielnie, ale biorąc pod uwagę ilość zasobów dostępnych dla p5.js – myślę, że przekonasz się, że rozpoczęcie pracy nie jest takie trudne. Nie trzeba dodawać, że społeczność stojąca za obydwoma projektami jest bardzo zaangażowana.

p5.js Przykładowa animacja

Zobacz Pen P5.JS Twist and Turn. przez Sdsmnc (@supastrocat) na CodePen.

Dodatkowe zasoby p5.js

• Przetwarzanie i p5.js
• Zachody słońca i spadające gwiazdy w p5.js

#6 – Ruch

React jest tak popularny, że sensowne jest posiadanie własnej biblioteki animacji. Framer Motion jest dostarczany z gotowym interfejsem API, który pozwala programistom React uprościć proces tworzenia animowanych komponentów, ale także łagodzi niektóre przeszkody związane z nauką CSS i jego niezależnych właściwości animacji. A praca z nim jest dość łatwa.

Przykładowy fragment:

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

Animacje w programie Framer są definiowane przez właściwości motion i animate . Pozwala to wybrać całe komponenty i ich wewnętrzne elementy, które można następnie wzbogacić o niestandardową logikę animacji. Artykuł Smashing od Nefe Emadamerho-Atori w sekcji zasobów jest świetnym punktem wyjścia, aby zobaczyć, jak działa Framer Motion.

Przykładowa animacja ruchu

Zobacz przycisk celownika laserowego pióra autorstwa codebro (@codebro) na CodePen.

Dodatkowe zasoby dotyczące ruchu

• Przedstawiamy Ruch Framer
• Responsywne animacje z funkcją Framer Motion

#7 – GSAP

Ostatnio często spotykam się z grafiką GSAP udostępnianą na Twitterze. Ale to nie jest zaskoczeniem. Wiele animacji i dynamicznych efektów, które widzimy w kreatywnych projektach, powstało dzięki solidnemu silnikowi GSAP.

Biblioteka jest nie tylko zoptymalizowana pod kątem wydajności, ale jest również wysoce kompatybilna z Twoimi ulubionymi technologiami. Obejmuje to frameworki, takie jak React i Vue, ale także biblioteki, takie jak jQuery, z dodatkową obsługą przeglądarek mobilnych i przestarzałych .

Ponieważ GSAP jest w stanie wysyłać zapytania i animować praktycznie każdy rodzaj elementu sieci Web (od CSS do Canvas po obiekty DOM) – możesz go użyć do czegoś tak prostego, jak efekt spinnera, lub pójść na całość i zbudować naprawdę dynamiczne środowiska internetowe.

Sekcja Showcase zawiera setki przykładowych projektów, nad którymi pracowali programiści. Sprawdź to zarówno pod kątem inspiracji, jak i zobacz, co jest możliwe dzięki tej bibliotece.

Przykładowa animacja GSAP

Zobacz Pen Hulu Originals Intro autorstwa Hyperplexed (@Hyperplexed) na CodePen.

Dodatkowe zasoby GSAP

• Niesamowite techniki animacji z GSAP
• Tworzenie rozbudowanych sekwencji animacji strony internetowej – samouczek GSAP 3

#8 – Paper.js

Paper.js to biblioteka animacji skupiająca się wyłącznie na animacji grafiki wektorowej. Takie podejście pozwala nie tylko na efekty statyczne, ale także interaktywne doświadczenia dynamiczne. W szczególności Paper.js jest popularny wśród projektów animacji, w których użytkownik może przeciągać obiekty, zmieniać ich kolejność i dostarczać niestandardowe dane wejściowe.

Obiekty można kategoryzować według warstw, przy czym każda warstwa ma niestandardową specyfikację animacji. Przydaje się to podczas pracy nad złożonymi strukturami, umożliwiając usuwanie/wyłączanie niektórych warstw, o ile nie zażąda tego użytkownik.

Przykładowa animacja Paper.js

Zobacz Pen Filling Glasses – Paper.js autorstwa Fioralda Ismaili (@Fiorald) na CodePen.

Dodatkowe zasoby Paper.js

• Paper.js Wymazywanie wektorów
• Fale w Paper.js

#9 – Animacje internetowe

Ta biblioteka jest bezpośrednim portem JavaScript interfejsu Web Animation API. Biblioteka integruje się bezpośrednio ze specyfikacją Element.animate() , umożliwiając korzystanie z funkcji animacji zwykle pisanych przy użyciu logiki CSS. Autorzy wyjaśnili to, mówiąc:

„Implementacja JavaScript Web Animations API, która zapewnia funkcje Web Animation w przeglądarkach, które nie obsługują jej natywnie. Polyfill wraca do natywnej implementacji, gdy jest dostępna.”

Animacje internetowe Przykładowa animacja

Zobacz Animacje z imperatywem pióra autorstwa Sama Thorogooda (@samthor) na CodePen.

Animacje internetowe Dodatkowe zasoby

• Web Animation API – Web API | MDN
• Animacje internetowe poziom 2 | W3C

#10 – Proton

Efekty cząsteczkowe są zdecydowanie obecne w nowoczesnych trendach projektowania stron internetowych. Projektanci wdrażają je nie tylko do efektów tła, ale także do ciekawych przejść, a nawet prezentacji do kreatywnych projektów. Biblioteka Proton jest dostosowana specjalnie do potrzeb szybkiego skalowania kreatywnych efektów cząsteczkowych.

Możesz robić takie rzeczy, jak tworzenie efektów iskier i interakcji opartych na kolizjach, ale także przekształcać tekst w nowe i ekscytujące wrażenia z animacji.

Przykładowa animacja protonu

Zobacz Pen my-emiter autorstwa matsu7089 (@matsu7089) na CodePen.

Dodatkowe zasoby protonu

• Przykłady silników protonowych
• Komponent React dla tła cząstek

Streszczenie

Zaletą wielu z tych bibliotek jest to, że istnieją już od jakiegoś czasu. W związku z tym stosunkowo łatwo jest znaleźć przykłady, ale także szczegółowe przewodniki dotyczące korzystania z określonej biblioteki w określonym kontekście.

Przede wszystkim pomaga wiedzieć, jaki cel chcesz osiągnąć, szczególnie jeśli masz zamiar pracować nad animacjami, które implementują dane w czasie rzeczywistym lub dane wejściowe oparte na użytkownikach.

Innymi słowy, nie ma czegoś takiego jak najlepsze . Każda biblioteka ma swoje mocne i słabe strony. Dla mnie prawdopodobnie wybrałbym GSAP, ponieważ jest ładnie zoptymalizowany do użycia w prawie każdym projekcie front-endowym, jaki można sobie wyobrazić.

Ale jeśli robię projekt, który jest mniej ambitny, biblioteki takiej jak Popmotion jest mnóstwo.