Dwadzieścia animacji SVG na żywo z kodem do skopiowania: rysowanie linii, loadery, przejścia ikon, rosnące słupki wykresu i morfing ścieżek, plus CSS kontra SMIL kontra GSAP i SVG kontra Lottie.
Animacja SVG przesuwa lub przerysowuje kształty wektorowe za pomocą CSS, SMIL lub JavaScript. Klatki kluczowe CSS obsługują transformacje, opacity i sztuczkę rysowania linii przez stroke-dasharray oraz stroke-dashoffset. Znaczniki SMIL, takie jak <animate>, potrafią morfować ścieżki i podążać ścieżkami ruchu bez skryptów. Biblioteki takie jak GSAP dodają osie czasu i sterowanie przewijaniem. Lottie sprawdza się przy animacjach z After Effects przygotowanych przez projektantów.
Jaka technika do jakiego efektu
Każda animacja na tej stronie działa na żywo z kodu obok niej, w ramce z wyłączonymi skryptami, więc to, co kopiujesz, działa dokładnie tak samo bez JavaScript. Każda zatrzymuje się też dla odwiedzających, którzy w systemie poprosili o ograniczenie ruchu. Kreator rysowania linii na górze pisze sztuczkę ze stroke dla dowolnej wklejonej ścieżki.
Nadaj kresce przez stroke-dasharray kreskę o długości całej ścieżki, wypchnij ją z widoku równym stroke-dashoffset, a potem animuj przesunięcie do 0. Kreska wsuwa się na miejsce i linia wygląda, jakby rysowała się sama. pathLength="1" pozwala użyć 1 dla obu wartości.
Nie. Chrome ogłosił w 2015 plan wycofania go, a potem ten plan zawiesił. Elementy SMIL, takie jak animate, animateTransform i animateMotion, działają we wszystkich obecnych głównych przeglądarkach i są częścią specyfikacji SVG.
Częściowo. Właściwość CSS d przyjmuje wartości path() i można ją animować w przeglądarkach opartych na Chromium oraz w Firefoksie, ale w chwili pisania Safari jej nie obsługuje, więc sprawdź caniuse. Obie ścieżki muszą mieć tę samą liczbę i ten sam typ poleceń. SMIL animate na atrybucie d działa szerzej.
Używaj zwykłego SVG z CSS dla ikon, loaderów i prostych ilustracji, które da się opisać w kodzie. Używaj Lottie, gdy motion designer buduje w After Effects złożoną postać lub scenę, a Ty chcesz ją wiernie odtworzyć. Lottie potrzebuje biblioteki odtwarzacza; zwykłe SVG nie.
Umieść animacje CSS w media query prefers-reduced-motion albo wyłącz je wewnątrz niego. CSS nie może wstrzymać SMIL, więc w tym media query pokaż nieruchomą wersję grafiki albo wywołaj ze skryptu pauseAnimations() na elemencie svg.
Wszystkie dwadzieścia działają bez JavaScript i zawierają regułę ograniczenia ruchu. Każdą możesz edytować na miejscu.
Klasyczna sztuczka ze stroke z pathLength=1, więc wartości kreski nie zależą od prawdziwej długości.
Dłuższa ścieżka rysowana powoli z liniowym easingiem wygląda jak poruszające się pióro.
Koło z częściową kreską się obraca; transform-box utrzymuje obrót na środku.
Przesunięte wartości animation-delay zamieniają jeden zestaw klatek kluczowych w falę.
Skalowanie i wygaszanie razem dają efekt radaru lub wskaźnika na żywo.
Każdy słupek skaluje się w osi Y od podstawy z własnym czasem trwania.
Słupki rosną raz po załadowaniu. forwards zachowuje stan końcowy, a reguła ograniczenia ruchu po prostu pokazuje gotowy wykres.
Ten sam pomysł z kreską na kole. Obróć je o -90 stopni, aby zaczynało się na górze.
Najedź na przycisk lub ustaw na nim fokus. Każda linia przesuwa się i obraca przez transition, bez klatek kluczowych.
Dwa szybkie kroki skalowania, a potem przerwa, wszystko w jednej liście klatek kluczowych.
Działa w Chromium i Firefoksie. Tam, gdzie d nie jest obsługiwane, kształt pozostaje kwadratem. Obie ścieżki używają tych samych poleceń w tej samej kolejności.
SMIL zmienia sam atrybut d, który ma szersze wsparcie niż właściwość CSS d. Przy ograniczeniu ruchu widać nieruchomą kopię.
rotate=auto obraca kształt w kierunku ruchu.
Wartości rotate przyjmują punkt środkowy jako drugą i trzecią liczbę.
SMIL animuje kolory punktów gradientu, co potrafią też klatki kluczowe CSS na stop-color.
Ścieżka dwa razy szersza niż widok przesuwa się w lewo dokładnie o jeden okres, więc pętla nie ma szwu.
Obrót od góry dzwonka, wywoływany najechaniem lub fokusem klawiatury.
Przerywana kreska z animowanym przesunięciem, wygląd ramki zaznaczenia z edytorów grafiki.
Krótkie kreski na zakrzywionej linii poruszają się bez przerwy, sugerując kierunek.
Spłaszczenie przy uderzeniu oddaje ciężar. transform-origin na dole trzyma piłkę na podłodze, gdy się spłaszcza.
Trzy sposoby animowania SVG
Tylko kod, bo ramki demonstracyjne mają wyłączone skrypty. GSAP można używać za darmo na jego własnej licencji, która nie jest MIT, więc przeczytaj warunki przed wdrożeniem.
Gwiazda
Fala
Dom
Odtwórz ponownie
Twój system prosi o ograniczenie ruchu, więc rysunek jest pokazany jako gotowy. Naciśnij Odtwórz ponownie, aby odtworzyć go raz.
Dane ścieżki (atrybut d)
Czas trwania: {n}s
Grubość kreski: {n}
Easing
Kolor
SVG i CSS
Kopiuj kod
Zacznij za darmo · Bez karty kredytowej