23: Animowanie SVG za pomocą SMIL - CSS-Tricks

Anonim

Chociaż animowanie SVG za pomocą CSS może być wygodniejsze dla przeciętnego użytkownika, SVG ma inny sposób tworzenia animacji wbudowany w samą składnię SVG. To jest dokładnie to, co pokrótce omówimy w tym filmie, ale jeśli chcesz mieć kompletny przewodnik, zdecydowanie sprawdź Przewodnik po animacjach SVG (SMIL) autorstwa Sary Soueidan tutaj, w CSS-Tricks.

SMIL to skrót od Synchronized Multimedia Integration Language. Jak rozumiem, jest to „rzecz” sama w sobie, która jest wbudowana w SVG. Ale SVG ma swoje własne dodatki podobne do SMIL. Będę nazywał to wszystko jako SMIL, chociaż jestem pewien, że czasami technicznie się mylę.

W przypadku bardzo prostych animacji nie ma większego znaczenia, czy zrobisz to w SMIL czy CSS, zrobi to samo na mniej więcej tym samym poziomie trudności. Niektóre rzeczy mogą być nawet łatwiejsze w CSS. Ale oto kilka rzeczy, do których należy się zastosować SMIL:

  • Musisz animować coś, czego CSS nie może dotknąć. Podobnie jak kształt wielokąta lub ścieżki.
  • Chcesz użyć zdarzenia wpływają na animację, jak clicklub mouseoverczy coś.
  • Chcesz tworzyć dodatkowe animacje, na przykład animować z dowolnego miejsca, w którym teraz jesteś, kolejne x pikseli.
  • Chcesz mieć animacje, które odnoszą się bezpośrednio do innych animacji, na przykład kiedy ta animacja się zakończy, rozpocznij następną animację (bez ręcznego manipulowania czasem trwania).
  • Jestem pewien, że jest ich więcej.

Na początku składnia wydaje się onieśmielająca, ale obiecuję, że jest naprawdę bardzo łatwa. Oto podstawowy przykład:

Zobacz Pen jAipI autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.

„Zmiana kształtu” jest naprawdę wyjątkowa w przypadku SMIL, więc oto lepszy przykład niż ten, który zrobiliśmy w filmie:

Zobacz przycisk Pen Shape Morph autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.

W tym demo zdarzenia są obsługiwane przez JavaScript zamiast SMIL. Po prostu miło wiedzieć, że też możesz to zrobić. Wyzwalacze zdarzeń SMIL są fajne, ale to, co trzeba kliknąć, musi znajdować się w tym SVG, a nie w jakimkolwiek innym miejscu w DOM.