Cześć, witajcie na kodu.je. Pokażę wam dzisiaj jak możecie animować pliki SVG przy pomocy CSSa.
‍
[ intro kodu.je ]
‍
Załóżmy, że otrzymaliśmy taki obrazek od grafika.
Jeśli jest to plik SVG, możecie otworzyć go w dowolnym edytorze tekstowym, np. w Bracketsie.
‍
Skrót SVG to akronim od Scalable Vector Graphic, czyli skalowalnej grafiki wektorowej. Zapewne spotkaliście się z sytuacjami, kiedy wasze grafiki przy ich skalowaniu traciły na jakości. Działo się tak ponieważ były to obrazki rastrowe, czyli po prostu w bardzo dużym skrócie,
różnica między grafiką wektorową a rastrową jest przede wszystkim taka,
że grafika rastrowa zbudowana jest z siatki punktów, czyli po prostu pikseli, natomiast grafika wektorowa wykorzystuje prymitywy graficzne takie jak linie, poligony, okręgi czy np. krzywe.
‍
Ten temat jest bardzo ciekawy, dlatego zachęcam was do sprawdzania różnic na własną rękę, natomiast gdy otworzycie sobie plik SVG,
który otrzymaliście od grafika, będzie on wyglądał mniej więcej w ten sposób.

Jak widzicie, można tutaj doszukać się analogii do HTMLa,
natomiast pliki SVG nie są plikami HTML, są to pliki XMLowe.
Jeśli będziecie zainteresowani różnicami między XMLem a HTMLem -
dajcie nam znać w komentarzu, no i generalnie te znaczniki, które tutaj widzicie, możemy sobie w CSSie animować, np. po identyfikatorach.
‍
Jednym z wielu podejść jeśli chcielibyśmy animować SVG w CSSie,
jest po prostu skopiowanie zawartości tego pliku,
samego znacznika SVG do naszego pliku HTML.
‍
Na naszym znaczniku SVG ustawimy sobie klasę "svg-image"
i w pliku "styles.css" nadamy mu szerokość 600px.
Jak widzicie, ten obrazek jest już widoczny na naszej stronie internetowej,
wrócimy sobie może na chwilę do tego naszego pliku "index.html"
i gdy zobaczycie, po kliknięciu w dowolny element tego obrazka,
odpowiedni znacznik w naszym edytorze zostanie podświetlony,
jest to bardzo wygodne przy animacji obrazów SVG,
tę funkcjonalność oferuje Brackets w wersji od 1.9 i na tej podstawie możemy tak naprawdę szukać konkretnych ścieżek elementów,
które nas interesują.
‍
Zaczniemy od animacji samej karetki, ona będzie stała w miejscu,
tło będzie nam się przemieszczało, więc załóżmy, że na tej naszej drodze będą jakieś wyboje, niech na nasza karetka podskakuje troszkę w górę i w dół.

Znajdziemy sobie odpowiedni element SVG, tutaj widzimy grupę "whole_ambulance" i możemy tak naprawdę stworzyć nową regułę.

Wykorzystam do tego Quick Edit z Bracketsa, na tym naszym "whole_ambulance" możemy definiować standardowe właściwości CSSowe. Załóżmy, że chcielibyśmy, aby ta karetka,
no załóżmy przesunęła się w osi Y o 10px.
‍
Jak widzicie, przełączanie tej klasy symuluje taki ruch.
Samą animację będziemy robili na keyframe'ach, więc przejdźmy może do tego naszego pliku "styles.css" i ustawmy tutaj właściwości potrzebne do nadania animacji temu konkretnemu obiektowi, więc ustawimy: animation-name na ambulance;
animation-duration powiedzmy na 1,5s,
animation-iteration-count ustawimy na infinite.
‍
Jako że chcemy aby ta animacja się zapętlała
i animation-timing-function ustawimy na liniową.
Tak naprawdę moglibyśmy już zacząć pisać nasze keyframe'y,
natomiast warto zwrócić jeszcze na jedną rzecz uwagę -
jeżeli chcielibyśmy np. obrócić tę naszą karetkę,
załóżmy o, no może na razie malutką wartość 2 stopnie,
to zauważcie, że  ona nie obraca się wokół swojego środka.

Możemy zmienić to zachowanie za pomocą właściwości transform-origin
i ustawić wartość na 50; 50%, czyli tak naprawdę center, center
i tak naprawdę napiszmy sobie naszego keyframe'a.
‍
Chcieliśmy, aby on się nazywał ambulance, chcielibyśmy aby na początku nasza karetka nie była przesunięta w osi Y, natomiast powiedzmy, że gdzieś od połowy była przesunięta właśnie przy pomocy tego transforma,
translateY o 10px.

No oczywiście tutaj literówka "keyframes"
No i jak widzicie ta karetka już porusza się tak jakbyśmy się tego spodziewali i analogicznie animujemy pozostałe elementy,
wracamy do naszego pliku "index.html", zobaczmy jakie tutaj mamy identyfikatory naszych obiektów: "ambulace_shadow" jest to tutaj ten cień pod karetką, zobaczmy to miasto, miasto jest to po prostu "city", kliknijmy w drzewka,

tutaj widzimy "trees_city_front",
czyli jest też pewnie "trees_city_back",
tak jest, jest też "trees_city_back",
tutaj mamy jeszcze chmurki "cloud_city", "cloud_2_city",
‍
okej więc w naszych stylach będziemy chcieli wynieść na pewno fragmenty, które będą się powtarzały dla każdego obiektu,
czyli na pewno "animation-interation-count" oraz animation-timing-function", no i tak naprawdę jeszcze ten transform origin,
też nam się będzie powtarzał dla większej ilości selektorów,
więc tak naprawdę wymienimy sobie elementy,
które chcemy animować, czyli #ambulance-shadow itd.
‍
Okej, wszystkie nasze elementy będą już miały ustawione dla siebie wspólne style i tak naprawdę możemy już po kolei animować poszczególne elementy. Ustawmy sobie #ambulance_shadow,
aby animation-name miał ustawione na ambulance-shadow,
animation-duration, no raczej podobną do całej animacji karetki
i chcielibyśmy aby ambulance-shadow skalowało się, powiedzmy o tyle.

No tak, oczywiście znaczniki napisane są podkreślnikiem
Okej, trochę przegięliśmy z naszym scalem, ustawmy na 1.02
i jak widzimy, ten cień również nam się animuje.
‍
Stworzymy sobie od razu keyframe'y do opon, tak by pod koniec były obrócone o 360 stopni, może już zostańmy przy konwencji "ambulance-tires", no i oczywiście na samym elemencie nadajemy "ambulance-tires"
i zmieniamy sobie tutaj na left-tire i right-tire. No i w zależności oczywiście od naszego animation-duration, te opony będą nam się szybciej lub wolniej animować.
‍
Powiedzmy, że ustawimy sobie 0.3s, żeby nadać tempa naszej karetce
Więc ten obiekt jeździ w miejscu w tym momencie. Zacznijmy może animację samego tła od tych naszych front-trees,
trees-city-front, skopiujemy sobie selektor
i ustawimy animation-name: front-trees;
animation-duration to jeszcze pomyślimy, ale dajmy na jedną sekundę,
no i oczywiście keyframe'y ustawiamy na front-trees.
‍
I jak widzimy teraz te nasze drzewka jeżdżą tak jak karetka,
natomiast my w przypadku drzewek chcielibyśmy je  przesuwać w osi X
Oczywiście ustawimy sobie, że chcemy aby nie zapętlały się tak jak karetka, scena nam będzie jechała w lewą stronę
i załóżmy, że zaczniemy od -110px, aż do 10px
i jak widzicie mamy już to złudzenie ruchu.

Jedyne co pozostaje zrobić, to sprawić by te poszczególne cykle animacji nachodziły na siebie, żeby było złudzenie, że to jest nieprzerwana, jedna animacja.

I oczywiście chcielibyśmy chyba odwrócić kierunek naszych drzewek,
więc dajmy 150px, żeby karetka jechała w prawą stronę i tutaj sobie już dopasujemy wartość, jaka powinna być końcowa, musielibyście to obliczyć na podstawie odległości między drzewkami, szerokości drzewka, szerokości całej kanwy i ja powiedzmy, że tu dam 600px jako, że to tam.

Jest całkiem nieźle, mamy lekki przeskok, zmniejszę troszkę czas trwania tej animacji, żeby szybciej widzieć - dobra, przegiąłem.

Mamy przeskok, troszkę więcej, załóżmy 650, 680 niech będzie.
‍
No i możemy zmniejszyć to tempo z powrotem do tej sekundy,
no i mamy już to złudzenie ruchu, w pewnym sensie otrzymane

Analogicznie tak naprawdę tworzymy keyframe'y do tylnych drzewek - back-trees, trees_city_back, ale żeby zachować perspektywę to ustawmy czas trawania back-trees na 1.7, no może przyspieszymy sobie te przednie troszkę, no i mamy to złudzenie ruchu.
‍
Oczywiście musimy tutaj zmienić te wartości dla tylnych drzew, bo one były troszkę przesunięte. I jak widzimy - ta nasza animacja nie wygląda już tak płynnie, bo drzewko nam się pojawia w tym miejscu,
zamiast wyjeżdżać stąd.
‍
Na chwilę wyłączę tutaj animację,
aby zobaczyć mniej więcej odległości między tymi drzewkami
Różnica między nimi tj. 180px, czyli to będzie tutaj 330px, a tutaj 500px.

Okej, pozostaje nam zanimować tylko i wyłącznie chmurki i samo miasto
Może zacznijmy od miasta, miasto nie jest na tyle regularnym obrazkiem,
aby dało się je fajnie zapętlić, dlatego może zróbmy, aby ta nasza karetka jeździła wzdłuż różnych miast. Więc ustawimy sobie animation-name na city, animation-duration, no to już powinno dosyć wolno iść,
damy 30s i tutaj przesunięcie, już wcześniej wyliczone.
‍
Musielibyście tak naprawdę posprawdzać te wartości -
-2400, city. Jak widzicie miasto już jedzie,
powinno nam się niedługo fajnie zapętlić.

Pozostały chmurki - #city_cloud, city-cloud, keyframe'y ustawimy na city-cloud.

Możemy zrobić aby chmurki leciały w drugą stronę,
tutaj jest #cloud_city, nie #city_cloud, już widzicie - chmurka nam tam płynie, ustawimy animation-delay na 100s i tutaj ustawimy jej aż 240s
Analogicznie #cloud_2_city, #cloud_3_city, tutaj dwójka, tutaj trójka,
powiedzmy, że chmurka numer 2 będzie troszkę szybsza i nie będzie miała żadnego tutaj opóźnienia, chmurka trzecia będzie dwa razy wolniejsza, no i oczywiście musimy jeszcze ustawić same keyframe'y dla nich, dwójka, no i trójka nich będzie w drugą stronę.
‍
Okej, jak widzicie wystarczy znać naprawdę garstkę właściwości CSSowych, aby zrobić efekt takiej animacji.

Uporządkujmy jeszcze trochę tego CSSa,
niech chociaż keyframe'y będą jeden pod drugim,
prawie się udało i to tyle.
‍
Jeśli macie propozycje nowych materiałów na naszym kanale -
koniecznie zostawiajcie je w komentarzu a jeśli podobało wam się to wideo, możecie też zasubskrybować nasz kanał.

Trzymajcie się i do zobaczenia w kolejnym ciekawym przykładzie
[ blooper ]