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.
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.