Animacja Look In Scalable Vector Graphics (SVG)

Dzisiaj będziemy kontynuować naszą dyskusję Skalowalna grafika wektorowa (SVG), i tym razem będziemy pracować Animacja SVG. Nie obawiaj się jednak, że animacja SVG jest stosunkowo łatwa i faktycznie w tym poście zaczniemy od podstaw.

Podstawowe wdrożenie

Animację w SVG można wykonać element;

Jak widać z powyższego fragmentu kodu, dodajemy wewnątrz element, którego to dotyczy. To zawiera niektóre z następujących atrybutów;

attributeName: Ten atrybut określa, który atrybut elementu zostanie zmieniony w animacji.

z: Ten atrybut jest opcjonalny, możemy określić dokładną wartość lub pozostawić ją, aby umożliwić jej rozpoczęcie od miejsca, w którym była.

do: Ten atrybut określa kierunek animacji. W zależności od określonej wartości w attributeName, wyniki mogą się różnić. Ale w tym przykładzie rozszerzy wysokość.

dur: Ten atrybut określa czas trwania animacji. Wartość tego atrybutu jest wyrażona w składni wartości zegara. Na przykład, 02:33 reprezentuje 2 minuty i 33 sekundy, podczas gdy 3h jest równa 3 godzinom, ale nie potrzebujemy tak długo, więc określiliśmy czas trwania dla just 3s lub 3 sekundy;

To samo dotyczy element, ale tym razem cel atrybutu promienia okręgu (r).

Podstawowe demo wdrożeniowe

Ruchomy element

W ruchomych elementach SVG musimy tylko kierować współrzędne elementu x i y;

W powyższym przykładzie przesuwamy prostokąt z 0 do 200 w ciągu 3 sekund prostokąt pojawi się poruszający się poziomo od lewej do prawej. Ponadto, jeśli przyjrzysz się uważnie, dodaliśmy także inny atrybut do element, a mianowicie napełnić.

napełnić atrybut tutaj nie ma nic wspólnego z kolorem tła, tak jak w innych elementach SVG. Ten atrybut określa sposób działania animacji po zakończeniu trwania. W tym przykładzie my zamrażać dotknięty element, tak aby pozostał tam, gdzie kończy się animacja.

Działa również podobnie do element, możemy użyć cx lub cy, w ten sposób:

Demo ruchomego elementu

Animuj wiele atrybutów

Do tej pory kierujemy tylko jeden atrybut do animacji, ale możliwe jest także animowanie więcej niż jednego atrybutu naraz. Poniższy przykład pokazuje, jak to robimy:

Jak widać, działa w podobny sposób, tylko teraz mamy dwa elementy wewnątrz celować w promień i szerokość skoku być dotkniętym.

Prezentacja wielu atrybutów

Podążanie ścieżką

W naszym poprzednim poście na Praca z tekstem w SVG, pokazaliśmy ci, jak przepuścić tekst na ścieżkę. Możliwe jest również to samo Animacja SVG, możemy animować element podążający ścieżką. Oto przykład.

Ścieżka jest lepiej zdefiniowana w ciągu element, jak pokazano powyżej. Aby element podążał ścieżką, musimy zdefiniować animację za pomocą i połącz ścieżkę ID z element w następujący sposób;

To wszystko, teraz zobaczmy to w akcji;

Po ścieżce demo

Transformacje

Możemy także użyć transformacji skala, Tłumaczyć i obracać się na animację i do tego użyjemy ;

Transformacje w SVG dzielą podobne zasady z CSS3 i omówiliśmy to dość obszernie w naszym poprzednim poście o transformacji 2D CSS3.

Demo transformacji

Końcowe przemyślenia

W zależności od twojej biegłości w animacji SVG możesz stworzyć coś takiego.

Jedną z zalet używania animacji SVG w stosunku do animacji Flash jest to, że nie działa ona na wtyczkach innych firm, a także znacznie szybciej niż Flash. Po tym, jak Adobe przestało obsługiwać Flasha w Androidzie, warto spróbować wypróbować to podejście, aby wyświetlać animacje na następnej stronie.

Dalsze odniesienia

Dokumentacja animacji SVG
Zaawansowane techniki animacji SVG

Wyświetl demo
Pobierz źródło