Let’s CSS #2 – podążaj własną ścieżką w animacjach SVG

Wydaje ci się że twoje animacje są banalne? Czujesz się więźniem w siatce pikseli? Chcesz nabrać pełnej kontroli nad ruchem animowanych obiektów? Pokażę Wam jak stworzyć animację SVG po wybranej ścieżce.

W ogóle o co chodzi z tą ścieżką?

W pracy z SVG, a szczególnie ze ścieżkami, ci co znają programy do grafiki wektorowej, będą się czuli jak pączek w maśle. Ścieżka to po prostu linia o dowolnie zdefiniowanym kształcie, a dokładnie krzywa Béziera. Ogólnie do tworzenia SVG najlepiej zaopatrzyć się w program do grafiki wektorowej, ale istnieją też edytory online, jak na przykład Vectr. Na początku tworzenie ścieżek może nie jest super intuicyjne, ale jak się przeklikacie to odkryjecie, że dają nieograniczone możliwości tworzenia kształtów.

Animuj ze SMIL

Jeżeli tworzycie animacje SVG, to rekomendowaną techniką jest SMIL. Dzięki niej możemy tworzyć różne cuda takie jak: przesuwanie, obracanie, przekształcanie elementów jeden w drugi. Mamy również szereg opcji do kontroli takich właściwości jak czas, ilość powtórzeń, kolor, itp. Jest to dość potężne narzędzie i wiele można dzięki niemu zdziałać. Ja skupię się na animacji po ścieżce, którą tworzymy dzięki elementowi <animateMotion>.
Sezon narciarski tuż tuż więc przygotowałem w Illustratorze ilustrację pro-narciarza i wyeksportowałem do SVG, potem jeszcze przepuściłem przez zacny optymalizator SVGOMG, całość zapakowałem w diva, dodałem podstawowe style i tyle.
Warto korzystać z optymalizatora, ponieważ porządkuje i zmniejsza zawartość pliku SVG wyeksportowanego z programu graficznego. SVGOMG daje łatwą możliwość kontroli jakie zbędne elementy SVG chcemy usunąć.

See the Pen Skier by Mikołaj (@Mikolaj_Szczepkowski) on CodePen.


Aby nasz narciarz ruszył po zdefiniowanej ścieżce trzeba mu dodać element <animateMotion>.

<animateMotion
xlink:href="#skier"
dur="2.5s"
rotate="auto"
repeatCount="indefinite"
path="M8,56.11C19.36,74.34,30.7,92.58,41.74,111c10.69,17.86,19.63,36.15,29.3,54.5C75.73,174.43,81.8,183,90.41,188.2c10.79,6.55,24.41,7.06,36.69,4.14,12.68-3,25.63-7.83,35.85-16.12,18.85-15.29,27.82-38.69,31-60.51,1.83-12.56,5.1-27.92-6.85-35.45-5.25-3.31-16-7.5-22.84-9-10-2.21-16.46-.39-24.5,1.5-6.5,1.52-12.72,6.35-17.19,11.65A43.44,43.44,0,0,0,116,96.13c-3.34,8.12-6,16.63-6.53,25.4-1.09,18.5,9.81,34.14,24.62,44.28,12.84,8.79,30.16,16.58,45.56,18.73,18,2.52,36.1,7.7,55.82,9.52s41.13,3.08,43.65,3.08S300,198.82,300,198.82" />;

Poprzez atrybut xlink:href wyznaczyłem element do zaanimowania, w dur określiłem czas animacji, a w repeatCount ilość powtórzeń. Dzięki atrybutowi rotate nastawionym na auto wskazałem aby animowany element obracał się wzdłuż ścieżki, co wygląda bardziej realnie. Warto jeszcze skorygować położenie animowanego elementu poprzez transformację i gotowe.

See the Pen Skier animation by Mikołaj (@Mikolaj_Szczepkowski) on CodePen.

Eksperymenty z CSS

W CSS również jesteśmy w stanie zaanimować element wzdłuż wybranej ścieżki. Jednak jest to technika eksperymentalna i wspierana jedynie przez Chrome i Operę. Chodzi tu o właściwość motion-path. Co ciekawe dzięki tej właściwości możemy zaanimować każdy element HTML, nie tylko SVG. Działanie jest bardzo proste. W HTML mamy statycznego narciarza, a w CSS dopisujemy:

#skier {
  motion-path: path("M8,56.11C19.36,74.34,30.7,92.58,41.74,111c10.69,17.86,19.63,36.15,29.3,54.5C75.73,174.43,81.8,183,90.41,188.2c10.79,6.55,24.41,7.06,36.69,4.14,12.68-3,25.63-7.83,35.85-16.12,18.85-15.29,27.82-38.69,31-60.51,1.83-12.56,5.1-27.92-6.85-35.45-5.25-3.31-16-7.5-22.84-9-10-2.21-16.46-.39-24.5,1.5-6.5,1.52-12.72,6.35-17.19,11.65A43.44,43.44,0,0,0,116,96.13c-3.34,8.12-6,16.63-6.53,25.4-1.09,18.5,9.81,34.14,24.62,44.28,12.84,8.79,30.16,16.58,45.56,18.73,18,2.52,36.1,7.7,55.82,9.52s41.13,3.08,43.65,3.08S300,198.82,300,198.82");
}

Wartością motion-path jest nasza ścieżka, po której porusza się narciarz.
Teraz trzeba zdefiniować animację.

@keyframes ride {
  0% {
	motion-offset: 0%;
  }
  100% {
	motion-offset: 100%;
  }
}

Motion-offset to pozycja elementu na ścieżce. I dodajemy właściwość naszemu narciarzowi animation: ride 2.5s linear infinite;
Ten sam efekt co przy użyciu SMIL, w czystym CSS.

See the Pen Skier motion path by Mikołaj (@Mikolaj_Szczepkowski) on CodePen.


Jak widać animacje SVG po ścieżce nie są trudnym zagadnieniem, zwłaszcza dla programistów z graficznym backgroundem. SMIL jest wspierany przez większość przeglądarek z wyjątkiem IE, Egde i Opera Mini. Z kolei motion-path to technika eksperymentalna, którą mogą podziwiać jedynie użytkownicy Chrome i Opery. Jeżeli chodzi o animacje SVG to najwięcej można zdziałać przy użyciu którejś biblioteki JavaScript-owej, która także zadba o wyświetlanie na niesfornych przeglądarkach. Ale o tym może w innym odcinku. Trzymajcie się! I udanych ścieżek 🙂

Site Footer

Sliding Sidebar