Przewodnik dla początkujących po animacji SVG za pomocą CSS

Skalowalna grafika wektorowa (SVG) to coś więcej niż tylko pliki graficzne. Jako aplikacja XML, pliki SVG zawierają znaczniki, które wyglądają i działają podobnie do HTML. Możesz ich również używać w połączeniu z kodem CSS i JavaScript. Umożliwia to animację plików SVG, tworzenie złożonych obrazów, które dobrze sprawdzają się w projektowaniu stron internetowych i innych dynamicznych środowiskach.

Ale jak zrobić animację SVG? Zacznij od kształtu SVG, animuj go za pomocą CSS i wykorzystaj te zasady, aby wykorzystać animację we własnej pracy.

Animowanie SVG za pomocą HTML i CSS

Chociaż możesz używać JavaScript do programowego animowania SVG, CSS ma teraz również dobrą obsługę animacji. Cały przykładowy kod można znaleźć na CodePen dla tego projektu.

Tworzenie obrazu SVG wewnątrz HTML

Pierwszym krokiem w tym procesie jest zbudowanie obrazu SVG, z którym będziesz pracować. Możesz znaleźć znaczniki SVG w panelu HTML w CodePen.

Struktura SVG

Chociaż pliki SVG mają podobny format do HTML, znaczniki używane do ich tworzenia są inne. SVG ma otwierające i zamykające znaczniki (), które mogą zawierać wiele różnych właściwości. W naszym przypadku używamy

ID oraz viewBox nieruchomości. Właściwość id działa jak każdy inny identyfikator HTML, zapewniając unikalny identyfikator do użycia w CSS/JS. Właściwość viewBox ustawia rozmiar naszego SVG.

<!-- SVG z responsywnym rozmiarem -->
<identyfikator svg="MUOSVGAnimacja" viewBox="0 0 800 600">
<!-- Zawartość SVG -->
</svg>

Zamiast tego można użyć właściwości width i height, jak pokazano w poniższym przykładzie. Jednak viewBox tworzy responsywny plik SVG, który będzie pasował do rozmiaru widocznego obszaru bez naruszania jego proporcji.

 SVG z statycznym rozmiarem 
<identyfikator svg="MUOSVGAnimacja" szerokość="800" wysokość="600">
<!-- Zawartość SVG -->
</svg>

Kształty SVG

Możesz tworzyć szczegółowe obrazy za pomocą SVG, mając do dyspozycji szereg różnych narzędzi kształtów. Ten przykład SVG używa trzech dostępnych kształtów, ale istnieje wiele innych. Każdy z kształtów w tym przykładzie ma unikalny identyfikator, którego animacje CSS mogą później używać.

• SVG Ellipse: To narzędzie w kształcie koła/owalu. Określa właściwości promienia osi y/x (rx/ry), koloru wypełnienia i szerokości obrysu. Należy pamiętać, że promień wybrany za pomocą tego narzędzia będzie równy połowie średnicy kształtu.

<id elipsy="okrąg" rx="100" ry="100" wypełnienie="#ffed00" szerokość-obrysu="0"/>

• SVG Rect: Narzędzie SVG Rect tworzy kwadrat lub prostokąt. Ten ma właściwości szerokości/wysokości, przekształcenia, koloru wypełnienia i szerokości obrysu.

<prosty identyfikator="kwadrat" szerokość="200" wysokość="200" przekształć="przetłumacz (300 200)" wypełnienie="#05f"
 szerokość-obrysu="0"/>

• Wielokąt SVG: Użyj wielokąta SVG, aby ustawić określoną liczbę punktów i utworzyć dowolne kształty o różnych rozmiarach. Wielokąt w przykładzie jest trójboczny, co czyni go trójkątem, a położenie każdego punktu można zobaczyć w jego właściwościach. Oprócz tego mamy właściwości dotyczące pozycji, koloru wypełnienia i szerokości obrysu trójkąta.

<identyfikator wielokąta="trójkąt" punkty="15,-97 115,102 -84,102 15,-97"
 przekształć="przetłumacz (0,0)" wypełnienie="#f00" szerokość-obrysu="0"/>

Po umieszczeniu animacji kształty ułożą się obok siebie.

Te trzy kształty SVG są jednymi z najczęstszych, ale jest więcej do wyboru. Możesz użyć następujących kształtów, gdy praca z animacją SVG:

• SVG Circle: Ten kształt jest podobny do elipsy, ale zawsze ma równe promienie X i Y.
• Linia SVG: Linia SVG to pojedynczy segment linii z dwoma punktami, po jednym na każdym końcu.
• Polilinia SVG: Polilinie są jak linie podstawowe, tylko mogą mieć więcej niż dwa punkty.
• Wielokąt SVG: Wielokąty SVG są jak prostokąty, tylko mogą mieć więcej niż cztery punkty, co umożliwia tworzenie złożonych kształtów.
• Ścieżka SVG: Ścieżki SVG działają podobnie do narzędzia Pióro w programie Adobe Photoshop. Linie mogą łączyć się jak polilinia/wielokąt, ale można do nich również zastosować krzywe.

Jak animować SVG za pomocą CSS

Teraz, gdy masz już kilka kształtów w swoim SVG, czas przejść do animacji CSS. Każdy z kształtów ma inną animację, aby zademonstrować niektóre z dostępnych opcji, ale jest o wiele więcej do zbadania z własnymi projektami. Okrąg przesuwa się po ekranie, rogi kwadratu stają się okrągłe, a trójkąt się obraca. Wszystkie te zastosowania Klatki kluczowe CSS do tworzenia płynnych animacji.

Przesuwanie okręgu za pomocą funkcji Przekształć i Tłumacz

Okrąg w przykładzie SVG przesuwa się od dołu do góry ekranu podczas cyklu animacji. Musisz przypisać animację do okręgu, zanim będzie mógł się poruszać, za pomocą właściwości CSS:

#okrąg {
 animacja: circle_anim 2000ms liniowy nieskończony normalny do przodu
}

Pierwsze słowo w wartości, circle_anim, to nazwa animacji. Działa przez dwie sekundy (2000ms). To ma liniowy krzywa, która utrzymuje stałą prędkość i jest ustawiona na nieskończony ile razy w ciągu do przodu kierunek. Możesz użyć klatek kluczowych, aby zdefiniować poszczególne fazy animacji:

@klatki kluczowe krąg_anim {
 0% { przekształcać: Tłumaczyć(155 pikseli, 305 pikseli) }
 45% { przekształcać: Tłumaczyć(155 pikseli, -123px) }
 50% { przekształcać: Tłumaczyć(-123px, -123px) }
 55% { przekształcać: Tłumaczyć(-123px, 728 pikseli) }
 60% { przekształcać: Tłumaczyć(155 pikseli, 728 pikseli) }
 100% { przekształcać: Tłumaczyć(155 pikseli, 305 pikseli) }
}

W tej animacji jest sześć klatek kluczowych, więc w każdym cyklu okrąg przesunie się do sześciu różnych miejsc. The transformacja: tłumacz właściwość określa położenie okręgu na każdym etapie. Przy 0% okrąg znajduje się na środku ekranu i przesuwa się w górę i poza pole widzenia o 45%. O 50% przesunął się w lewo od ekranu, zanim zszedł poniżej widocznego obszaru o 55%. Okrąg powraca do swojej pozycji poziomej o 60%, a animacja jest zakończona w 100% z okręgiem z powrotem na środku ekranu.

Animuj właściwość promienia granicznego kwadratu

Kwadrat w przykładzie stanowi dobre odniesienie do ogólnych animacji właściwości. Dopóki znasz poprawną składnię, możesz animować dowolną właściwość CSS. Właściwość border-radius jest tego dobrym przykładem. Kwadrat ma ostre rogi, które zamieniają się w zaokrąglone rogi, a następnie z powrotem w kwadratowe rogi.

#kwadrat { animacja: kwadrat_anim 2000ms rozluźnij się nieskończone normalne naprzód }

Animacja kwadratowa nosi nazwę square_anim i trwa dwie sekundy. The wyluzować krzywa spowalnia animację na początku i na końcu, tworząc płynny efekt.

@klatki kluczowe kwadrat_anim {
 0% { rx: 0px; ry: 0px }
 45% { rx: 40px; ry: 40px }
 55% { rx: 40px; ry: 40px }
 100% { rx: 0px; ry: 0px }
}

Jak widać, ta animacja ma cztery klatki kluczowe. Promień obramowania X i Y zmienia się z 0px na 40px między 0% a 45%, zatrzymując się przy 40px do 55%. Następnie wraca do 0 pikseli dla każdego promienia, zanim animacja osiągnie 100%.

Obróć trójkąt SVG za pomocą transformacji

Ostateczna animacja SVG w przykładzie jest najprostsza, z trójkątem obracającym się wokół jego punktu środkowego. Kształt wykonuje pełny obrót co dwie sekundy i kontynuuje bieg w nieskończoność. Ma krzywą luzu, która powoduje spowolnienie animacji na końcu. Animacja nazywa się triangle_anim.

#trójkąt { animacja: trójkąt_anim 2000ms luzuj nieskończoną normalną naprzód }

Ta animacja ma dwie klatki kluczowe, jedną na 0%, a drugą na 100%. Właściwość Transform rotate zmienia trójkąt z 0 stopni w 0% na 360 stopni w 100%, tworząc pełny obrót.

@klatki kluczowe trójkąt_anim {
 0% { przekształcać: Tłumaczyć(644px, 297 pikseli) obracać się(0deg) }
 100% { przekształcać: Tłumaczyć(644px, 297 pikseli) obracać się(360 stopni) }
}

Jak animować inne właściwości

Trzy animacje omówione powyżej są dobrym punktem wyjścia podczas pracy z plikami SVG, ale prawdopodobnie zechcesz posunąć się dalej. Możesz użyć reguły animacji CSS, aby dostosować prawie każdą wartość właściwości, którą możesz przypisać do swojego SVG. Obejmuje to podstawowe wartości, takie jak rozmiar i pozycjonowanie, a także bardziej zaawansowane, takie jak obramowanie, cienie i tryby mieszania.

W rzadkich przypadkach, gdy CSS nie może wykonać zadania, możesz użyć kodu JavaScript do animowania obrazów SVG. Możesz znaleźć mnóstwo przewodników, które pomogą Ci w tym, gdy poczujesz się gotowy, aby zrobić kolejny krok ze swoimi plikami SVG.

Tworzenie własnych animacji SVG

Niezależnie od tego, czy jesteś projektantem stron internetowych, programistą, czy po prostu osobą kreatywną, tworzenie animacji SVG może być zabawne i satysfakcjonujące. W sieci można znaleźć wiele zasobów, które mogą pomóc w animacji internetowej, gdy już opanujesz podstawy.

10 wzorów tła CSS, których możesz użyć w swojej witrynie

Czytaj dalej