Jak utworzyć animację SVG przy użyciu CSS
Animowanie SVG można wykonać za pomocą rodzimych elementów, takich jak
Animacja CSS może być również alternatywnym sposobem korzystania z biblioteki JavaScript, takiej jak SnapSVG. W tym poście zobaczymy, co możemy dostarczyć za pomocą animacji CSS w SVG.
1. Tworzenie kształtów
Przede wszystkim musimy narysować kształty i obiekty, które chcemy animować. Możesz używać aplikacji takich jak Naszkicować, Adobe Illustrator, lub Inkscape stworzyć jeden.
W tym przykładzie narysowałem pochmurne niebo jako tło, a statek rakietowy strzelający w górę, w tym płomienie:
Po zakończeniu rysowania musimy wyeksportować każdy utworzony przez nas obiekt do SVG.
Zamierzam użyć Sketch jako przykładu dla tego kroku. Wybierz obiekt, który chcesz przekształcić w format SVG. W prawym dolnym rogu okna kliknij Dodać do eksportu. Wybierz format SVG, a następnie kliknij Eksportuj nazwa-obiektu. Musisz robić jeden obiekt naraz.
2. Włóż SVG do HTML
Gdy otworzysz plik SVG w edytorze kodu, przekonasz się, że kody SVG są dość niechlujne. Dlatego przed wdrożeniem pliku SVG uporządkujmy kod i zoptymalizujmy go za pomocą tego narzędzia wiersza poleceń o nazwie SVGO.
Uruchomić Terminal lub Wiersz polecenia, i zainstaluj SVGO za pomocą tej linii poleceń:
[sudo] npm install -g svgo
Tun polecenie, svgo, przy użyciu pliku SVG --ładny stworzyć czytelny kod SVG:
svgo rocket.svg --pretty
Jeśli w katalogu znajduje się wiele plików SVG, możesz je zoptymalizować jednocześnie. Zakładając, że katalog ma nazwę /obrazy, następnie z katalogu nadrzędnego użyj tego polecenia:
svgo -f images --pretty
Zobaczmy różnicę przed i po użyciu SVGO.
Skopiuj kod z pliku SVG i wklej do pliku HTML. Będziemy pracować na obszarze roboczym o szerokości 800 x 600 pikseli, więc nie zapomnijmy zdefiniować szerokość na elemencie SVG.
SVG jest ustawiony w pliku HTML. Będziemy musieli zdefiniować ID dla każdego obiektu, abyśmy mogli wybrać je później w CSS.
W tym samouczku musimy zdefiniować identyfikator rakiety i płomieni oraz niektóre chmury. Aby obiekty mogły obsługiwać scenę animacji później, musimy dodać ID - możesz także użyć klasa - do każdego obiektu. Na tym etapie kod będzie wyglądał następująco:
3. Animuj za pomocą CSS
Teraz zabawmy się. Plan polega na zwiększeniu rakiety w kosmos. Rakieta jest podzielona na dwie grupy; sama rakieta i płomień.
Przede wszystkim ustawiamy rakietę w środku obszaru roboczego, w następujący sposób:
#rocket transform: translate (260px, 200px);
Widzisz to:
Teraz, aby rakieta wyglądała tak, jakby szła w górę, musimy stworzyć iluzję spadających chmur. CSS, którego używamy to:
# cloud1 animacja: spadek 1s liniowy nieskończony; @keyframes fall from transform: translateY (-100px); to transform: translateY (1000px)
Aby wyglądał jeszcze bardziej realistycznie, animujmy cztery chmury i stwórzmy je “spadek” przy różnych prędkościach. Ustawimy je także inaczej niż na osi X..
Druga chmura będzie miała taki kod:
# cloud2 animacja: fall-2 2s linear infinite; @keyframes fall-2 from transform: translate (200px, -100px); to transform: translate (200px, 1000px)
Zauważ, że przesunęliśmy chmurę # 2 nieco w prawo, przez 200px z Tłumaczyć. Na tym etapie wynik powinien wyglądać następująco.
Następnie spraw, by rakieta ożyła. Przydzielimy klatkę kluczową animacji w następujący sposób:
#rocket animation: popup 1s ułatwiają nieskończoność; @keyframes popup 0% transform: translate (260px, 200px); 50% transform: translate (260px, 240px); 100% transform: translate (260px, 200px);
I dodaj animację do płomienia rakiety:
#flame animation: shake .2s linear infinite; @keyframes shake 0% transform: translate (55px, 135px) rotate (7deg); 20% transform: translate (55px, 135px) rotate (0deg); 40% transform: translate (55px, 135px) rotate (-7deg); 60% transform: translate (55px, 135px) rotate (0deg); 100% transform: translate (55px, 135px) rotate (0deg);
Dobrze! Teraz, kiedy nasze kody są już ustawione, animacja powinna działać na naszym SVG.
Spójrz na naszą rakietę wystrzeliwującą w kosmos.
Końcowa myśl
Animacja nie jest najłatwiejszą do zrozumienia funkcją w CSS. Ale miejmy nadzieję, że ten samouczek będzie dobrym punktem wyjścia do dalszej eksploracji animacji CSS na SVG; zdziwiłbyś się, wiedząc, co można osiągnąć dzięki dostępnej animacji CSS.
Jeśli chcesz zacząć od samych podstaw, możesz zacząć od tego posta: Animacja Look In: Scalable Vector Graphics (SVG) lub podążaj za resztą serii SVG.
- Wyświetl demo
- Pobierz źródło
