75 Narzędzia do animacji w Internecie, które musisz wypróbować
Animacja to jeden z tych trendów, który ma swoje pazury w interfejsach internetowych. Jego popularność zmienia się, ale zawsze jest gdzieś, jako niezbędny składnik każdej strony internetowej.
Od drobnych, ledwo widocznych, ładujących się spinnerów, po całe przejścia strony, takie jak doświadczenie filmowe, animacja dociera do każdego obszaru naszych projektów.
Dla projektantów chcących włączyć animację, dostępnych jest wiele opcji. Od czysto dekoracyjnych przejść, które tylko upiększają interfejsy, do znaczących efektów, które zwiększają wrażenia użytkownika, nasza kolekcja obejmuje narzędzia, które pozwalają tworzyć animacje o różnych skalach i do różnych celów. Oto 75 wtyczek i bibliotek, które będziesz chciał sprawdzić; nie użyjesz ich wszystkich za każdym razem, ale każdy ma idealny przypadek użycia, a niektóre będziesz używać w kółko ...
1. Animate.css
Animate.css to podstawowa biblioteka zgrabnych animacji w różnych przeglądarkach, które stanowią podstawę wielu rozwiązań. Od klasycznych bouncings i fadings do nowoczesnych zwrotów akcji i unikalnych efektów jest w stanie spełnić potrzeby prawie każdego projektu.
2. Magiczne animacje
Magiczne animacje skupia się na wyjątkowych efektach, które dają interfejsowi szczególną radość. Chociaż biblioteka nie może pochwalić się ogromną różnorodnością, wystarczy wzbogacić doświadczenie użytkownika.
3. Bounce.js
Bounce.js to mały plac zabaw, na którym można przeprowadzać eksperymenty z animacjami opartymi na CSS. Wystarczy dodać komponent i dostroić ustawienia, aby wszystko było gotowe do życia. Na koniec wyeksportuj plik css.
4. AnijS
AnijS pomaga w obsłudze animacji w intuicyjny sposób, używając prostych instrukcji, takich jak If, On, Do, To. Wspaniałą rzeczą jest to, że możesz używać własnych klas lub nawet Animate.css (wspomnianych wcześniej), aby stworzyć coś niesamowitego.
5. Snabbt.js
Snabbt.js słynie z minimalnego podejścia, które przynosi szybkie animacje. Waży zaledwie 5kb; jednak jest w stanie dać każdemu składnikowi widoczny efekt poprzez translację, obracanie, pochylanie, skalowanie lub zmianę rozmiaru jego kształtu.
6. Kute.js
Kute.js to sterlingowy silnik animacji, który zapewnia doskonałą wydajność. Jest szybki i kompatybilny z różnymi przeglądarkami dzięki zestawowi niezawodnych działań awaryjnych, które obsługują starsze przeglądarki. Zawiera liczne wtyczki zapewniające wydajne środowisko pracy.
7. Velocity.js
Velocity.js jest silnikiem animacji, który na pierwszy rzut oka może wyglądać niereprezentatywnie. Jednak jego arsenał zawiera wszystkie regularne typy animacji, takie jak morfing, pętla, łagodzenie, przewijanie itp. Jest szybki i niezależny od jQuery.
8. Lazy Line Painter
Animacje ścieżek SVG są łatwe dzięki Lazy Line Painter . Weź grafikę liniową z programu Illustrator w formacie SVG i prześlij ją do konwertera. Ten ostatni wygeneruje plik jQuery, który obsługuje proces animacji. Jeśli jest to konieczne, możesz wprowadzić zmiany bezpośrednio w kodzie.
9. SVG.js
SVG.js oferuje intuicyjne środowisko, w którym można manipulować i animować SVG. Jest mały i niezależny z czystą składnią i zunifikowanym API. Rób, co chcesz: animuj rozmiar, kolor, położenie, ścieżki tekstowe; transformować komponenty; wiązać wydarzenia itp.
10. Interfejs ruchu
W przeciwieństwie do poprzednich przykładów, Interfejs Motion wykorzystuje zalety SASS do tworzenia intrygujących animacji CSS. Istnieje całe mnóstwo predefiniowanych przejść i efektów, które można zastosować do dowolnego komponentu HTML. Wszystko działa we wszystkich popularnych przeglądarkach z wyjątkiem IE9.
11. Poczekaj! Animować
Czekać! Animować pozwala obsługiwać opóźnienia i czeka w animacjach w prosty sposób. Oblicz wszystkie wymagane odstępy czasu za pomocą małego panelu i stwórz naturalną animację bez zgiełku.
12. Dynamics.js
Dynamics.js jest biblioteką z obsługą JavaScript, która oferuje 9 standardowych efektów do zabawy. Możesz określić czas trwania, częstotliwość, tarcie, rozmiar antycypacji i siłę przewidywania, aby uzyskać realistyczne animacje oparte na fizyce.
13. Choreographer.js
Z Choreographer.js na wyciągnięcie ręki nie powinieneś bać się złożonych animacji, ponieważ ta biblioteka JavaScript wykonuje wszystkie operacje podnoszenia ciężarów. Chociaż zajmuje się ograniczoną ilością animacji, ale pozwala pracować z niestandardowymi funkcjami, dzięki czemu można tworzyć własne arcydzieła.
14. Anime.js
Wyposażony w imponujący zestaw funkcji, który pozwala na łączenie wielu animacji, synchronizowanie różnych instancji, rysowanie linii, przekształcanie obiektów, tworzenie indywidualnych animacji itp. Mechanizm animacji JavaScript zaskoczy Cię swoim potencjałem.
15. Mo.js
Mo.js oznacza ruch w Internecie. Jest niesamowicie szybki, a jednocześnie intuicyjny i prosty. Twórz angażujące szlaki, nieoczekiwane przejścia modalne dialogów, układy bąbelków, animacje pękające i wiele więcej.
16. Sequence.js
Plik Sequence.js to framework oparty na CSS do tworzenia responsywnych animacji opartych na krokach. Jest idealny do tworzenia suwaków, prezentacji, banerów i innych rodzajów dynamicznych komponentów. Wśród kilku planów premium znajdziesz darmową, która daje ci osobistą licencję open source.
17. Shifty
Chytry to silnik do tworzenia klatek pośrednich z silnym naciskiem na optymalizację, szybką wydajność, elastyczność i rozszerzalność. Jest uważana za realną alternatywę dla GreenSock, ale o znacznie prostszym interfejsie.
18. Jest wtorek
wtorek jest samodzielną biblioteką animacji, która może być używana w połączeniu z innymi bibliotekami. Sprawia, że wejścia i wyjścia wyglądają gładko, subtelnie i elegancko. Oferuje wiele standardowych efektów, takich jak zanikanie, rozszerzanie, zmniejszanie, pomijanie itp.
19. CSS Animate
CSS Animate to prymitywny plac zabaw, który generuje prawidłowy i pozbawiony zakłóceń kod dla każdej zwykłej animacji. Ustaw nazwę, klasę, właściwości animacji, właściwości ramki; manipuluj oś czasu i dodawaj znaczniki: jednym słowem dopasuj wszystko, czego potrzebujesz, aby stworzyć regularną animację opartą na klatce kluczowej.
20. Vivus.js
Wysyłka z trzema rodzajami animacji: opóźnianie, synchronizacja i odkrywanie jeden po drugim, Vivus.js narysuje SVG w gładki i naturalny sposób, dzięki czemu pojawienie się komponentu będzie cudownym doświadczeniem. Możesz przejść do predefiniowanych animacji lub użyć własnych funkcji niestandardowych.
21. Bonsai.js
Bonsai.js jest biblioteką JavaScript dla zaawansowanych manipulacji graficznych. Ma dość prosty API i renderer SVG. Skorzystaj z edytora online, aby dać jazdę próbną, zapoznaj się ze składnią, a nawet pobierz kilka próbek, aby zacząć.
22. GSAP od GreenSock
GSAP to potężna platforma animacji, która jest przeznaczona do profesjonalnych animacji. Posiada liczne wtyczki i narzędzia, które są odpowiedzialne za różne typy animacji. Składa się z BezierPlugin, CSSPlugin, DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, TweenLite itp.
23. Popmotion
Popmotion to kolejna lekka i poręczna alternatywa dla Greensock w naszej kolekcji. Jest to silnik ruchu z pełną kontrolą nad każdą ramą. Posiada zaawansowaną animację, mieszanie kolorów oraz szereg funkcji i działań do tworzenia złożonych rozwiązań.
24. Tween.js
Wiele niesamowitych rzeczy powstaje z pomocą Tween.js . Jest to najnowocześniejszy silnik tweeningowy z licznymi parametrami, dzięki którym animacja jest pod kontrolą. Jest to również doskonałe rozwiązanie do ulepszania projektów kierowanych przez Three.js.
25. Hover.css
Hover.css Biblioteka może być podzielona na kilka podstawowych kategorii: przejścia 2D, przejścia tła, animacje ikon, przejścia granic, przejścia cienia i poświaty, dymki i loki. Zastosuj te efekty do dowolnego elementu w projekcie bez ograniczeń.
26. Tranzyt
Lista funkcji Tranzyt jest raczej krótki, ale zawiera najważniejsze elementy do budowy transformacji 2D i 3D. Na przykład możesz określić opóźnienia i czasy trwania, dodać funkcję łagodzenia, użyć względnych wartości i więcej.
27. Rakieta
Rakieta jest rozwiązaniem do upraszczania ruchu obiektu z jednego punktu do drugiego. Jest 8 efektów specjalnych, takich jak pulsacja lub rotacja, które nadają tej podróży uroczą radość .
28. Animo.js
Animo.js jest stosunkowo małym narzędziem do uzyskiwania uchwytów na przejściach i animacjach. Posiada zestaw dodatkowych wtyczek, takich jak odliczanie, obracanie i animacja, które wzbogacają bibliotekę i znacznie ułatwiają osiągnięcie pożądanego efektu.
29. Shift.css
Shift.css to framework do tworzenia animacji w kontenerze, który wpływa zarówno na elementy zagnieżdżone, jak i adaptacyjne. Istnieje 15 rodzajów standardowych animacji, w tym przenoszenie, wchodzenie, wychodzenie, upuszczanie i inne.
30. CSShake
CSShake zawiera 11 klas, które wymuszają wstrząsy elementami twojego DOM. Możesz wybrać kierunek (poziomy lub pionowy), typ (stały, szalony, stały, porcja), intensywność (wolny lub twardy) lub po prostu wybierz opcję domyślną.
31. Szafran
Jeśli wolisz używać miksów, aby łatwo i szybko manipulować animacjami i przejściami Szafran jest z pewnością dla ciebie. Jest to kompilacja metod wielokrotnego użytku, które są napisane w Sassie, gdzie można ustawić zmienne i parametry.
32. CSSynth
CSSynth to mały edytor, w którym możesz cieszyć się pięknem synchronizacji. Animacja opiera się na zakresie kwadratów, których liczbę można określić na lewym panelu. Wybierz efekt, ustaw opóźnienie i wybierz, czy chcesz pobrać kod wyniku w formacie CSS lub SCSS.
33. Ceaser
Ceaser to stare, sprawdzone na czas narzędzie do przeprowadzania eksperymentów z klasyczną animacją łagodzenia. Istnieje wiele wariantów, zaczynając od liniowego i kończąc na niestandardowym. Dwa dodatkowe parametry (czas trwania i efekt) pomogą poprawić wynik.
34. Morf.js
Aby nieco wyżej wspomnieć o tym narzędziu, możesz spróbować Morf.js . Oferuje przejścia oparte na niestandardowych funkcjach wygładzania. Dostępnych jest prawie 40 wstępnie zdefiniowanych opcji, które można szybko dostosować do projektu.
35. Voxel.css
Voxel.css został stworzony specjalnie do renderowania 3D. Jego prosta implementacja pozwala nawet początkującym na opanowanie 3D CSS. Biblioteka ma 4 ważne klasy: Scene, World, Editor i Voxel, które pomagają tworzyć gry i cieszyć się z akcji.
36. Repaintless.css
Repaintless.css wykorzystuje technikę FLIP do szybkiego i płynnego animowania. Chociaż wymaga to pewnych ulepszeń; jest to jednak doskonały początek dla tych, którzy zwracają szczególną uwagę na wydajność.
37. MixItUp
Wymieszaj to jest biblioteką upiększającą filtrowanie, sortowanie, wstawianie i inne domyślne akcje właściwe dla większości interfejsów, takich jak portfele, galerie itp. Jest wolna od zależności i zapewnia wysoką wydajność.
38. Wallop
Jak wskazuje tytuł, Pobić służy do przyjemnego pokazywania i ukrywania rzeczy; przewidywalnie jego ogólne zastosowanie polega na budowaniu suwaków. Jednak nikt nie powstrzyma cię przed wykorzystaniem swojego potencjału i stworzeniem czegoś interesującego i intrygującego.
39. Ramjet
Ramjet przekształca jeden element w drugi z iluzją ruchu realizowaną za pomocą funkcji łagodzenia. Jest w stanie pracować z elementami DOM, SVG, statycznymi obrazami lub animowanymi obrazami.
40. jQuery DrawSVG
Oparty na potężnym silniku animacyjnym jQuery, efektywnie rysuje wszystkie ścieżki wewnątrz SVG, nadając zdjęciu dramatyczne i jednocześnie eleganckie wejście. Procedura jest prosta: dodaj wtyczka do strony, zainicjuj ją i uruchom animację.
41. Animatic.js
Animatic.js to świetne rozwiązanie dla różnych przeglądarek ze zintegrowanymi regułami fizyki, które wykorzystuje transformacje CSS, transformacje 3D i JavaScript, aby ożywić wszystko. Jego głównym zadaniem jest zmniejszenie wysiłków na rzecz animowania wielu obiektów naraz. Możesz budować zarówno równoległe, jak i sekwencyjne animacje, starannie dobierając czas trwania, opóźnienie i funkcję łagodzenia.
42. Move.js
Move.js jest uproszczonym narzędziem do tworzenia regularnych animacji, takich jak skalowanie, pochylanie, przenoszenie lub tłumaczenie. Każda animacja może zostać ulepszona dzięki klasycznej funkcji łatwości.
43. Eg.js
Eg.js to starannie zmontowana kolekcja różnych efektów i dynamicznych elementów, które mają na celu wzmocnienie interakcji w interfejsach. Jest 8 potężnych komponentów, które porządkują podstawowe zadania i 6 głównych metod i zdarzeń do innych celów.
44. GFX
GFX jest atrakcyjną biblioteką animacji 3D do budowania animacji CSS3 w sposób programistyczny. Działa z jQuery, co znacznie ułatwia uzyskanie pożądanego rezultatu. Możesz bawić się skalowaniem, obracaniem, tłumaczeniem, pochylaniem i innymi rzeczami.
45. Stylie
Chociaż tak jest powiedziane Stylie to narzędzie do zabawy, ale z pewnością zrobi wrażenie na twoich możliwościach. Centrum sterowania ma 4 zakładki, które umożliwiają dostrajanie klatek kluczowych, ułatwień, opcji eksportu i HTML, dzięki czemu złożone animacje są łatwe w użyciu.
46. Iconate.js
Iconate.js wtapia życie w transformacje ikon, poprawiając przejście między dwoma przedmiotami dzięki przyjemnemu efektowi towarzyszącemu. Działa wspaniale nie tylko z Font Awesome, ale także z Glyphicons, a nawet z własnym zestawem piktogramów.
47. AnimateMate
AnimateMate to małe narzędzie do tworzenia i eksportowania animacji na małą skalę ze środowiska Sketch. Nie jest to coś wyjątkowego, ale pozwala grać z klatkami kluczowymi, dodawać funkcje wygładzania, sekwencje kontrolne i trochę więcej.
48. CAAT
CAAT (co oznacza Canvas Advanced Animation Toolkit) to szterlingowa struktura, która tworzy potężny tandem z JavaScript. Jego zestaw narzędzi zawiera sceny, wiele technologii renderowania, maski przycinające, standardowe pakiety zachowań itp.
49. Granim.js
Granim.js jest niewielką biblioteką JavaScript służącą do przyprawiania interfejsów do interaktywnych, opartych na gradientach elementów. Może to być standardowa animacja gradientu radialnego, dynamiczne gradienty zastosowane powyżej tła obrazu lub ruchome gradienty połączone z maskami obrazu.
50. Animista
Stworzony przez Ana Travas, Animista to plac zabaw do eksperymentów z garstką konwencjonalnych i niespotykanych predefiniowanych animacji sterowanych przez CSS. Wybierz czas trwania, funkcję pomiaru czasu, opóźnienie, liczbę powtórzeń i kilka innych opcji, aby sprawdzić wynik.
51. Obnoxious.css
Obnoxious.css zawiera 5 unikalnych animacji opartych na CSS, które wymuszają na elementach interfejsu drgania, skręcania, powiększania, naśladowania efektu stroboskopowego lub zmiany ciężaru czcionki. Wszystko, co musisz zrobić, to zastosować preferowaną klasę do pożądanego div.
52. Animatelo
Animatelo zawiera mnóstwo przyciągających wzrok efektów dynamicznych, które zostały zapożyczone ze słynnego i potężnego programu Animate.css, zapewniając łatwiejszy sposób ich zastosowania. Dzięki polyfillowi Web Animations API jest obsługiwany przez wszystkie nowoczesne przeglądarki.
53. Foxholder
Foxholder to pakiet 15 fajnych drobnych efektów, które zostały stworzone specjalnie w celu poprawy interakcji użytkownika z formularzem. Każda metoda podkreśla pole wejściowe na swój sposób: może rozjaśnić granice, dodać wskazówki wizualne, wstawić tekst ruchu i wiele więcej.
54. Rhythm.js
Rhythm.js jest o zabawnych inspirowanych disco małych animacjach. Ta biblioteka JavaScript zawiera efekty, które imitują ruchy taneczne. Istnieje prawie 20 opcji, które dodadzą boogie-woogie do twojej witryny.
55. Colorido.js
Podobnie jak Granim.js, ta wtyczka z obsługą JavaScript został stworzony, aby manipulować właściwością kolorów. Pomaga dynamicznie zmieniać dźwięki i krycie tła i tekstu, a także tworzyć niestatyczne gradienty radialne, liniowe, diagonalne i poziome.
56. Barba.js
Barba.js wykorzystuje PJAX (technikę opartą na języku ajax), aby odciążyć użytkowników tak zwanego twardego przełączania odświeżania między stronami. Po prostu ukrywa stary pojemnik i pokazuje nowy pojemnik w subtelny sposób.
57. ScrollReveal.js
ScrollReveal.js jest popularnym narzędziem do tworzenia animacji przewijania. Dzięki swojej głównej metodzie reveal () możesz zarządzać różnymi animacjami i kontrolować wszystkie ich standardowe aspekty. Wspaniałą rzeczą jest to, że działa dobrze zarówno w przeglądarkach internetowych, jak i mobilnych.
58. Scrollanim
Scrollanim jest mniej wyrafinowanym, ale bardziej poręcznym i prostszym narzędziem do użycia niż poprzedni przykład. Chociaż sprzyja to CSS3, ale pozwala dodawać animacje za pomocą JavaScript API do tworzenia animacji uruchamianych z przewijaniem. Posiada szereg gotowych rozwiązań, które możesz szybko wprowadzić do swojego projektu.
59. ScrollTrigger
Podczas gdy poprzednie dwa rozwiązania koncentrują się głównie na tradycyjnym przewijaniu pionowym, ten służy do tworzenia długich horyzontalnych stron internetowych. Pozwala budować dynamiczne interfejsy na płaszczyźnie osi X wypełnionej pięknymi animacjami CSS3 z dość prymitywną składnią.
60. Force.js
Force.js to niewielkie rozwiązanie pozbawione ogromnej funkcjonalności i bogactwa opcji. Jest on jednak idealny do zwykłych zadań, takich jak ustawianie obiektów w subtelny ruch lub upiększenie przewijania. Jak zwykle, rozluźnienie leży w jego rdzeniu, czyniąc animację czystą i zgrabną.
61. AOS
AOS oznacza animację na przewijanie. Robi to, co mówi - zapewnia mnóstwo żywych, predefiniowanych efektów, które są wyzwalane przez przewijanie. Jeśli chcesz nadać sekcji dramatyczne wejście bez głębokiego wkopywania się w kod, to z pewnością jest to dla ciebie.
62. Rellax
Rellax jest dla pięknej paralaksy. Jest to lekka, waniliowa biblioteka JavaScript, która nadaje interfejsowi subtelny wymiar 3D.
63. Tilt.js
Tilt.js wytwarza intrygujący efekt pochylenia sterowany paralaksą. Przesunie obiekty w pochyłą pozycję, imitując 3D na podstawowej płaszczyźnie 2D. Możesz zamocować oś, dzięki czemu efekt będzie bardziej kuszący i interesujący, lub odtwarzać jakieś odblaski lub uczucie unoszenia się.
64. Przekształć - kiedy
Przekształć - kiedy to świetne rozwiązanie do projektowania opowiadań historii z wysoką wydajnością i natywną obsługą urządzeń mobilnych. Obstawia on dwa kluczowe parametry: czas i pozycję przewijania, co sprawia, że przygoda użytkownika przez interfejs jest dokładnie kontrolowana przez twoją stronę. Działa zarówno z SVG, jak i zwykłymi elementami HTML.
65. Animacja CSS3
To to oldschoolowy generator z podglądem na żywo do tworzenia podstawowych animacji CSS3. Istnieje standardowe centrum sterowania, w którym można dostosować czas trwania przejścia, liczbę iteracji, funkcje czasowe itd. Procedura jest prosta: ustaw wszystko, skopiuj otrzymane kody HTML i CSS i wklej je do projektu.
66. Curve.js
Curve.js tchnie życie w linie, sprawiając, że "tańczą" i obracają się jak fala. Użyj go, aby stworzyć abstrakcyjne, eleganckie inspirowane geometrią tła lub elementy środkowe.
67. Animator.js
Animator.js mówi się, że jest elastyczny, wydajny i lekki. Oferuje najprostszy sposób zarządzania klatkami kluczowymi i generowania animacji CSS o różnych skalach. Jest również wolny od zależności.
68. Cel-animacja
Cel-animacja to mieszanka Sass, która daje kontrolę nad tradycyjnymi klatkami kluczowymi. Możesz włączyć SVG lub dowolny typ elementów HTML.
69. Scrollissimo
Scrollismo został stworzony do współpracy z Greensock umiejętnie i płynnie animując obiekty na przewinięciu użytkownika. Dodatkowa dołączona wtyczka JavaScript do gadżetów z ekranem dotykowym obejmuje wiele urządzeń.
70. jqClouds
jqClouds jest prymitywną wtyczką, która generuje i zapełnia projekt chmurami przesuwającymi się nad interfejsem. Możesz zmienić koncepcję, zastępując chmury jakimkolwiek innym obiektem, aby nadać statycznemu interfejsowi szczególny dynamiczny smak.
71. Animacja kolorów
Jak się domyślacie, to narzędzie służy do animowania tonu i przezroczystości tła, obramowania lub tekstu. Właściwie działa z kolorem dowolnego obiektu, który ma go jako właściwość.
72. Flubber
Aby wykluczyć nagłe skoki i drastyczne metamorfozy, które mogą wystąpić, gdy jeden obiekt zamienia się w inny, możesz go użyć Flubber . Wtyczka oferuje płynne interpolacje między dwoma kształtami. Jedyną wadą jest to, że działa tylko z grafiką 2D.
73. Particles.js
Jeśli masz ochotę na zabawne animacje cząsteczek - popularne obecnie - możesz użyć ten poręczny generator . Opiera się na realistycznej bibliotece JavaScript, która wykonuje całą pracę. Ustaw preferencje, takie jak kolor, liczba, kształt, rozmiar, krycie itp. I po prostu wyeksportuj wynik.
74. Animacja 3D linii z Three.js
To jest mały skrypt który nie posiada wszystkich możliwości wyżej wymienionych wtyczek. Mimo to, dodaje do twojego interfejsu piękne animowane tło wypełnione animacją cząstek. Możesz skonfigurować kolor, linie, krycie i kilka innych opcji, aby dopasować je do twojego środowiska.
75. Three.js
Nie mniej ważny, Three.js - potężna i wszechstronna biblioteka, która stoi za wieloma imponującymi stronami internetowymi. Nadaje się zarówno do prostych, jak i złożonych projektów. Pozwala ci pracować
