Artykuł
11/24/2011

Kurs HTML5 – SVG – Animacja

Autor: Marcin Dembowski

Opublikowano: 2011-11-23

Obiekty SVG, oprócz kolorów, stylów i rozmiarów, możesz także kontrolować za pomocą JavaScript. Dzięki temu istnieje możliwość tworzenia animowanych obiektów, czy elementów.

Przed wykonaniem zadań powinieneś wiedzieć:

Czym jest SVG
Jak tworzyć pliki stron HTML i pliki tekstowe w dowolnym edytorze
Jak osadzać SVG na stronach
Jakie są podstawowe kształty w SVG

Po wykonaniu zadań:

będziesz potrafił animować elementy SVG za pomocą JavaScript.

Implementacja

Twoim zadaniem będzie utworzenie strony HTML, która wyświetli aktualny czas na stronie w postaci analogowego zegara tak, jak na Rys. 1.

Rys. 1. Wynik końcowy ćwiczenia.

Tworzenie strony oraz pliku SVG

Utwórz stronę HTML5 wraz z obiektem SVG.

W dowolnym edytorze utwórz nowy dokument HTML5 i wpisz poniższy kod:

<!DOCTYPE html/>
<html>
<head>
    <title>Animacja SVG</title>
</head>
<body>
<object data="clock.svg" type="image/svg+xml" width="300" height="300">
BRAK OBSŁUGI SVG
</object>
</body>
</html>

Zapisz powyższy plik pod nazwą animacja.html.
Utwórz kolejny plik, tym razem SVG i umieść w nim poniższy kod:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="0 0 300 300" version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <pattern id="rulerPattern" patternUnits="userSpaceOnUse"
        x="0" y="0" width="10" height="10"
        viewBox="0 0 10 10" >
        <line x1="0" y1="0" x2="10" y2="0" stroke="lightgray" fill="none" />
        <line x1="0" y1="0" x2="0" y2="10" stroke="lightgray" fill="none"/>
    </pattern>
    <rect x="0" y="0" width="100%" height="100%" fill="url(#rulerPattern)" stroke="gray" />
<defs>
    <g id="quater">
        <rect x="145" y="15" width="10" height="25" />
        <rect x="145" y="15" width="10" height="15" transform="rotate(30,150,150)" />
        <rect x="145" y="15" width="10" height="15" transform="rotate(60,150,150)" />
    </g>
    <g id="secondGroup">
        <rect x="147" y="30" height="145" width="6" fill="black" />
        <circle cx="150" cy="15" r="3" stroke="black" fill="white" />
    </g>
    <g id="hourGroup">
        <rect x="145" y="65" height="110" width="10" transform="rotate(0,150,150)" fill="black" />
        <circle cx="150" cy="15" r="9" stroke="black" stroke-width="2" fill="white" />
        </g>
    <g id="minuteGroup">
        <rect x="145" y="35" height="140" width="10" transform="rotate(0,150,150)" fill="black" />
        <circle cx="150" cy="15" r="6" stroke-width="1" fill="white" stroke="black" />
    </g>
    </defs>
    <circle cx="150" cy="150" r="135"
        stroke-width="12"
        stroke="black" fill="white"/>
<use xlink:href="#quater" />
    <use xlink:href="#quater" transform="rotate(90,150,150)" />
    <use xlink:href="#quater" transform="rotate(90,150,150)" />
    <use xlink:href="#quater" transform="rotate(180,150,150)" />
    <use xlink:href="#quater" transform="rotate(270,150,150)" />
    <use xlink:href="#hourGroup" transform="rotate(0,150,150)" id="hourHand"/>
    <use xlink:href="#minuteGroup" transform="rotate(0,150,150)" id="minuteHand"/>
    <use xlink:href="#secondGroup" transform="rotate(0,150,150)" id="secondHand"/>
    <circle cx="150" cy="150" r="6"
        stroke-width="2"
        stroke="white" fill="black"/>
<script>
        <!-- ANIMACJA -->
</script>
</svg>

Zapisz ten plik pod nazwą clock.svg i otwórz stronę w przeglądarce. Powinieneś otrzymać szablon zegara taki, jak na rysunku Rys. 2.

Rys. 2. Szablon zegara analogowego SVG.

Użycie JavaScript do animacji wskazówek zegara.

Aby zegar wskazywał poprawną godzinę, musisz wykorzystać język JavaScript do aktualizacji położenia wskazówek zegara.

W pliku clock.svg zamień linię z komentarzem ANIMACJA za pomocą poniższego kodu:

<!-- ZMIENNE GLOBALNE -->
function doAnimation() {
    <!-- SKRYPT ANIMACJI -->
}
doAnimation();
setInterval('doAnimation()',1000);

Informacja

Zwróć uwagę na funkcję setInterval. Jest ona odpowiedzialna za wywoływanie funkcji (podanej w pierwszym parametrze), co określony interwał czasu podawany w milisekundach (jako drugi parametr). W tym przykładzie wywołuj funkcję doAnimation co jedną sekundę (1000 ms).

Będziesz modyfikował trzy wskazówki, zatem musisz utworzyć odwołania do odpowiednich obiektów SVG z poziomu kodu JavaScript. Zamień linię z komentarzem ZMIENNE GLOBALNE za pomocą poniższego kodu:

var secondHand = document.getElementById('secondHand');
var minuteHand = document.getElementById('minuteHand');
var hourHand = document.getElementById('hourHand');

Pobierz teraz aktualną godzinę i zapamiętaj sekundy, minuty i godziny w oddzielnych zamiennych. Zamień linię z komentarzem SKRYPT ANIMACJI za pomocą poniższego kodu:

var date = new Date();
var second = date.getSeconds();
var minute = date.getMinutes();
var hour = date.getHours() % 12;
<!-- MODYFIKACJA -->

Następnie musisz nakazać zmianę obrotu poszczególnych wskazówek, zależnie od pobranej godziny, minuty i sekundy. Zamień linie z komentarzem MODYFIKACJA za pomocą poniższego kodu:

minuteHand.setAttribute('transform','rotate('+(minute / 60 * 360)+',150,150)');
hourHand.setAttribute('transform','rotate('+(hour / 12 * 360)+',150,150)');
secondHand.transform.baseVal.getItem(0).setRotate((second / 60 * 360),150,150);

Informacja

Zauważ, że modyfikujesz obiekty SVG w dwojaki sposób. Wskazówki minutowe (minuteHand) i godzinowe (hourHand) modyfikowane są za pomocą DOM L2 JavaScript – podaj tutaj nazwę atrybutu obiektu SVG i jego wartość w postaci łańcuchów znaków (string). Drugi sposób wykorzystuje SVG DOM Scripting, wartości modyfikuj jawnie, podając nazwę atrybutu, a następnie pobierz pierwszą wartość, znajdującą się na liście transformacji i zmodyfikuj jej parametry, wykorzystując funkcję setRotate. Ten sposób jest zalecany przy modyfikowaniu i tworzeniu bardziej wymagających grafik, ponieważ dodatkowe operacje związane z serializacją nie są wykonywane, jak ma to miejsce w pierwszym sposobie.

Zapisz plik SVG i otwórz stronę w przeglądarce. Wskazówki powinny wskazywać aktualny czas na komputerze. W przypadku problemów, sprawdź, czy źródło strony jest zgodne z przedstawionym na Rys. 3.

Rys. 3. Fragment kodu dla zegara z pełnym uwzględnieniem kodu odpowiedzialnego za animację.

Podsumowanie

W tym samouczku nauczyłeś się manipulować obiektami SVG z poziomu języka JavaScript, dzięki czemu utworzyłeś prostą animację, wyświetlającą aktualną godzinę na komputerze lokalnym.

W kolejnym artykule nauczysz się definiować kolory i gradienty w SVG.

Zadanie

Aby sprawdzić swoje umiejętności, spróbuj utworzyć animację, taką jak ta, która została przedstawiona na Rys. 4. Celem jest obrócenie prostokąta z kołem (na jednym z jego rogów, wokół środka grafiki) o dodatkowy stopień co 16.7 ms.

Rys. 4. Klatka animacji obiektu w SVG.

Aby zobaczyć podpowiedzi i rozwiązanie zadania przełącz na widok klasyczny.

Zgrupuj prostokąt z kołem w kontenerze (więcej na temat grupowania możesz znaleźć w Biblioteka elementów w SVG) i na nim wykonuj operacje obrotu.
Utwórz zmienną globalną, która przechowywać będzie aktualny stopień obrotu obiektu.
Wywołaj funkcję setInterval z nazwą funkcji modyfikującej obrót obiektu oraz okresem 16.7 ms.

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="0 0 300 300" version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="item" fill="yellow" stroke="black" transform="rotate(45,150,150)">
        <rect x="50" y="50" width="200" height="200" />
        <circle cx="50" cy="50" r="5" />
    </g>
<script>
    var degree = 0;
    var item = document.getElementById('item');
    function doAnimation() {
        degree = (degree + 1) % 360;
        item.setAttribute('transform','rotate('+(degree)+',150,150)');
    }
    setInterval('doAnimation()',16.7);

</script>
</svg>