Animáció, HTML5 Canvas Animation
Az előzőekben megnéztük hogyan tudunk a HTML5 Canvas-ra rajzolni, képet elhelyezni, most nézzük meg, hogy miként tudunk animációkat készíteni rá. A példákban egy SlideShow, majd azt követően egy sin-cos függvény kirajzolását és egy banner szöveg úsztatását fogjuk megnézni. A példákat mindenhol kommentekkel láttam el, ahol fontosnak ítéltem. Remélem, hogy érthetőek lesznek.
Talán kezdjük egy viszonylag egyszerű Slideshow animáció elkészítésével. A képeket egy 600×600-as canvas-ba fogom beletenni és egy kis áttűnés effektet is hozzáadunk a mókához. A példa lelke a képeket cserélő Swithimage(); függvény. A képeket előre definiáltan megadjuk, hogy melyek legyenek, amik cserélődnek és bele tesszük egy imagepaths tömbbe. A setinterval(); függvény segítségével pedig váltogatjuk őket, majd a revealimage(); segítségével pedig kirajzoljuk az aktuálisan következő képet.
SlideShow
Lássuk a kódot:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Canvas Slideshow</title>
</head>
<body>
<canvas id='rajzvaszon' width='600' height='600'>
</canvas>
<script>
var imagePaths = [
"images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg"
]; //megadjuk a képeink helyét, ezt biztos lehet szebben is csinálni, de egyszerűségre törekedtem
var canvas = null; //valtozok definiálása
var ctx = null;
var img = document.createElement("img");
var currentImage = 0;
var revealTimer;
window.onload = function () {
canvas = document.getElementById('rajzvaszon'); //inicializáljuk a canvas-t
ctx = canvas.getContext('2d');
img.setAttribute('width','600'); //beállítjuk a kép méreteit
img.setAttribute('height','600');
switchImage(); //az általunk írt függvény meghívása
// inditjuk az animációt
setInterval(switchImage,3000);
}
function switchImage() { //képváltó függvényünk
img.setAttribute('src',imagePaths[currentImage++]);
if (currentImage >= imagePaths.length)
currentImage = 0;
ctx.globalAlpha = 0.1;
revealTimer = setInterval(revealImage,100);
}
function revealImage() { //aktuális kép kirajzolása
ctx.save();
ctx.drawImage(img,0,0,800,600);
ctx.globalAlpha += 0.1;
if (ctx.globalAlpha >= 1.0)
clearInterval(revealTimer);
ctx.restore();
}
</script>
</body>
</html>
A következő animációs példában egy szinusz függvényt nézünk meg és rajzolunk ki. Úgy, hogy:
1. A szinusz hullám piros, ha az értéke pozitív
2. A szinusz hullám kék, amikor negatív
3. A vonal vastagsága egyenesen arányos az abszolút érték nagyságával. Pl. ha a szinusz értéke 0, a vonal megszűnik
Mivel a szinusz hullám pozitív és negatív értékekkel is rendelkezik, (folyamatosan változik -1 és 1 között) trükköznünk kell, hiszen a vásznon csak pozitív értékeket lehet megjeleníteni.
Ennek érdekében az animációt, az y = 100 az origora optimalizáljuk ez lesz a sin értékének 0 pontja. A hullám csak az y = 50 (ha a szinusz = 1) y = 150 (amikor a szinusz = -1) közé lesz zárva. A feltérképezés így fog kinézni:
Amikor sinertek> 0,
y = 100 – (sinertek-0) * 50;
ha sinertek <0,
y = 100 + (0 – sinertek) * 50;
Tehát, ha a sinertek pozitív, a hullám y = 100 felett, ha negatív, akkor a hullám y = 100 alatt lesz.
Mivel, ezek csak egyes pontok lennének, többször meg kell hívnunk a függvényt, erre fogjuk használni a setInterval (); metódust, mellyel 1 mikroszekundumonként hívjuk meg a hullám(); függvényt.
Lássuk a kódunkat:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Canvas - hullam</title>
<script>
var x = 0;
var anim;
function init() {
// Meghívjuk a hullám függvényünket 1 mikroszekundumonként
setInterval(function() {hullam()}, 1);
}
function hullam()
{
var canvas = document.getElementById("rajzvaszon");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
// szinus előállítása
var y = Math.sin(x*Math.PI/180);
// Ha a szinusz értéke pozitív, y = 100 hoz képest nagyobb, akkor a színét pirosra állítjuk
if(y >=0)
{
y = 100 - (y-0) * 50;
ctx.fillStyle = "red";
}
// Ha a szinusz értéke negatív, y = 100 hoz képest kisebb, akkor a színét kékre állítjuk
if( y < 0 )
{
y = 100 + (0-y) * 50;
ctx.fillStyle = "blue";
}
// a fillrect-el elkezdjük a rajzolást, számolást
ctx.fillRect(x, y, Math.sin(x * Math.PI/180) * 5, Math.sin(x * Math.PI/180) * 5);
// növeljük a szöget
x+=1;
// 1040-nél megállunk
if(x > 1040)
clearInterval (anim);
}
}
</script>
</head>
<body onload="init();">
<canvas id="rajzvaszon" width="700" height="200"></canvas>
</body>
</html>
A példa itt megtekinthető.
Ellenpélda Cos fgv.-el.
A következő példában egy egyszerű szöveges animációt fogunk készíteni.
[singlepic id=6 w=320 h=240 float=center]
Megpróbáltam minél több kommentárral ellátni a forrást, hiszen a parancsok mindegyike szerepelt már az előzőekben. Az egyetlen trükkös rész benne talán az, ahol a túllógást engedélyezzük (if(x < -400)), ez a paraméter függ a szöveg hosszától, hogy szép legyen a szöveg kivezetése. Tehát a -400 értékkel kell bubuckodni a szöveghossz függvényében.
Nézzük a kész kódot:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Canvas - banner</title>
<script>
var x = 700;
function init() {
var canvas = document.getElementById("rajzvaszon");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
// szöveg betűtípus, méret, árnyék, szín beállítása
ctx.font = "36px verdana";
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "black";
ctx.fillStyle = "blue";
// mozogj függvény meghívása 50 mikroszekundumonként
setInterval(function() {mozogj()}, 50)
}
}
function mozogj()
{
var canvas = document.getElementById("rajzvaszon");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
// képernyő törlés
ctx.clearRect(0,0,700,100);
// A szöveg új pozicóba rajzolása
ctx.fillText("html5.ugyesen.com", x, 50);
x -= 3;
// Ha elérjük a szélét, a túllógást engedélyezzük, -400-ig, hogy szép legyen
if(x < -400)
x = 700
}
}
</script>
</head>
<body onload="init();">
<canvas id="rajzvaszon" width="700" height="200"></canvas>
</body>
</html>
Források:
http://www.w3.org/TR/html5/the-canvas-element.html
http://falcon80.com/Index.html
Animáció, HTML5 Canvas Animation a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.
Permissions beyond the scope of this license may be available at http://html5.ugyesen.com.
