Jak tworzyć animacje SVG za pomocą CSS

Animacje internetowe są w dzisiejszych czasach modne i nie ma ograniczeń co do tego, co możesz zaprojektować za pomocą SVG. Jeśli jesteś gotowy, aby wypróbować to na własnej stronie, znajomość podstawowych koncepcji animacji pomoże ci w tworzeniu bardziej złożonych projektów. Pliki SVG świetnie 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 w stylizacji, ponieważ możesz używać CSS, filtrów i interaktywności do ulepszania SVG.

Zanim zagłębimy się w samouczek, powinieneś zapoznać się z przejściami i przekształceniami CSS. (Jeśli nie, zapoznaj się z tym artykułem!) Niektóre z tych samych koncepcji będą używane w plikach SVG.

Podstawy SVG

SVG lub Scalable Vector Graphics używają formatu tekstowego opartego na XML, aby opisać, jak powinien wyglądać obraz. Pliki SVG to pliki tekstowe z mnóstwem XML-a w środku. Jeśli otworzysz jeden za pomocą edytora kodu, zobaczysz, o co mi chodzi. Powodem, dla którego pliki SVG mogą być skalowane 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 skomplikowane 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 można je świetnie projektować w Internecie.

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

Jak stworzyć grafikę SVG

Adobe Illustrator to mój program z wyboru podczas tworzenia SVG. W rzeczywistości można je tworzyć od zera, ponieważ wszystko jest w formacie XML, ale prawdopodobnie łatwiej jest korzystać z 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 Adobe Illustrator, obwiednia jest miejscem, w którym tworzona jest ilustracja, dlatego ważne jest, aby upewnić się, że wszystko jest zawarte. Najlepszym sposobem na to jest zaznaczenie grafiki, którą chcesz umieścić w swoim SVG, a następnie przejście do Obiekt> Obszary kompozycji> Dopasuj do granic grafiki.

To bardzo ważny krok. Kilka razy tego nie zrobiłem, a obraz wyglądał na bardzo mały z powodu dodatkowej białej przestrzeni. Sprawienie, by wszystko idealnie pasowało do granic, rozwiązało problem.

Może nie jest to najfajniejsza rzecz do zrobienia w trybie projektowania, ale bycie uważnym i konsekwentnym w nazewnictwie warstw pomoże ci w przyszłej pracy nad animacją z grafiką. „Warstwa pierwsza, warstwa druga” utrudni zapamiętanie, które warstwy zawierały daną część grafiki. Powodem tego jest to, że 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 zalecam, aby grupy warstw zawierały 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 proste, ale działa.

Jest to opcjonalne, ale pomocne jest uruchomienie go przez optymalizator CSS. Jest duża szansa, że ​​możesz w ten sposób zmniejszyć rozmiar pliku. Świetną opcją jest Optymalizator SVG autorstwa Petera Collingridge'a. Warto też przyjrzeć się opcji SVG OMG.

Eksportowanie grafiki SVG w Adobe Illustrator

Teraz, gdy masz już 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 dowolnych czcionek w projekcie i osadza czcionki w formacie SVG. Nie mamy żadnego, więc zostawimy ten zestaw jako SVG.

Podzbiór: Ta opcja w razie potrzeby osadza szczegóły znaków w pliku SVG. 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 zaznaczona jest opcja „Tylko używane glify” (jeśli używasz specjalnej czcionki do grafiki).

Lokalizacja obrazu: Kontroluje informacje, które mogą być przechowywane dla zrastrowanych danych obrazu w pliku SVG jako identyfikator URI danych z opcją „Osadzone”. (W tym przypadku nie ma to większego znaczenia, ale pozwala to na umieszczenie linku lub osadzonego obrazu, co zwiększyłoby rozmiar pliku).

Właściwości CSS: Atrybuty prezentacji pozwalają w razie potrzeby na umieszczenie stylów CSS w SVG. W zależności od przypadku użycia może to być optymalne lub nie. Atrybuty prezentacji określają takie elementy jak fill: blue; zamiast tego, co jest tradycyjnie postrzegane w stylach inline: . Atrybuty prezentacji są zazwyczaj łatwiejsze do zastąpienia 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. Tu powinno wystarczyć. Zaawansowane opcje 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ż ścieżki niestandardowej. Dzięki opcji „Użyj elementu <textPath> dla tekstu na ścieżce” jest on eksportowany jako tekst na ścieżce. Ważna jest również opcja „Responsywne”. Jeśli nie jest zaznaczone, plik SVG będzie miał zakodowaną szerokość i wysokość.

Jak animować SVG za pomocą CSS

Teraz, gdy jest już gotowy plik SVG, możemy stworzyć prostą animację, aby zobaczyć, jak to wszystko działa. Właściwość transform CSS i metoda translate pomogą w poruszaniu się koła. Animowanie za pomocą CSS jest niesamowite, ponieważ nie ma żadnych wtyczek ani bibliotek, które trzeba zainstalować; wszystko, czego potrzebujesz, to HTML i CSS, aby rozpocząć.

Pliki SVG mogą być animowane w taki sam sposób, jak elementy HTML, przy użyciu klatek kluczowych CSS i właściwości animacji lub przy użyciu przejść CSS. Bardziej złożone animacje zwykle mają zastosowanie pewnego rodzaju transformacji — przesunięcia, obrotu, skalowania lub pochylania.

Podstawowa animacja

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

svg {
   height: 20%;
   width: 20%;
   fill: #50c6db;
}

svg:hover {
   transform: scale(1.25);
   transition-duration: 1.5s;
}

Animacja obracającego się koła

Oto, gdzie ciężka praca w programie Adobe Illustrator się opłaca. Wysiłek związany z efektywnym nazywaniem warstw zostanie dobrze wykorzystany. Dzięki grupom warstw zewnętrznych i wewnętrznych animacja może być kontrolowana i dostosowywana, co jest ogromną przewagą nad animacją grafiki rastrowej.

Koło SVG będzie działać jako grafika pokrętła ładowania. Zewnętrzne koło będzie się obracać, a wewnętrzne nieco się powiększy, gdy kolor zmieni się z jasnego na ciemny.

Elementy SVG są w większości dość przewidywalne, ale istnieją pewne elementy pozycjonowania, które mogą być nieco trudniejsze. Jeśli jesteś przyzwyczajony do innych elementów HTML, odpowiadają one na transform i transform-origin w ten sam sposób. Należy zauważyć, że nie są one zgodne z modelem pudełka, czyli marginesem, obramowaniem, dopełnieniem itp. To sprawia, że ​​pozycjonowanie i przekształcanie tych elementów jest nieco trudniejsze.

Podstawy Transform-origin

Właściwość transform-origin służy do zmiany pozycji początku transformacji elementu. Źródło transformacji elementu HTML to (50%, 50%), czyli środek elementu.

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

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

Gdybyśmy ustawili początek transformacji <rect> na środek za pomocą wartości procentowych, zrobilibyśmy to tak:

rect {
  transform-origin: 50% 50%;
}

Robienie koła

Po pierwsze, kluczowe jest skonfigurowanie 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.

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

@keyframes fadeIn {
    0% {
        opacity: .35;
    }

    50% {
        opacity: .5;
    }

    75% {
        opacity: .75;
    }

    100% {
        opacity: .25;
    }
}

Następnie ważne jest, aby stworzyć opakowanie SVG.

.svg-container {
  height:100%;
  width:100%;
  max-height:15cm;
  max-width:15cm;
  margin: 0 auto;
}

Utworzono ogólne style SVG i tutaj określa się transform-origin.

svg {
  top: 50%;
  left: 50%;
  position: absolute;
  max-height:15cm;
  max-width:15cm;
  width: 20%;
  height: 20%;
  fill: #50c6db;
  transform: translate(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 zanikania, który był przeznaczony tylko dla tej wewnętrznej części grafiki. Kierując tylko na #inner-wheel , zastosowano animację zanikania.

#outer-wheel {
  animation: spin 4s infinite linear;
}

#inner-wheel {
  animation: fadeIn 2s infinite linear;
}

Mam nadzieję, że to dobre wprowadzenie do SVG i podstawowych technik animacji. Gdy będziesz ich częściej używać, te podstawowe pomysły pomogą Ci stworzyć bardziej złożone animacje.

Co dalej: projekt
strony szybciej!

W tym przewodniku omówimy wskazówki, jak pracować szybciej i przyspieszyć przepływ pracy WordPress. Od początkowej konfiguracji witryny po udostępnienie jej na żywo, odkryj, jak możesz skrócić godziny pracy z codziennej pracy!

Darmowe pobieranie tutaj.

Ten artykuł został pierwotnie opublikowany 6-1-2017. Ostatnia aktualizacja 2-16-2019.