8 bibliotek JavaScript do animacji SVG
SVG to niezależna od rozdzielczości grafika. To znaczy, że tak będzie dobrze wyglądać na każdym ekranie bez utraty jakości. Poza tym możesz również ożywić SVG dzięki efektom animacji.
W jednym z postów poprzedniej serii SVG pokazaliśmy, jak działa animacja SVG z
Więcej na stronie Hongkiat.com:
- Animate.css - Biblioteka CSS3 do łatwego tworzenia animacji
- Łatwo animuj tekst za pomocą Textillate.js
- Jak przekonwertować tekst Photoshopa na SVG
- Animuj, aby ukrywać i przesuwać zawartość za pomocą jQuery
1. Vivus
Vivus to biblioteka JavaScript, która daje Twojemu SVG wrażenie, że jest rysowany. Vivus działa po wyjęciu z pudełka bez potrzeby jakichkolwiek zależności (np. JQuery). Po prostu dołącz .js plik w kodzie HTML i wyznacz element SVG, który chcesz animować, a także niektóre wstępnie ustawione opcje, aby natychmiast rozpocząć animację.
Na przykład:
nowy Vivus ('svg-element', typ: 'oneByOne', czas trwania: 200); Powyższe animuje mój element SVG, który ma element svg Identyfikator w 200 milisekund. Każdy element tego SVG zostanie narysowany jeden po drugim w tym przedziale czasu.
2. Bonsai
Bonsai to potężna biblioteka JavaScript, która pozwala rysować, przekształcać oraz animować elementy graficzne na stronach internetowych. Obsługuje zarówno typ graficzny HTML5 Canvas, jak i SVG. Z Bonsai możesz zbudować prosty prostokąt lub okrąg lub, jeśli chcesz, a pełnoprawny multiplayer animowana gra jak ta. Możesz użyć Orbity, aby poczuć, jak Bonsai działa w akcji na żywo lub sprawdzić kilka imponujących przykładów, aby czerpać z nich inspirację.
3. Prędkość
Velocity to biblioteka JavaScript stworzona do szybkich animacji. Prędkość Velocity podczas renderowania animacji jest niesamowicie szybka. W porównaniu z jQuery, a nawet CSS przewyższa go. API Velocity działa podobnie do animacji w jQuery, z wyjątkiem tego, że używa aliasu słowa kluczowego $ .velocity () zamiast $ .animate (). Poza tym możesz użyć dokładnie takich samych słów kluczowych animacji, jak fadeIn i fadeOut.
4. Rafael
RaphaelJS to biblioteka, która pozwala rysować i animować grafikę wektorową SVG na stronach internetowych. Obsługuje szeroką gamę przeglądarek aż do IE6, co sprawia, że Raphael jest najbardziej niezawodną biblioteką JavaScript w niszy. Z RaphaelJS możesz tworzyć interaktywne wykresy analityczne, mapy świata i interakcje gry podobne do Counter Strike.
5. Snap
SnapSVG to kolejna popularna biblioteka JavaScript do animacji SVG opracowana przez dewelopera Rafaela, Dmitry Baranovskiy, wraz z Adobe Web Platform Team od podstaw. W przeciwieństwie do Rafaela SnapSVG jest przeznaczony tylko dla najnowszych przeglądarek. Dzięki temu biblioteka jest znacznie mniejsza niż Raphael i obsługuje funkcje SVG, takie jak obcinanie i maskowanie.
6. Malarz Leniwa Linia
Lazy Line Painter to wtyczka jQuery do animowania ścieżek SVG w celu animowania sekwencji rysowania, podobna do Vivus. Zła wiadomość jest taka, że ta wtyczka robi tylko to bardzo specyficzne. Dlatego, gdy importujesz SVG z aplikacji takich jak Illustrator lub Inkscape, upewnij się, że na SVG nie ma koloru wypełnienia, tylko ścieżki.
7. SVG.js
SVG.js to lekka biblioteka do manipulowania i animowania SVG. Dzięki tej bibliotece będziesz mógł animować rozmiar, pozycję lub kolor w swoim elemencie SVG. Nie tylko animuje; możesz także zastosować dodatkowe wtyczki, aby dodać dodatkowe funkcje. Ten przykład używa wtyczki svg.filter.js do zastosowania filtrów takich jak rozmycie gaussowskie, desaturat, kontrast, sepia itp. Do obrazu.
8. Chodnik
Chodnik obsługuje trzy rodzaje elementów, ścieżka, linia, i polilinia używane do rysowania linii SVG. Oto przykład z wielokąta, który pokazuje animację linii konsoli PlayStation 4.
