Ostatnia aktualizacja: 

Animowanie obrazków SVG

Gify to przeżytek - są wolne, wymagają dużo transferu oraz nie są skalowalne - pixele często można policzyć gołym okiem! SVG jako format wektorowy jest skalowalny - i tak jak inne znaczniki HTML, możemy go animować!

CSS
16m 00s
21.400 wyświetleń+
428+ pozytywnych reakcji

Niesamowite animacje na wyciągnięcie ręki

SVG to format wektorowych grafik, które są z natury skalowalne - to znaczy, że nie zależnie od rozmiaru naszego wyświetlacza czy rozdzielczości okna przeglądarki - będzie on zawsze ostry i przejrzysty. Świetnie działa z tzw. flat design oraz - można go animować w CSS i JavaScript! Wow!

Opinie

Komentarze widzów

Wasze opinie liczą się najbardziej, materiały Tworzymy dla was!
Oto wybrane komentarze które zostawiliście pod tym wideo!

  • achh, jak miło po Polsku oglądać takie materiały <3
    oby tak dalej ;)

  • Dokładnie tego w życiu szukałem, super tutorial :D jeszcze tylko zobaczyć ankietowanych z familiady i mogę umierać. Tak na poważnie to totalnie nie wiedziałem jak używać plików SVG a tu proszę jakie to proste :P

  • Efekt powalający, muszę wypróbować :)

  • bardzo fajny i przystępny material :)

    kikutnik666
    Zobacz komentarz
  • Fajny material jak zawsze zresztą, relatywnie krótki jak na zawiłość animacji SVG jednak pod żadnym względem nie mniej rzeczowy, dzięki wielkie, zabieram się do swoich przykładów! PS; czy istniałaby możliwość zadania jakichś pytań niekoniecznie związanych z tematem wideo?

  • No powiem wam, że, fajny przykład. :)

  • hej na wstepie chciałem napisac ze bardzo fajny kanal godny uwagi. Tak po za tym to mam pytanie czy dacie rade zrobic filmik jak tworzyć animacje w css?

    Łukasz Bogacz
    Zobacz komentarz
  • Bardzo fajny tutorial. Mam pytanie, które mnie nurtuje. Wsadzanie tak kodu w HTML robi niezły bałagan i kod HTML staje się słabo czytelny. Czy to normalna praktyka? Czy nie lepiej użyć tagu object i wsadzić plik z zewnątrz? Pozdrawiam

    guy diamond
    Zobacz komentarz

Transkrypt wideo

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 ]

11 kwietnia 2022

Komentarz od autora

Animacje SVG są niesamowite. Są estetyczne, wydajne (w porównaniu do ciężkich plików gif) oraz skalowalne - tzn. nawet gdybyśmy mieli wyświetlić naszą grafikę w 50K Turbo HD, nigdy nie zobaczymy żadnych pikseli, gdzie w przypadku obrazków rastrowych - przy skalowaniu jakość zawsze ulega pogorszeniu.

Dodatkowo, fakt posiadania kształtów jako osobne warstwy umożliwia nam ich niezależne animowanie, tak jak zrobiliśmy to w tym wideo.

Uciążliwe jest natomiast transform-origin, które w przypadku zaawansowanych grafik może wydawać się działać "nieprzewidywalnie". Ważny jest kontekst, w obrębie którego ta właściwość działa.

Wsparcie @keyframes według CanIUSE

Nie ma czego się obawiać, to jedna z podstawowych właściwości współczesnej sieci :)

Data on support for the mdn-css__at-rules__keyframes feature across the major browsers

Zobacz kod źródłowy

Nie mam nic do ukrycia! Eksperymentuj z moimi przykładami :) 

Poznaj Wojtka

Cześć! Nazywam się Wojciech Połowniak i jestem programistą Fullstack z zacięciem do tworzenia jakościowych materiałów szkoleniowych.

Uwielbiam automatyzację, VR oraz interaktywne sposoby przekazywania wiedzy. Tematy takie jak UX, dostępność czy devops również nie są mi obce.

Jestem też organizatorem meet.js oraz Techspeakerem pod banderą Mozilli... A to jeszcze nie wszystko.

Chcesz więcej?

Nie ma sprawy! Koduje to długie godziny darmowej treści dostępnej na wyciągnięcie ręki.

Newsletter

Jeśli chcesz być na bieżąco z najnowszymi inicjatywami od twórców koduje? Zapisz się na newsletter - nie spamujemy!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

W przyszłości, możemy udostępnić Ci informacje o dodatkowych kursach naszego autorstwa.

Najczęściej zadawane pytania

Jaka tematyka jest poruszana na Koduje?
expand_more
Mówimy o HTML, CSS i JavaScript - zarówno na backendzie, jak i frontendzie. Tematyka taka jak Devops, architektura i infrastruktura oprogramowania również pojawią się na kanale!
Czy mogę zaproponować temat kolejnych wideo?
expand_more
Oczywiście, że tak! Najlepiej sugerować materiały w sekcji komentarzy na YouTube 
Jak to możliwe, że Koduje jest darmowe? 
expand_more
Moją pasją jest dzielenie się wiedzą w sposób zrozumiały i klarowny, jednocześnie interaktwny i angażujący. Tworząc materiały, utrwalam też własną wiedzę. Wierzę, że za to widzowie nie powinni płacić
W sieci można znaleźć strony przypominające do koduje.pl, o co chodzi?
expand_more
Niestety, na przełomie lat wiele osób próbowało podszyć się pod Koduje i wykorzystać nasze materiały do promocji własnych kanałów dystrybucyjnych.  Jeśli masz wątpliwości, czy dana strona współpracuje z Koduje - daj nam o tym znać. Nie pochwalamy piractwa, plagiatu ani szarej strefy prawa autorskiego.
Czy prowadzicie szkolenia indywidualne?
expand_more
W chwili obecnej, niestety nie. Na przełomie lat prowadziłem kursantów przez ich przygodę z programowaniem, z czego każdy otrzymał pracę jako programista. Jeśli jesteś zainteresowany lekcjami indywidualnymi, zapraszam do kontaktu mailowego.
Czy oferujecie płatne kursy?
expand_more
W przyszłości nie wykluczamy możliwości tworzenia dedykowanych kursów o danych zagadnieniach. Zapisz się na nasz newsletter, aby być na bieżąco z naszymi najnowszymi płatnymi materiałami.
Jak mogę się z wami skontaktować?
expand_more
Czytamy komentarze na YouTube! Śmiało możesz zadać pytanie na dowolny temat pod którymkolwiek z naszych wideo. Poza tym możesz skontaktować się z nami mailowo bądź poprzez fanpage na Facebooku
Obecnym właścicielem marki jest Wojciech Połowniak. Zobacz zakładkę o nas!