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.
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:
Przykładowa animacja z wykorzystaniem powyższej ścieżki wygląda następująco: (kliknij koło, aby rozpocząć)
(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ę.
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ąć)
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.
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] | auto | auto-reverse |
|---|---|---|
Przyjrzyjmy się przypadkowi, gdy animacja ma ustawiony atrybut rotate na auto. Zastosowane zostały tutaj techniki wcześniej niewyjaśnione.
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ą.
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.
| auto | auto + scale(1, -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ą.
Napisz kod, który wyświetli grafike przedstawioną poniżej.
