‘animation’ címkét tartalmazó cikkek
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: Tovább olvasom »