Anime.js - lekka biblioteka animacji JavaScript

Animacja internetowa przeszła długą drogę. Programiści nie tylko mogą tworzyć animacje przy użyciu kombi CSS / SVG / JS, ale są też dziesiątki darmowych bibliotek aby zaoszczędzić czas w procesie.

Jednym z moich ulubionych jest Anime.js, całkowicie darmowe, otwarte oprogramowanie Biblioteka animacji JavaScript.

Ta biblioteka może Zrób to wszystko. Jego zbudowany na JavaScript ale to również opiera się głównie na animacjach CSS. Możesz kierować poszczególne elementy strony przez DOM lub możesz nawet celować niestandardowe SVG.

Cała dokumentacja jest samodzielnie hostowane na GitHub, więc może być konieczne przewinięcie, aby znaleźć dokładnie to, czego szukasz. Ale każda animacja jest dostępna ma kilka parametrów takie jak opóźnienie, czas trwania i złagodzenie.

Zanotuj tę bibliotekę nie przychodzi z wieloma domyślnymi stylami animacji. Anime.js to wykonane dla programistów którzy chcą dostosować swoje animacje bez pisania pełnego kodu.

Dla przykład na żywo, sprawdź pióro Codepen poniżej. Kod jest niezwykle prosty ale możesz uzyskać wiarygodną animację squash i stretch plus przewidywanie, obie podstawy animacji.

Uczciwe ostrzeżenie: biblioteka Anime.js jest gęsty. Nie jest aż tak trudno stworzyć własną animację, ale musisz zrozumieć niektóre podstawy jak easing i wspólna składnia JavaScript dla funkcji zwrotnych i opcji.

Ale wszystkie potrzebne informacje jest na strona repo, włącznie z dużo próbek kodu i szczegółowe tabele dokumentacji. Możesz przeglądać otwarte raporty o błędach lub sprawdzać obsługę przeglądarki, która obecnie zawiera wszystkie główne przeglądarki i IE 10+.

Jest to z pewnością jedna z najlepszych bibliotek animacji dla programistów internetowych i powinna być najlepszym rozwiązaniem dla dowolna złożona animacja internetowa.

Aby zobaczyć kilka żywe przykłady, sprawdź tę kolekcję demonstracji Anime.js na CodePen. Poniżej osadziłem mój ulubiony, który animuje całe logo od podstaw, z prawdziwą żywotnością.