Strona główna » Poradniki » Grafika SVG » Animacja po dowolnej ścieżce

Animacja po dowolnej ścieżce

Wstęp

W celu zmiany pozycji obiektu podczas animacji należało dokładnie określić jego pozycję. Dodatkowo można było określić czas po jakim obiekt ma się znaleźć w danej pozycji. Do drobnych projektów takie rozwiązanie jest wystarczające. Jednak animacja może wymagać bardziej skomplikowanej ścieżki i oznaczałoby to niewiarygodny nakład pracy, aby tę ścieżkę opisać przy pomocy przesunięć x, y oraz rozłożyć to w czasie.

Ruch po ścieżce

W SVG można znaleźć obiekt animationMotion, który ułatwia zadanie poruszania obiektu po ścieżce. Jego głównym celem jest określenie podstawowych właściwości animacji tj. ilość powtórzeń, czas wykonania oraz ścieżkę po której animacja ma się odbyć.

Przypuśćmy, że obiekt ma się poruszać po poniższej ścieżce:

  1.   <path stroke="#000" fill="none"
  2.     d="M20.5 62.1c0-28.5 23.1-51.6 51.6-51.6s51.6 23.1 51.6 51.6"/>

Przykładowa animacja z wykorzystaniem powyższej ścieżki wygląda następująco: (kliknij koło, aby rozpocząć)

  1. <svg xmlns="http://www.w3.org/2000/svg"
  2.   width="400" height="160" viewBox="0 0 200 80">
  3.   <path stroke="#E0E0E0" fill="none"
  4.     d="M20.5 62.1c0-28.5 23.1-51.6 51.6-51.6s51.6 23.1 51.6 51.6"/>
  5.   <circle id="obj0" fill="green "cx="20.5" cy="62.1" r="10" />
  6.   <animateMotion
  7.     xlink:href="#obj0"
  8.     dur="5s"
  9.     begin="click"
  10.     fill="freeze"
  11.     path="M0.0 0.0c0-28.5 23.1-51.6 51.6-51.6s51.6 23.1 51.6 51.6"
  12.     />
  13. </svg>

(1. - 2.) Ustal właściwości obiektu oraz (3.) wstaw na płótno ścieżkę (została wstawiona tylko po to, aby pokazać tor, nie jest wymagana w animacji.) (4.) Wstaw koło tam skąd ma zostać rozpoczęta animacja. (6.) Utwórz nowy obiekt animateMotion i określę, że (7.) dotyczy obiektu o id obj0, (8.) animacja ma trwać 5 sekund, (9.) ma się rozpocząć po kliknięciu obiektu i (10.) po zakończeniu animacja ma pozostać zamrożona. (11.) Nowym atrybutem jest tutaj path. Jest to ścieżka relatywna do pozycji obiektu, dlatego zaczyna się w punkcie (0, 0) i opisuje pewną ścieżkę.

Uwagi

W przypadku, gdyby ścieżka nie zaczynała się w punkcie (0, 0) animacja byłaby przesunięta o pozycję punktu początkowego co ilustruje poniższy przykład: (kliknij koło, aby rozpocząć)

  1.     path="M20.0 0.0c0-28.5 23.1-51.6 51.6-51.6s51.6 23.1 51.6 51.6"

Obiekt po rozpoczęciu animacji przesuwa się do punktu startowego ścieżki. Animacja później jest wykonywana po prawidłowej ścieżce, ale w tym samym miejscu co poprzednio.

Obrót podczas animacji

Przypuśćmy, że przesuwanym obiektem nie jest koło, a strzałka. Wtedy można zauważyć, że przesuwany obiekt się nie obraca podczas ruchu. Można jednak to zmienić przy pomocy atrybutu rotate, który przyjmuje następujące wartości: [liczba] | auto | auto-reverse. Domyślnie atrybut ten ustawiony jest na 0 czyli, że obiekt nie jest obracany podczas animacji i pozostaje w takim obrocie jakim był przed rozpoczęciem ruchu.

Jeśli wartość została ustawiona na konkretną [liczbę] to obiekt podczas ruchu zachowuje swój kąt obrotu poprzez całą animację. W przypadku wartości "auto" kąt obrotu jest wyliczany na podstawie stycznej do aktualnej ścieżki. Wartość "auto-reverse" różni się tylko dodatkowym obrotem kierunku o 180°. Poniżej znajduje się tabela, która pokazuje różnice pomiędzy każdą z trzech obrotów obiektu:

[liczba]autoauto-reverse

Kod

Przyjrzyjmy się przypadkowi, gdy animacja ma ustawiony atrybut rotate na auto. Zastosowane zostały tutaj techniki wcześniej niewyjaśnione.

  1. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  2.   width="200" height="200" viewBox="0 0 40 40">
  3.   <defs>
  4.     <path id="path04"
  5.       d="M0 0a12 12 0 0 1-12 12 12 12 0 0 1-12-12 12 12 0 0 1 12-12 12 12 0 0 1 12 12z"/>
  6.   </defs>
  7.   <use x="32" y="20" stroke="darkgray" stroke-width="0.5" fill="none"
  8.     xlink:href="#path04" />
  9.   <g transform="translate(32, 20)">
  10.     <path d="M0,0 L0,12 L6,0" fill="blue">
  11.       <animateMotion
  12.         dur="8s"
  13.         rotate="auto"
  14.         repeatCount="indefinite">
  15.         <mpath xlink:href="#path04"/>
  16.       </animateMotion>
  17.     </path>
  18.   </g>
  19. </svg>

Po pierwsze (3. - 6.) ścieżka po której porusza się obiekt zostało zdefiniowana, więc można ją zastosować wielokrotnie. (7. - 8.) Pokaż kontur ścieżki. Następnie (9.) przesuń animację tak, aby obiekt chodził po ścieżce.

Tym razem animacja została zdefiniowana (10. - 17.) wewnątrz ścieżki. Oznacza to, że dana animacja dotyczy (10.) ścieżki. Pozwala to nie pisać atrybutu xlink:href, a co za tym idzie uprościć kod. (11.) Animacja: (12.) trwa 8 sekund, (13.) obiekt ma się obracać, a (14.) sama animacja ma się powtarzać w nieskończoność.

Dodatkową nowością jest fakt, że ścieżka nie jest określona poprzez atrybut path. Tym razem ścieżka jest pobierana z sekcji definicji poprzez obiekt mpath, który deklaruje się wewnątrz obiektu animateMotion. Obiekt mpath ma tylko jeden atrybut xlink:href, który powinien zawierać id obiektu do pobrania, który jest prawidłową ścieżką.

Dodatkowe uwagi

Warto zauważyć, że obiekt podczas obracania w trybie auto i auto-reverse nie obraca się tą samą stroną do przodu. Można to naprawić dodając skalowanie scale(-1, 1) lub scale(1, -1) w zależności od ustawienia początkowego obracanego obiektu.

autoauto + scale(1, -1)

Zadania

Zadanie 1

Napisz kod, który wyświetli grafikę przedstawioną poniżej. Kliknij czerwone kółko, aby zobaczyć animację. Definicja ścieżki, którą można wykorzystać została podana pod grafiką.

  1.   <defs>
  2.     <path id="i10p" d="M0 0a12 12 0 0 1-12 12 12 12 0 0 1-12-12 12 12 0 0 1 12-12 12 12 0 0 1 12 12z" />
  3.   </defs>

Zadanie 2

Napisz kod, który wyświetli grafike przedstawioną poniżej.