Udostępnij za pośrednictwem

  • Artykuł

     

Kurs HTML5 - Canvas - Animacje Udostępnij na: Facebook

Autor: Piotr Bubacz

Opublikowano: 2011-11-25

Coraz częściej, na stronach internetowych, uzupełnieniem obrazów statycznych jest animacja. Może to być prosty baner lub zaawansowana gra. W tym samouczku nauczysz się, jak tworzyć proste animacje w elemencie canvas.

Przed wykonaniem zadań powinieneś wiedzieć:

Po wykonaniu zadań nauczysz się:

  • jak animować elementy.

Implementacja

Twoim zadaniem będzie przedstawienie animacji piłki (koła) na stronie. Piłka odbija się od dolnej i górnej krawędzi, zmieniając kolor. Widok końcowy aplikacji został przedstawiony na Rys. 1.

Rys. 1. Efekt końcowy.

Animacja w elemencie canvas polega na cyklicznym przerysowywaniu całości obrazka z uaktualnionymi obiektami. Animacja składa się z następujących kroków:

  1. usunięcie poprzedniego rysunku,
  2. zapisanie stanu elementu canvas (jest to używane w przypadku, kiedy w kolejnych krokach zmieniamy style lub transformujemy element canvas),
  3. wykonanie operacji przeliczenia nowych współrzędnych elementu i ponowne narysowanie wszystkich elementów na stronie,
  4. przywrócenie stanu elementu canvas (jak w pkt. 2.).

Do cyklicznego przerysowywania obrazka możesz wykorzystać dwie funkcje języka JavaScript:

  • setInterval(funkcja, czas) ­ funkcja jest nazwą funkcji, która ma być wywołana co czas podany w milisekundach (1s=1000ms); możesz zatrzymać jej cykliczne wywoływanie za pomocą funkcji clearInterval(),
  • setTimeout(funkcja, czas) ­ funkcja jest nazwą funkcji, która ma być wywołana po czasie określonym w parametrze czas, podanym w milisekundach (1s=1000ms).

Funkcja setInterval jest używana w sytuacji, kiedy zachodzi potrzeba wykonania operacji w dokładnych odstępach czasowych, ponieważ nie czeka ona na zakończenie operacji, a jedynie wykonuje cyklicznie zadanie. Funkcja setTimeout jest wywoływana na końcu operacji i na czas pomiędzy kolejnym wywołaniem funkcji wpływa czas jej realizacji. Zapewne bardzo często spotkasz się z potrzebą zapewnienia cykliczności wykonywanych operacji. Wówczas użyjesz funkcji setInterval.

Przygotowanie strony

Przygotuj szablon i obramuj element canvas kolorem niebieskim, tak, aby zaznaczyć obszar elementu.

  1. W edytorze HTML utwórz nowy plik pod nazwą index.html i wklej do niego szkielet strony:
<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="utf-8">
        <title>Animacja w Canvas</title>
        <script type="text/javascript">
            var canvas 
            var context;

            function draw(){
                canvas = document.getElementById('image1');
                context = canvas.getContext('2d');
            }
        </script>
        <style type="text/css">
            canvas { border: 1px solid blue; }
        </style>
    </head>
    <body onload="draw();">
        <canvas id="image1" width="400" height="400">
            Twoja przeglądarka nie wspiera elementu canvas!
            Pobierz Internet Explorer 9 lub nowszą wersję! 
        </canvas>
    </body>
</html>
  1. Przygotuj zmienne przechowujące aktualne współrzędne piłki (x,y), przesunięcie zmiennej y (dy), paletę kolorów (kolory) oraz aktualny kolor (i). Za linią var context; dodaj:
var x = 200;
var y = 20;
var dy = 10; 
var kolory = new Array("blue","red","yellow","green");
var i = 0;
  1. Zapisz zmiany w pliku index.html i otwórz go w przeglądarce wspierającej element canvas, np. Internet Explorer 9.

Przygotowanie animacji

  1. Utwórz nową funkcję, umieszczoną w funkcji draw, oraz cykliczne jej wywołanie za pomocą setInterval..
  • Ustaw kursor za znacznikiem z metodą getContext() i dodaj nową linię. Wpisz:
setInterval(anim, 100);
  • Ustaw kursor przed znacznikiem </script>i dodaj nową linię. Wpisz:
function anim() {
    context.clearRect(0, 0, canvas.width, canvas.height);
}
  1. Narysuj piłkę – koło o promieniu 20 pikseli w punkcie określonym przez zmienne x i y. Koło ma zostać wypełnione kolorem z listy (kolory) na pozycji określonej przez wartość zmiennej i.
  • Poniżej metody clearRect wpisz:
context.beginPath();
context.fillStyle = kolory[i];
context.arc(x, y, 20, 0, Math.PI * 2, true);
context.closePath;
context.fill();
  1. Zapisz stronę index.html i odśwież ją w przeglądarce. Sprawdź, czy strona wygląda tak, jak na Rys. 2.

Rys. 2. Piłka umieszczona na elemencie canvas.

Animacja piłki

Teraz, gdy wiesz już jak narysować piłkę, nadszedł czas na jej animację. Animacja będzie polegała na ruchu piłki w dół, następnie odbiciu od krawędzi elementu canvas i ruchu do góry, aż do krawędzi, gdzie piłka ponownie się odbije. Przy każdym odbiciu piłka będzie cyklicznie zmieniała kolor.

  1. Dodaj zmianę pozycji piłki.
  • Poniżej metody clearRect wpisz:
y += dy;
  1. Zapisz stronę index.html i odśwież ją w przeglądarce. Sprawdź, jak zachowuje się piłka.
Informacja
Piłka przesuwa się z góry na dół, ale nie odbija się od krawędzi. Aby mogła się odbić, musisz ograniczyć jej ruch do pola elementu canvas. Pole to ma wysokość określoną przez wartość canvas.height. Należy również uwzględnić promień piłki. Aby aby nie „wychodziła” za pole, musisz ograniczyć jej ruch od 20 do (canvas.height-20) pikseli.
  1. Ogranicz ruch piłki do od 20 do (canvas.height-20) pikseli.
  • Za poprzednio dodaną linijką wpisz:
if (y > (canvas.height-20)) {
    dy = -10;
}
if (y < 20) {
    dy = 10;
}
  1. Zapisz stronę index.html i odśwież ją w przeglądarce. Sprawdź, jak zachowuje się piłka.
Informacja
Piłka przesuwa się z góry na dół i odbija się od krawędzi. Aby możliwa była zamiana koloru, musisz po każdym odbiciu od górnej lub dolnej krawędzi zmienić kolor wypełnienia – wartość zmiennej i od 0 do ilości elementów w tablicy kolorów.
  1. Zmień cyklicznie kolor po odbiciu od krawędzi.
  • Za linijką dy = -10; dodaj :
i = ++i % kolory.length;
  • Za linijką dy = 10; dodaj :
i = ++i % kolory.length;
  1. Zapisz stronę index.html i odśwież ją w przeglądarce. Sprawdź, jak zachowuje się piłka.

Strona końcowa

Poniżej możesz zobaczyć końcowy kod strony HTML:

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="utf-8">
        <title>Animacja w Canvas</title>
            <script type="text/javascript">
                var canvas
                var context;
                var x = 200;
                var y = 20;
                var dy = 10;
                var kolory = new Array("blue", "red", "yellow", "green");
                var i = 0;

                function draw() {
                    canvas = document.getElementById('image1');
                    context = canvas.getContext('2d');
                    setInterval(anim, 100);
                }

                function anim() {
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    y += dy;
                    if (y > (canvas.height - 20)) {
                        dy = -10;
                        i = ++i % kolory.length;
                    }
                    if (y < 20) {
                        dy = 10;
                        i = ++i % kolory.length;
                    }
                    context.beginPath();
                    context.fillStyle = kolory[i];
                    context.arc(x, y, 20, 0, Math.PI * 2, true);
                    context.closePath;
                    context.fill();
                }
            </script>
            <style type="text/css">
                canvas { border: 1px solid blue; }
            </style>
    </head>
    <body onload="draw();">
        <canvas id="image1" width="400" height="400">
            Twoja przeglądarka nie wspiera elementu canvas!
            Pobierz Internet Explorer 9 lub nowszą wersję! 
        </canvas>
    </body>
</html>

Podsumowanie

W tym artykule nauczyłeś się tworzyć prostą animowaną grafikę rastrową na stronach WWW. Poznałeś kroki animacji oraz dwie funkcje, umożliwiające cykliczne wywoływanie funkcji.

Dodatkowo zobacz:

Zadanie

Aby sprawdzić swoje umiejętności, spróbuj przygotować animację napisu „Dawno, dawno temu…” od dołu do góry elementu canvas (jak napisy końcowe filmu). Wielkość napisu: 30pt, font: Arial, wymiary elementu canvas 400x400 pikseli.

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

  • Sprawdź, jak dodać tekst do elementu canvas.
  • Animację należy rozpocząć poza elementem cavas, a następnie, stosując krok dy = -5, przesuwać napis do góry.
<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="utf-8">
        <title>Animacja w Canvas</title>
            <script type="text/javascript">
                var canvas
                var context;
                var x = 200;
                var y = 420;
                var dy = -5;

                function draw() {
                    canvas = document.getElementById('image1');
                    context = canvas.getContext('2d');
                    setInterval(anim, 100);
                }

                function anim() {
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    y += dy;                   
                    context.textAlign = "center";
                    context.textBaseline = "middle";
                    context.font = "30pt Arial";
                    context.fillStyle = "blue";
                    context.fillText("Dawno, dawno temu...", x, y);
                }
            </script>
            <style type="text/css">
                canvas { border: 1px solid blue; }
            </style>
    </head>
    <body onload="draw();">
        <canvas id="image1" width="400" height="400">
            Twoja przeglądarka nie wspiera elementu canvas!
            Pobierz Internet Explorer 9 lub nowszą wersjęp! 
        </canvas>
    </body>
</html>