Animacja z samochodem w JavaScript. Obiecujące biblioteki JavaScript i wtyczki do animacji

Pod pojęciem „animacja” mamy na myśli najczęściej filmy animowane – czyli „kreskówki”, które kochamy od dzieciństwa. Ale jeśli się przyjrzysz Słownik, wówczas dowiadujemy się, że w tłumaczeniu z francuskiego oznacza „odrodzenie”, „animację”. I tutaj okazuje się, że to znaczenie zaskakująco trafnie pasuje nie tylko do branży filmowej, ale także technologii internetowych.

Korzystanie z różnych efektów animacji(przejścia, ruchy, przekształcenia itp.) znacząco „ożywiają” witrynę, pozwalają zapanować nad uwagą użytkownika, przekierowując ją na żądany element i dając określone wskazówki wizualne.

Mówiąc o animacji, nie sposób nie wspomnieć o dobrze znanych 12 zasadach sformułowanych przez animatorów studia Disneya, których stosowanie jest niezwykle ważne dla rozsądnego i jakość użytkowania efekty animacji.

Mówiąc o technologiach, które zapewniają wykorzystanie animacji na stronach internetowych, można wyróżnić kilka, ale być może żaden z nich nie jest tak potężny jak . Jeszcze kilka lat temu technologia animacji Flash była poważnym konkurentem i bardzo popularna. Ale teraz wygląda na to, że ona najlepsze lata pozostaje w tyle i jest stopniowo zastępowany na stronach internetowych przez wydajniejsze i bardziej elastyczne skrypty Java. A jeśli zdecydujesz się poważnie użyj animacji na swojej stronie internetowej, to powinieneś postawić na JavaScript. Aby dokonać mądrego wyboru biblioteki, dokonałem dzisiejszej recenzji.

Dynamics.js

Prawdopodobnie zacznę od Dynamics.js. Jest to poważna i potężna biblioteka, która pozwala tworzyć fizycznie dokładne animacje (takie jak harmoniczne tłumione oscylacje wskazuje na strona główna strona). Biblioteka jest w stanie zarządzać właściwościami dowolnego elementu DOM. Dynamics.js służy do tworzenia menu, przycisków, wskaźników procesów, znaczników. W tym przypadku dostępna jest szeroka gama parametrów, takich jak częstotliwość, ubytek tłumienia, parametry charakteryzujące sprężystość czy czas trwania procesu, itp.

Cta.js

Mała objętość biblioteka cta.js przeznaczony do tworzenia efektów animacji na stronie typu „akcja-efekt”, tj. najechanie lub kliknięcie wskaźnikiem myszy na obiekcie daje określony efekt. Bardzo wygodny w użyciu podczas programowania interfejsy kafelkowe, kliknięcie elementu powoduje jego rozwinięcie jako okno modalne, całą stronę lub jako slajd na pasku bocznym.

Beep.js

Ciekawa biblioteka wykorzystująca API WebAudio do tworzenia syntezatora muzycznego na stronie. Można go wykorzystać do tworzenia internetowego podręcznika muzycznego lub jako zabawną zabawkę.

Rainyday.js

Niesamowicie piękny efekt deszczu z kroplami różne rozmiary, spływa. Jednak moim zdaniem dużym kroplom brakuje realizmu (może tej samej fizyki, która jest obecna w Dynamics.js?). Istniejące API pozwala jednak na tworzenie własnych obiektów i kontrolowanie ich zachowania, tworząc jeszcze bardziej niesamowite efekty.

Dom-Animator.js

Dom-Animator.js to tzw. „ Jajko wielkanocne"(jajko wielkanocne). Efekt, jaki wywołuje, nie jest widoczny „gołym” okiem, tj. dla tych, którzy przeglądają stronę w zwykłym oknie przeglądarki. Ale ci, którzy analizują Twój kod, zobaczą go w konsoli (jeśli nadal nie rozumiesz, o czym mówimy, znajdziesz tutaj film, który wszystko wyjaśni).

Słynny

Sławny - napędzany wydarzeniami Biblioteka JS do tworzenia nowoczesnych animacji. Posiada potężny rdzeń geometryczny, który pozwala manipulować różnymi obiektami 3D – punktowymi i wolumetrycznymi – przykładać do nich siły i przyspieszenia, nakładać ograniczenia i kontrolować kolizje.

Bounce.js

Nie jest zły Biblioteka JavaScript do tworzenia imponujących animacji Z za pomocą CSS. Umożliwia zastosowanie do obiektów Różne rodzaje ruch, obrót, skalowanie i transformacja.

Snabbt.js

Lekka i szybka biblioteka, która według twórców zapewnia 60 klatek na sekundę nawet na urządzeniach mobilnych. Korzystając z macierzy transformacji, CSS umożliwia przesuwanie, obracanie, skalowanie i wykonywanie innych manipulacji obiektami. Umożliwia także nakładanie efektów specjalnych na obiekty przyciągające uwagę, co można wykorzystać podczas wypełniania formularzy.

Rekapi

Rekapi pozwala na użycie obu Animacja klatek kluczowych CSS(@reguła klatek kluczowych) i animacja DOM kiedy Pomoc JavaScript. Biblioteka ta umożliwia tworzenie dość złożonych obiektów dynamicznych, takich jak wykresy kołowe i liniowe, osie czasu i inne elementy interfejsu użytkownika.

Chytry

Shifty to biblioteka zawierająca wszystko, czego potrzebujesz do pełnego animacja klatki kluczowej(tzw. „twinning”), a liczba obiektów może być po prostu ogromna. Jest to biblioteka niskiego poziomu, która może służyć jako rdzeń dla platform lub bibliotek wyższego poziomu. Właściwie Shifty jest używany jako rdzeń wspomnianego Rekapi.

W ostatniej części zostaną opisane różne funkcje wywołania zwrotnego służące do wykonywania funkcji w zależności od postępu animacji. Wykorzystano prawie każdy przykład z poprzednich artykułów Właściwości CSSżeby pokazać jak działają różne metody i parametry. Możesz mieć wrażenie, że Anime.js jest bardziej odpowiedni do animowania właściwości CSS. W tym samouczku dowiesz się, że można go również zastosować Animacje SVG-akta.

W trzech poprzednich artykułach sprawdziliśmy wiele funkcji biblioteki Anime.js. Możesz dowiedzieć się, jak wybierać elementy docelowe; o rodzajach parametrów używanych do kontrolowania opóźnienia i czasu trwania animacji; c - jak mieć większą kontrolę nad wartościami pojedynczych właściwości.

Funkcje wywołania zwrotnego

Wywołania zwrotne służą do wykonywania funkcji w oparciu o postęp animacji. W Anime.js dostępne są 4 funkcje oddzwonić: rozpocznij, uruchom, zaktualizuj i zakończ. Każdy z nich wbiega określony czas i jako argument przyjmuje obiekt animacji.

Funkcja Begin() jest wywoływana po rozpoczęciu animacji. Oznacza to, że jeśli animacja ma parametr opóźnienia o wartości 800 milisekund, wówczas funkcja Begin() zostanie wywołana dopiero po 800 milisekundach. Możesz sprawdzić, czy animacja się rozpoczęła, czy nie, korzystając z funkcji animacjiName.begin, która zwraca wartość true (rozpoczęła się) lub false (nie rozpoczęła się).

Run służy do wykonywania funkcji w każdej klatce po rozpoczęciu animacji. Jeśli chcesz wykonać funkcję w każdej klatce od samego początku animacji, niezależnie od parametru opóźnienia, użyj funkcji wywołania zwrotnego aktualizacji.

Pełna funkcja wywołania zwrotnego jest podobna do funkcji Begin, z tą różnicą, że jest wywoływana po zakończeniu. Aby sprawdzić, czy animacja została ukończona, użyj animacjiName.complete , podobnie jak w przypadku Begin .

Kiedyś korzystaliśmy z funkcji wywołania zwrotnego aktualizacji, aby zaktualizować liczbę przeskanowanych i zainfekowanych plików. W tym artykule rozwiniemy przykład skanowania i zobaczysz, jak działają wszystkie funkcje wywołania zwrotnego.

Var filesScanned = (liczba: 0, zainfekowane: 0); var scanCount = document.querySelector(.scan-count"); var zainfekowany = document.querySelector(.liczba zainfekowanych"); var skanowanie = anime(( cele: pliki przeskanowane, autoodtwarzanie: fałsz, liczba: 100, zainfekowane: 8, opóźnienie: 1000, czas trwania: 2000, złagodzenie: „liniowe”, runda: 1, aktualizacja: funkcja (anim) ( if (anim .Obecny czas< 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..."; } });

W powyższym przykładzie celowo dodano opóźnienie animacji, aby można było zauważyć różnicę w czasie wykonania różne funkcje oddzwonić. Wykonywanie funkcji wywołania zwrotnego aktualizacji rozpoczyna się natychmiast po utworzeniu obiektu animacji.

Sama animacja rozpoczyna się z opóźnieniem wynoszącym 1000 milisekund i właśnie w tym momencie uruchamiana jest funkcja Begin, która wyświetla użytkownikowi komunikat „Rozpoczynanie skanowania...”. W tym samym czasie rozpoczyna się wykonywanie i aktualizacja wartości liczbowe obiekt po każdej klatce. Po zakończeniu animacji pełne wywołanie zwrotne wyświetla komunikat „Skanowanie zakończone...”.

Funkcje gładkości

Funkcje gładkości służą do kontrolowania przejścia od wartości początkowej właściwości do wartości końcowej. Funkcje te można zdefiniować za pomocą parametru easing, który może przyjmować wartości albo w postaci ciągów znaków, albo jako niestandardowe współrzędne krzywej Beziera (jako tablica).

Wbudowanych jest 31 funkcji wygładzających. Jeden z nich nazywa się liniowy, pozostałych 30 składa się z różnych odmian easyIn, easyOut i easyInOut. Klasa elastyczna definiuje trzy funkcje gładkości: easyInElastic, easyOutElastic i easyInOutElastic. Można je kontrolować za pomocą parametru elastyczności. Wartość tego parametru może mieścić się wyłącznie w zakresie od 0 do 1000.

Użycie easyIn przyspiesza zmianę wartości, zaczynając od zera. Oznacza to, że początkowo będzie się to zmieniać powoli, a na końcu szybko. Szybkość zmian wynosi zero na początku i 1000 na końcu.

Funkcja easyOut spowalnia zmianę wartości począwszy od prędkości maksymalnej.

easyInOut zwiększa prędkość, z jaką wartości zmieniają się na początku i spowalnia je na końcu. Oznacza to, że w środku animacji prędkość będzie największa. Poniższa ramka pokazuje różnicę pomiędzy tymi funkcjami gładkości:

Dzięki anime.easings możesz tworzyć funkcje natywne gładkość. Poniżej przykład tworzenia funkcje niestandardowe gładkość:

Anime.easings["tanCube"] = funkcja(t) ( return Math.pow(Math.tan(t * Math.PI / 4), 3); ) anime.easings["tanSqr"] = funkcja(t) ( return Math.pow(Math.tan(t * Math.PI / 4), 2); ) var tanCubeSequence = anime(( cele: ".tan-cube", tłumaczX: "75vw", czas trwania: 2000, złagodzenie: " tanCube", autoodtwarzanie: false )); var tanSqrSequence = anime(( cele: „.tan-sqr”, tłumaczX: „75vw”, czas trwania: 2000, wygładzanie: „tanSqr”, autoodtwarzanie: false ));

Animacje oparte na plikach SVG

We wszystkich animacjach związanych z ruchem, które powstały do ​​tego momentu, elementy docelowe poruszały się po linii prostej. W Anime.js możesz przenosić elementy wzdłuż złożonych ścieżek SVG duża ilość krzywe z możliwością kontroli położenia i kąta animowanych elementów na konturze. Aby przesunąć element wzdłuż osi X po ścieżce, użyj path("x") . Podobnie elementy można przesuwać wzdłuż osi Y za pomocą path("y") .

Jeśli kontur nie jest przedstawiony jako linia prosta, prawie zawsze będzie tworzył kąt względem głównego linia pozioma. Podczas obracania dowolnego niekołowego elementu animacji ogólny obraz będzie wyglądał bardziej naturalnie, jeśli element przesunie się wzdłuż rogu ścieżki. Można to zrobić, ustawiając właściwość obrotu na path("angle") . Poniżej znajduje się przykład kodu, który animuje cztery elementy różne znaczenia gładkość wzdłuż konturu SVG:

Var ścieżka = anime.path("ścieżka"); var easings = ["linear", "easeInCubic", "easeOutCubic", "easeInOutCubic"]; var motionPath = anime(( cele: ".square", tłumaczX: ścieżka("x"), tłumaczenieY: ścieżka("y"), obracanie: ścieżka("kąt"), wygładzanie: funkcja (el, i) ( return easings[i]; ), czas trwania: 10000, pętla: true ));

Na poniższej wstawce widać, że czerwony kwadrat z funkcją easyInCubic porusza się najwolniej na początku, ale najszybciej na końcu. Podobnie jest w przypadku pomarańczowego kwadratu – na początku porusza się on najszybciej, ale na końcu najwolniej.

Możliwe jest animowanie transformacji różnych kształtów SVG między sobą za pomocą Anime.js. Jedynym warunkiem transformacji kształtów jest jednakowa liczba punktów kontrolnych. Oznacza to, że trójkąty można przekształcić jedynie w inne trójkąty, czworokąty w czworokąty i tak dalej. Próba przekształcenia elementów z nierówną liczbą punktów kontrolnych spowoduje drastyczną zmianę kształtu. Poniżej znajduje się przykład przekształceń trójkątów:

Var morphing = anime(( cele: „wielokąt”, punkty: [ ( wartość: „143 31 21 196 286 223” ), ( wartość: „243 31 21 196 286 223” ), ( wartość: „243 31 121 196 286 223" ), (wartość: "243 31 121 196 386 223" ), (wartość: "543 31 121 196 386 223" ) ], wygładzanie: "liniowe", czas trwania: 4000, kierunek: "alternatywny", pętla: prawda ));

Jednym z najciekawszych efektów Anime.js jest możliwość tworzenia rysunków liniowych. Wszystko, co musisz zrobić, to dostarczyć bibliotece kontur, którego chcesz użyć do rysowania linii; zapewniają inne parametry, za pomocą których kontrolowany jest czas trwania, opóźnienie i płynność. W poniższym przykładzie wykorzystano pełną funkcję wywołania zwrotnego do wypełnienia rysunku kotwicy Czcionka niesamowitażółty kolor.

Var lineDrawing = anime(( cele: „ścieżka”, obrysDashoffset: , złagodzenie: „easeInOutCubic”, czas trwania: 4000, ukończenie: funkcja (anim) ( document.querySelector("ścieżka").setAttribute("wypełnienie", "żółty" ); ) ));

Wykorzystując wiedzę na temat wszystkich poznanych koncepcji, będziesz w stanie tworzyć bardziej złożone rysunki liniowe zawierające znacznie więcej lepsza kontrola nad tym, jak są rysowane. Poniżej znajduje się przykład renderowania nazwy za pomocą SVG:

Var letterTime = 2000; var lineDrawing = anime(( cele: „ścieżka”, obrysDashoffset: , łagodzenie: „easeInOutCubic”, czas trwania: letterTime, opóźnienie: funkcja (el, i) ( return letterTime * i; ), początek: funkcja (anim) ( litery var = document.querySelectorAll("ścieżka"), i; for (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(.letter-y").setAttribute("fill", "#795548"); ) ), autoodtwarzanie: false ));

Wśród twórców stron internetowych panuje błędne przekonanie, że animacja CSS to jedyny produktywny sposób animacji w Internecie. Ten mit doprowadził wielu programistów do całkowitego porzucenia animacji opartej na JavaScript. Zatem:

1. Zmusiłeś się do zarządzania złożona interakcja Interfejs użytkownika w arkuszach stylów
2. Zablokowałeś się Wsparcie internetowe Odkrywca 8 i 9
3. Rezygnuje z możliwości budowania fizyki ruchu, która jest możliwa tylko w JavaScript

Testy w prawdziwym życiu: na podstawie Animacja JavaScript tak szybko, jak animacje oparte na CSS - czasem nawet szybciej. Animacja CSS ma zazwyczaj tylko przewagę nad funkcją $.animate() jQuery, która z natury jest bardzo powolna. Jednakże biblioteki animacji JavaScript, które omijają jQuery, wykazują niesamowitą wydajność, unikając jednocześnie w jak największym stopniu manipulacji DOM. Biblioteki te mogą być nawet 20 razy szybsze niż jQuery.

Rozwiejmy więc kilka mitów, zagłębimy się w niektóre prawdziwe przykłady animacje i przy okazji doskonalimy nasze umiejętności programowania. Jeśli lubisz tworzyć praktyczne animacje interfejsu użytkownika dla swoich projektów, ten artykuł jest dla Ciebie.

Dlaczego JavaScript?

Animacje CSS są przydatne, gdy trzeba dokonać zmian właściwości w arkuszach stylów. Ponadto zapewniają fantastyczną wydajność od razu po wyjęciu z pudełka – bez dodawania biblioteki do strony. Jeśli jednak używasz przejść CSS do tworzenia bogatego projektu ruchu (jak zobaczysz w najnowsze wersje iOS i Android), stają się zbyt trudne w zarządzaniu lub ich funkcje są po prostu przepełnione błędami.

Ostatecznie animacje CSS ograniczają Cię do określonej specyfikacji. W JavaScript, zgodnie z naturą każdego języka programowania, masz nieskończoną kontrolę logiczną. Silniki animacji JavaScript wykorzystują ten fakt, aby zapewnić nowe funkcje, które pozwalają na wykonanie kilku bardzo przydatnych rzeczy:

Uwaga: jeśli interesuje Cię temat wydajności, możesz przeczytać książkę Juliana Shapiro „CSS vs. S Animacja: co jest szybsze?” i Jack Doyle: „Obalamy mit: animacje CSS vs. JavaScript”. Aby zobaczyć demonstracje wydajności, zapoznaj się z panelem wydajności w dokumentacji Velocity i demonstracją GSAP „Speed ​​​​Comparison Library”.

Prędkość i GSAP

Dwie najpopularniejsze biblioteki animacji JavaScript to Velocity.js i GSAP. Obydwa działają z jQuery i bez niego. Używanie tych bibliotek z jQuery nie powoduje żadnego spadku wydajności, ponieważ całkowicie omijają one stos animacji jQuery.

Jeśli na Twojej stronie znajduje się jQuery, możesz używać Velocity i GSAP, podobnie jak $.animate() jQuery. Na przykład, $element.animate(( krycie: 0,5 )); po prostu staje się $element.velocity(( krycie: 0,5 )).

Te dwie biblioteki działają również, gdy na stronie nie ma jQuery. Oznacza to, że zamiast łączyć wywołanie animacji z elementem obiektu jQuery – jak to prosto pokazano – przekazałbyś elementy docelowe do wywołania animacji:

1 2 3 4 5

/* Praca bez jQuery */ Prędkość(element, ( krycie: 0,5 ), 1000 ) ; //Prędkość TweenMax.to(element, 1, (krycie: 0,5)); //GSAP

Jak widać, Velocity zachowuje tę samą składnię, co funkcja $.animate() w jQuery, nawet jeśli jest używana bez jQuery; po prostu przesuń wszystkie parametry w prawo o jedną pozycję, aby stworzyć miejsce na wprowadzenie zamierzonych elementów w pierwszej pozycji.

GSAP natomiast korzysta z obiektowego API, a przy tym jest przyjazne dla użytkownika metody statyczne. W ten sposób możesz mieć pełną kontrolę nad animacjami.

W obu przypadkach obiekt nie jest już animowany elementu jQuery, ale raczej surowy węzeł DOM. Przypominamy, że dostęp do surowych węzłów DOM uzyskuje się za pomocą document.getElementByID , document.getElementsByTagName , dokument.getElementsByClassName lub document.querySelectorAll (który działa tak samo w przypadku mechanizmu selektora jQuery). Zajmiemy się tymi funkcjami w następnej sekcji.

Praca bez jQuery

(Uwaga: jeśli potrzebujesz podstawowego podręcznika $.animate() w jQuery, zapoznaj się z kilkoma pierwszymi sekcjami dokumentacji Velocity.)

Przyjrzyjmy się querySelectorAll, ponieważ prawdopodobnie jest to broń, której będziesz używać podczas wybierania elementów bez jQuery:

Jak pokazano, po prostu przekazujesz querySelectorAll Selektor CSS(te same selektory, których użyłbyś w swoich arkuszach stylów) i zwróci wszystkie pasujące elementy w tablicy. Dlatego możesz to zrobić:

1 2 3 4 5

/* Pobierz wszystkie elementy div. */ var div = document.querySelectorAll("div"); /* Animuj wszystkie elementy div na raz. */ Prędkość(divs, ( krycie: 0,5 ) , 1000 ) ; //Prędkość TweenMax.to(divs, 1, (krycie: 0,5)); //GSAP

Ponieważ nie dołączamy już animacji do obiektów elementów jQuery, możesz zastanawiać się, w jaki sposób możemy połączyć animacje w jedną całość:

W Velocity po prostu wywołujesz animacje jedna po drugiej:

/* Te animacje automatycznie stają się łańcuchem. */ Prędkość(element, ( krycie: 0,5 ), 1000 ) ; Prędkość(element, ( krycie: 1 ) , 1000 ) ;

Animowanie tej ścieżki nie ma żadnych wad wydajnościowych (buforujesz animowany element do zmiennej, zamiast wielokrotnie dokonywać selekcji querySelectorAll w tym samym elemencie).

(Wskazówka: za pomocą pakietu Velocity UI Pack możesz tworzyć własne animacje multicall i nadawać im niestandardowe nazwy, których możesz później użyć jako pierwszego parametru Velocity. Więcej informacji znajdziesz w dokumentacji pakietu Velocity UI Pack.)

Wezwanie do przetwarzania na raz w Velocity ma ogromną zaletę: jeśli użyjesz obietnic z animacjami Velocity, wówczas każde wywołanie Velocity zwróci efektywny obiekt obietnicy. Więcej o pracy z obietnicami możesz dowiedzieć się z artykułu Jake’a Archibalda. Są niesamowicie silni.

W przypadku GSAP jego ekspresyjne, zorientowane obiektowo API umożliwia umieszczanie animacji na osi czasu, co daje kontrolę nad harmonogramem i czasem. nie jesteś ograniczony do animacji łańcuchowych; możesz zagnieżdżać osie czasu, nakładać animacje itp.:

Niesamowitość JavaScriptu: przepływ pracy

Animacja jest zasadniczo procesem eksperymentalnym, który wymaga zabawy z synchronizacją i swobodą, aby uzyskać odpowiedni efekt, jakiego potrzebuje aplikacja. Oczywiście, nawet jeśli uznasz, że projekt jest świetny, klient często poprosi o nietrywialne zmiany. W takich sytuacjach zarządzany przepływ pracy staje się ważny.

Chwila Przejścia CSS Chociaż wstawienie do projektu efektów takich jak najechanie kursorem jest dość proste, stają się one niemożliwe do zarządzania, gdy próbujesz sekwencjonować nawet średnio złożone animacje. Właśnie dlatego CSS zapewnia animację klatek kluczowych, która pozwala pogrupować logikę animacji w sekcje.

Jednak podstawową wadą API klatek kluczowych jest to, że trzeba definiować sekcje w kategoriach procentowych, co nie jest intuicyjne. Na przykład:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

@keyframes mojaAnimacja ( 0 % { nieprzezroczystość: 0 ; transformacja: skala(0, 0) ; } 25 % { nieprzezroczystość: 1 ; transformacja: skala(1, 1) ; } 50 % { transformacja: tłumaczenie(100px, 0 ) ; } 100 % { transformacja: tłumaczenie(100px, 100px) ; } } #skrzynka ( animacja: myAnimation 2,75 s; }

Co się stanie, jeśli klient poprosi Cię o wydłużenie animacji TranslationX o sekundę? Wymaga to przebudowania obliczeń matematycznych i zmiany wszystkich (lub większości) wartości procentowych.

W tym artykule chcielibyśmy przedstawić Państwu niektóre z najbardziej przydatnych bibliotek JavaScript, które można wykorzystać do animowania zawartości aplikacji internetowych. Biblioteki te służą do tworzenia animacji dla menu rozwijanych, elementów przesuwnych, animacji paralaksy, a nawet czcionek.

A najważniejsze, że wszystko jest w 100% darmowe zasoby z otwartym kod źródłowy, dzięki czemu możesz je wykorzystać w dowolnym swoim projekcie.

1.Dyanamic.js

Po prostu włącz dynamics.js na stronie, a następnie możesz animować właściwości CSS na dowolnym elemencie DOM. Będziesz także mógł animować właściwości SVG.

Dynamics.js zawiera własną właściwość setTimeout. Powodem jest to, że requestAnimationFrame i setTimeout zachowują się inaczej. Nieruchomość obsługiwana przez wszystkich Obiekty JavaScriptu. Biblioteka została przetestowana pod kątem kompatybilności z Safari 7+, Firefox, Chrome 35+ 34+, IE10+.

2. AnimacjaPlus

Produktywny Biblioteka JavaScriptu, który pomaga animować właściwości CSS i atrybuty SVG.

Animate Plus doskonale nadaje się do organizowania szybkiej interakcji wszystkich elementów sterujących interfejsu, a także długie sekwencje animacje na komputery stacjonarne i urządzenia mobilne.

3. Cta.js

Kompaktowy, produktywny Biblioteka JavaScriptu animować dowolny element („akcja”) wewnątrz dowolnego innego elementu („efekt”) na stronie.

4. Beep.js

Beep.js to zestaw narzędzi do tworzenia przeglądarkowych syntezatorów JavaScript z wykorzystaniem API WebAudio.

5. Iconate.js

Produktywny Biblioteka JavaScriptu animacja i transformacja ikon w różnych przeglądarkach. iconate.js obsługuje także szablony modułowe AMD i CommonJS.

6. Animator Domu

Biblioteka JavaScriptu do wyświetlania małych elementów animacji ASCII w komentarzach DOM. Jest to samodzielna biblioteka, która używa wyłącznie JavaScript ( Animacja odbywa się w węzłach komentarzy, tylko w DOM).

7. Deszczowy dzień

Rainyday.js umożliwia tworzenie realistycznie wyglądających efektów kropli deszczu na szkle przy użyciu kanw HTML5 i JavaScript. Biblioteka zawiera rozszerzalny interfejs API i wbudowaną funkcję wykrywania błędów.

Rainyday.js wykorzystuje moc HTML5, dzięki czemu jest obsługiwany przez większość nowoczesnych przeglądarek.

8. Anima.js

Anima.js pozwala na użycie opóźnień i czasów trwania, nawet w przypadku animacji CSS. Biblioteka służy do tworzenia animacji Transformacje CSS i transformacja 3D z włączoną obsługą JavaScript. Możesz uruchamiać, zatrzymywać, anulować animacje, a nawet tworzyć efekty sterowane zdarzeniami.

9. migaTitle.js

BlinkTitle.js może utworzyć w tytule migający tytuł HTML, alert lub powiadomienie.

10. Snabbt.js

Biblioteka JavaScript przeznaczony do przesuwania elementów, przesuwania, obracania, skalowania, pochylania i zmiany rozmiaru. Dzięki operacjom mnożenia macierzy transformacje można łączyć w dowolną kombinację. Wynik końcowy jest następnie określany przy użyciu macierzy transformacji CSS3.

11. Żywy

Vivus to kompaktowa klasa JavaScript ( żadnych zależności) do animowania plików SVG poprzez rysowanie. Vivus zawiera wiele różne efekty animacji, zaimplementowano możliwość stworzenia własnego skryptu.

12. Impuls

Biblioteka JavaScriptu budować dynamiczne interakcje w oparciu o prawdziwą fizykę, z naciskiem na urządzenia mobilne. Zamiast właściwości animacji, które określają okres czasu, Impulse zmienia pozycję i prędkość. Nie zawiera duża ilość zależności. Nie wymaga jQuery, ale może z nim dobrze współdziałać.

13. Ani.js

AniJS jest deklaratywny Biblioteka JavaScriptu do przetwarzania animacji CSS. Jest w pełni udokumentowany i łatwy w użyciu.

14. Bounce.js

Narzędzie do tworzenia pięknych animacji klatek kluczowych w oparciu o CSS3. Dodaj komponent, wybierz opcję i uzyskaj krótki adres URL lub wyeksportuj kod do CSS.

15. Naklejka.js

Naklejka.js jest Biblioteka JavaScriptu, która umożliwia tworzenie efektów odklejanych naklejek. Biblioteka pracuje przez większość czasu popularne przeglądarki, które obsługują CSS3 ( w tym IE10+). Dystrybuowane pod Licencja MIT Licencja.

16. Wow.js

WOW.js wyświetla animację CSS podczas przewijania strony. Domyślnie powinieneś użyć tej akcji do uruchomienia pliku animate.css, ale możesz łatwo zmienić te ustawienia.

17. Paralaksa.js

Parallax.js to kompaktowe rozwiązanie do tworzenia efektów paralaksy. Biblioteka działa także na smartfonach i tabletach ( z żyroskopem lub sprzętowym czujnikiem ruchu). Parallax.js ma kilka opcji dostosowywania efektu za pomocą „ atrybuty danych"lub poprzez JavaScript. Biblioteka może pracować samodzielnie lub jako biblioteka Wtyczka JQuery i Zepto ( są dwie wersje).