Jak tworzyć animacje SVG za pomocą CSS

Animacje internetowe są obecnie modne i nie ma ograniczeń co do tego, co można zaprojektować za pomocą plików SVG. Jeśli chcesz wypróbować to na własnej stronie, znajomość podstawowych koncepcji animacji pomoże Ci tworzyć bardziej złożone projekty. Pliki SVG doskonale nadają się do animacji w Internecie, ponieważ są skalowalne i niezależne od rozdzielczości (co oznacza, że ​​można je skalować bez utraty jakości), w przeciwieństwie do plików JPEG i PNG. Są również łatwe do stylizowania, ponieważ możesz użyć CSS, filtrów i interaktywności, aby ulepszyć pliki SVG.

Zanim przejdziemy do samouczka, powinieneś zapoznać się z przejściami i transformacjami CSS. Niektóre z tych samych koncepcji zostaną użyte w plikach SVG.

Podstawy SVG

SVG lub Scalable Vector Graphics używa formatu tekstowego opartego na XML, aby opisać, jak powinien wyglądać obraz. Pliki SVG to pliki tekstowe z pakietem XML w środku. Jeśli otworzysz go za pomocą edytora kodu, zobaczysz, co mamy na myśli. Powodem, dla którego pliki SVG można skalować do różnych rozmiarów bez utraty jakości, jest to, że do opisu grafiki używany jest tekst.

Informacje wizualne w pliku SVG są obliczane i renderowane przez przeglądarkę lub oprogramowanie graficzne, którego używasz do ich modyfikacji. Nie są tak złożone jak JPG lub inne formaty plików graficznych, co pozwala na ich ręczne projektowanie i edycję w edytorze tekstu, jeśli zdecydujesz się to zrobić. Można je zmieniać i stylizować za pomocą CSS, dzięki czemu świetnie nadają się do projektowania w Internecie.

Obsługa grafiki SVG przez przeglądarkę jest dość uniwersalna; IE8 może sprawiać pewne problemy, ale nowoczesne przeglądarki doskonale radzą sobie z plikami SVG. Mogą występować drobne błędy tu czy tam, ale zazwyczaj jest to płynna żegluga.

Jak stworzyć grafikę SVG

Adobe Illustrator to jeden z programów wybieranych podczas tworzenia plików SVG. W rzeczywistości można je tworzyć od zera, ponieważ w całości jest to XML, ale prawdopodobnie łatwiej jest użyć programu do projektowania, zwłaszcza w przypadku bardziej złożonych plików SVG.

Wskazówki dotyczące projektowania w programie Adobe Illustrator

Podobnie jak w przypadku każdego innego projektu programu Adobe Illustrator, ramka graniczna to miejsce, w którym tworzona jest ilustracja, dlatego ważne jest, aby wszystko było w niej zawarte. Najlepszym sposobem na to jest wybranie grafiki, którą chcesz mieć w pliku SVG, a następnie przejście do Obiekt > Obszary robocze > Dopasuj do granic grafiki.

To bardzo ważny krok. Było kilka przypadków, w których tego nie zrobiliśmy, a obraz na stronie wyglądał na bardzo mały z powodu dodatkowej białej przestrzeni. Dopasowanie wszystkiego idealnie w granicach rozwiązało problem.

Być może nie jest to najprzyjemniejsza rzecz do zrobienia w trybie projektowania, ale uważność i spójność z nazewnictwem warstw pomoże ci podczas wykonywania przyszłych prac animacyjnych z grafiką. „Warstwa pierwsza, warstwa druga” sprawi, że trudno zapamiętać, które warstwy zawierały jaką część grafiki. Powodem tego jest to, że program Illustrator użyje tych nazw do wygenerowania identyfikatorów w kodzie SVG.

Grupy warstw są niesamowite, szczególnie w przypadku bardziej złożonej grafiki. Służą również do tworzenia grup w plikach SVG. Podczas pracy z nimi zdecydowanie zalecamy upewnienie się, że grupy warstw zawierają tylko powiązane kształty, aby plik był czysty i łatwy do późniejszej edycji.

W tym pliku zobaczysz, że zewnętrzna część koła nosi nazwę „koło zewnętrzne”, a część wewnętrzna ma nazwę „koło wewnętrzne”. To podstawowe, ale działa.

Jest to opcjonalne, ale pomocne jest uruchomienie go za pomocą optymalizatora CSS. Jest duża szansa, że ​​w ten sposób zmniejszysz rozmiar pliku. Jedną świetną opcją jest Optymalizator SVG autorstwa Petera Collingridge'a. SVG OMG to również opcja warta rozważenia.

Eksportowanie grafiki SVG w programie Adobe Illustrator

Teraz, gdy masz gotowy obraz SVG, należy go wyeksportować, aby można go było używać w Internecie. Przejdź do Plik > Zapisz jako > SVG. Możesz także przejść do Plik, Eksportuj, .SVG, w zależności od używanej wersji programu Illustrator. Zostanie to zapisane jako flyweel_wheel.

Gdy to zrobisz, pojawi się okno dialogowe z kilkoma opcjami (jeśli nie widzisz wszystkich poniższych, przejdź do „Więcej opcji”):

Profil: SVG 1.1

Typ: kontroluje sposób obsługi czcionek w projekcie i osadza czcionki jako SVG. Nie mamy żadnego, więc zostawimy ten zestaw jako SVG.

Ustawienie podrzędne: ta opcja osadza szczegóły postaci w pliku SVG w razie potrzeby. Dzięki temu plik może wyświetlać czcionki, które mogą nie być obecne w systemie użytkownika. Możliwe jest uwzględnienie tylko glifów używanych w SVG (co zmniejsza rozmiar pliku), gdy wybrana jest opcja „Użyto tylko glifów” (jeśli używasz specjalnej czcionki w swojej kompozycji).

Lokalizacja obrazu: Kontroluje informacje, które mogą być przechowywane dla danych obrazu rastrowego w pliku SVG jako identyfikator URI danych z opcją „Osadzone”. (W tym przypadku nie jest to zbyt istotne, ale pozwala na umieszczenie łącza lub osadzonych obrazów, co zwiększyłoby rozmiar pliku).

Właściwości CSS: Atrybuty prezentacji pozwalają w razie potrzeby umieścić style CSS bezpośrednio w pliku SVG. W zależności od przypadku użycia może to być optymalne lub nie. Atrybuty prezentacji określają takie rzeczy jak fill: blue; zamiast tego, co jest tradycyjnie widoczne w przypadku stylów wbudowanych: . Atrybuty prezentacji są zazwyczaj łatwiejsze do nadpisania w CSS.

Bardziej zaawansowane opcje: Ta grupa pól wyboru umożliwia zmianę różnych ustawień, w tym liczby miejsc po przecinku w różnych liczbach. Tutaj jeden powinien wystarczyć. Opcje zaawansowane są najczęściej potrzebne, jeśli plik zawiera dużo tekstu. Opcja wyprowadzania mniejszej liczby elementów <tspan> może radykalnie zmniejszyć rozmiar eksportowanego pliku SVG.

W niektórych przypadkach tekst może być rysowany wzdłuż niestandardowej ścieżki. W przypadku opcji „Użyj elementu <textPath> dla tekstu na ścieżce” jest on eksportowany jako tekst na ścieżce. Ważna jest również opcja „Responsive”. Jeśli nie jest zaznaczone, plik SVG będzie miał zakodowaną na stałe szerokość i wysokość.

Jak animować pliki SVG za pomocą CSS

Teraz, gdy mamy do czynienia z rzeczywistym plikiem SVG, możemy stworzyć prostą animację, aby zobaczyć, jak to wszystko działa. Właściwość CSS transform i metoda translate pomogą w poruszaniu się koła. Animacje za pomocą CSS są niesamowite, ponieważ nie trzeba instalować żadnych wtyczek ani bibliotek; wszystko, czego potrzebujesz, to HTML i CSS, aby zacząć.

Pliki SVG można animować w taki sam sposób, jak elementy HTML, używając klatek kluczowych i właściwości animacji CSS lub przejść CSS. Bardziej złożone animacje mają zwykle zastosowanie pewnego rodzaju transformacji — translację, obrót, skalowanie lub pochylanie.

Podstawowa animacja

Poniżej znajduje się prosta animacja, która sprawia, że ​​koło rośnie po najechaniu kursorem:

 svg {
   wzrost: 20%;
   szerokość: 20%;
   wypełnienie: #50c6db;
}
svg:hover {
   przekształć: skala (1,25);
   czas przejścia: 1,5 s;
} 

Animacja obracającego się koła

Oto, gdzie ciężka praca w programie Adobe Illustrator się opłaca. Wysiłek skutecznego nazywania warstw zostanie dobrze wykorzystany. Dzięki zewnętrznym i wewnętrznym grupom warstw animację można kontrolować i dostosowywać, co stanowi ogromną przewagę nad animacją grafiki rastrowej.

Koło SVG będzie działać jako grafika wczytywania. Zewnętrzne koło będzie się obracać, a wewnętrzne nieznacznie wzrośnie, gdy kolor przejdzie od jasnego do ciemnego.

Elementy SVG są w większości przewidywalne, ale niektóre elementy pozycjonowania mogą być nieco trudniejsze. Jeśli jesteś przyzwyczajony do innych elementów HTML, odpowiadają one na transformację i transformację pochodzenia w ten sam sposób. Należy zauważyć, że nie są one zgodne z modelem pudełkowym, co oznacza margines, obramowanie, dopełnienie itp. To sprawia, że ​​pozycjonowanie i przekształcanie tych elementów jest nieco trudniejsze.

Podstawy pochodzenia transformacji

Właściwość transform-origin służy do zmiany pozycji początku transformacji elementu. Początek przekształcenia elementu HTML to (50%, 50%), czyli środek elementu.

Początek transformacji elementu SVG jest umieszczony w punkcie (0, 0), który jest lewym górnym rogiem płótna.

Jak element SVG obraca się wokół własnego środka? Konieczne jest dostosowanie właściwości transform-origin. Można to ustawić za pomocą wartości procentowej lub wartości bezwzględnej (piksele, em lub rem). Ta wartość zostanie ustawiona względem obwiedni elementu.

Gdybyśmy mieli ustawić początek transformacji <rect> na środek za pomocą wartości procentowych, zrobilibyśmy to w następujący sposób:

 prosto {
  źródło transformacji: 50% 50%;
}

Robienie koła

Po pierwsze, kluczowe znaczenie ma ustawienie klatek kluczowych rotacji. Będzie to grafika typu spinner, więc potrzebny jest pełny obrót. Zastosowany zostanie również efekt zanikania. Ten przykład można znaleźć na Codepen.

 @klatki kluczowe obracają się {
    z {przekształć: obróć (0 stopni);}
    do {transformacji:obrót(360st);}
}
@keyframes fadeIn {
    0% {
        krycie: 0,35;
    }
    50% {
        krycie: 0,5;
    }
    75% {
        krycie: 0,75;
    }
    100% {
        krycie: 0,25;
    }
}

Następnie ważne jest utworzenie opakowania SVG.

 kontener .svg {
  wzrost: 100%;
  szerokość:100%;
  maksymalna wysokość: 15 cm;
  maksymalna szerokość: 15 cm;
  margines: 0 automatyczny;
}

Utworzono ogólne style SVG i tutaj określono źródło transformacji.

 svg {
  góra: 50%;
  po lewej: 50%;
  pozycja: absolutna;
  maksymalna wysokość: 15 cm;
  maksymalna szerokość: 15 cm;
  szerokość: 20%;
  wzrost: 20%;
  wypełnienie: #50c6db;
  przekształć: przetłumacz (50%, 50%);
} 

W tym miejscu nazewnictwo warstw staje się bardzo pomocne. Obracająca się animacja jest stosowana do całej grafiki SVG, ponieważ została określona w #outer-wheel , ale wewnętrzne koło ma efekt blaknięcia, który był przeznaczony tylko dla tej wewnętrznej części grafiki. Kierując tylko na #inner-wheel , zastosowano zanikanie animacji.

 #zewnętrzne koło {
  animacja: spin 4s nieskończona liniowa;
}
#wewnętrzne koło {
  animacja: fadeIn 2s nieskończona liniowa;
} 

Mamy nadzieję, że to dobre wprowadzenie do plików SVG i podstawowych technik animacji. Im częściej będziesz z nich korzystać, te podstawowe pomysły pomogą Ci tworzyć bardziej złożone animacje.