W grafice wektorowej SVG można animować utworzone grafiki w bardzo wygodny sposób. Animacja polega na utworzeniu klatek jak ma się zmieniać wybrany obiekt. Zaletą takiej animacji jest fakt, że do animowania można użyć nie tylko metod przygotowanych w specyfikacji SVG, ale również CSS. Niemniej niniejszy poradnik skupi się na tym pierwszym sposobie.
Obiekt animate można zadeklarować w dowolnym miejscu w pliku, ale zaleca się trzymanie wszystkich takich obiektów koło siebie w celu dobrej organizacji kodu. Obiekt ten może przyjmować różne atrybuty. W celu zrozumienia artykułu trzeba poznać część z nich:
| Atrybut | Zastosowanie |
|---|---|
| id | identyfikator animacji |
| xlink:href | identyfikator obiektu, którego dotyczy animacja |
| attributeName | określa, który atrybut obiektu jest zmieniany |
| from | określa poczatkową wartość atrybutu |
| to | określa końcową wartość atrybutu |
| dur | czas trwania animacji |
| begin | określa kiedy ma się rozpocząć animacja |
| repeatCount | określa ile razy animacja ma zostać odegrana |
Jak już wspomniałem we wstępie animacja to zbiór stanów jak po kolei mają się zmieniać atrybuty obiektu. W celu ustalenia "klatki" służy obiekt animate. Przypuśćmy, że chcemy stworzyć animację, która będzie animowała ruch koła i będzie rozpoczynała się po kliknięciu w koło.
W przedstawionej animacji koło zmienia swoją pozycję wzdłuż współrzędnych X. Poniżej znajduje się kod pliku SVG z wyjaśnieniem:
(1.) Otwórz obiekt SVG i (2. - 3.) określ dokumentacje z jakich korzysta plik oraz (4.) ustal wyświetlany i wybierany rozmiar rysunku. (4.) Utwórz koło, które nazywa się circle1 i znajduje się w lokalizacji (50, 50).
(5.) Utwórz klatkę animacji do której można się odwołać poprzez circle_move. (6.) Ustal, że animacja dotyczy utworzonego koła circle1. (7.) Zmieniającym się argumentem jest współrzędna X (cx) (8.) z (from) wartości 50 (9.) do (to) 350. (10.) Animacja ma trwać (dur) 1 sekundę. Zgodnie z założeniami (11.) rozpoczyna się zaraz po kliknięciu w obiekt. (12.) Ustalenie argumentu fill na freeze zapobiega powrotowi do stanu wyjściowego po zakończeniu animacji.
Jak widać animacja po zakończeniu zatrzymuje obiekt w nowe pozycji dzięki ustaleniu atrybutu fill. Warto jednak zauważyć, że po ponownym kliknięciu w koło obiekt rozpoczyna animację od pierwotnej pozycji. W celu uniknięcia tego problemu warto napisać dodatkową klatkę, która spowoduje, że koło wróci z powrotem.
Znając już kod, który przesuwa piłkę z lewej strony na prawą nie powinno stanowić problemu napisanie drugiej klatki, która spowoduje, że piłka wróci na swoją pierwotną pozycję tak jak zostało to przedstawione poniżej:
Trudnością może się tutaj okazać kwestia zsynchronizowania animacji. Co prawda wiadomo, że pierwsza animacja trwa sekundę, ale niewiadomo kiedy nastąpi kliknięcie. W tym celu należy atrybut begin animacji powrotnej ustawić na nazwę animacji i dopisać ".end". Wtedy animacja powrotna zostanie wywołana w momencie, gdy pierwsza zostanie zakończona. Tego typu rozwiązanie jest bardzo wygodne, ponieważ nawet po zmianie trwania pierwszej animacji, druga zostanie odegrana w odpowiednim momencie.
Kod nowego dokumentu SVG wygląda następująco:
Kolejne zadanie będzie polegać na utworzeniu animacji, która będzie zmieniać rozmiar koła w zakresie od 0 do R. W poniższym przykładzie R = 40. Po kliknięciu koło powinno zmniejszać się tak długo, aż R = 0 w 2 sekundy, a potem powinno wrócić do poprzedniego stanu po 3 sekundach. Poniżej znajduje się DEMO zadania:
W celu rozwiązania tego zadania należy zmienić attributeName na r, aby zmieniać promień koła. Później pozostaje ustalić odpowiedni wartości klatek na te z polecenia zadania.
Po przeczytaniu tego artykułu nie powinno stanowić problemu utworzenie klatek animacji i synchronizowania ich. W dalszych częściach zostanie konkretniej wyjaśnione jak sterować ilością powtórzeń oraz zasad zmian wartości atrybutu.
Napisz animację, która będzie animować czerwony kwadrat. Na płótnie powinien znajdować się tylko jeden obiekt, który będzie kwadratem. Po kliknięciu powinien się poszerzyć się dwa razy, następnie wydłużyć dwukrotnie i na zakończenie zmienić kolor na zielony. Długość każdej zmiany rozmiaru powinna wynosić dokładnie 3 sekundy każda, a zmiana koloru sekundę.
Drugą część animacji polega na równoczesnej zmianie szerokości i wysokości o połowę w ciągu 2 sekund. Następnie w sekundę kwadrat powinien zrobić się czerwony.
Wykonaj ponownie Zadanie 1, ale w trakcie zmian rozmiaru środek obiektu powinien znajdować się cały czas pośrodku płótna.
