HTML5 animációs eszközök

előző ◈ a következő

Minden animációs egy sor egyszerű kereteket. Ahhoz, hogy megjelenjen egy keretet a vásznon van szükség:

  1. Tiszta vászon. Ezt meg lehet tenni, például keresztül clearRect () módszer.
  2. Ha szeretné, hogy az eredeti állapot a vászon mindig megmarad, akkor is, ha színbeállítások módosításához, stb meg kell menteni az állam a vásznon.
  3. Döntetlen animációk, sőt, ez a lépés a létrehozása a keret.
  4. Ha már mentettünk sotsoyanie vászon, le kell töltenie, mielőtt elkezdi komponálni egy új keretet.

motion animáció

Vegyünk egy példát. Hozzunk létre egy egyszerű animációt a mozgás - a mozgó téglalap vízszintesen. Animáció létrehoz () függvényt. amelyek aztán nevezte magát létrehoz egy téglalap keret mozgását.







Ennek része a animáció () függvény végrehajtja a következő lépéseket:

  1. Tisztító vásznon.
  2. Rajz egy fekete négyzet.
  3. Megváltoztatása a koordinátákat a bal felső sarkában a tér - vízszintesen, hogy „offset” a téren a következő lépés.
  4. Ha a négyzet eléri a szélét a vászon, a kezdeti érték a koordináta x nullázódik.
  5. A rekurzív animáció (). által setTimeout módszer.






CreateImage létrehoz () függvény az ezt igazoló animáció:

Animáció tisztítás nélkül a képernyőn

Tekintsük egy másik példát. Ebben az esetben nem tiszta a kijelzőn minden alkalommal, amikor a rajz egy új keret, így kiderül, hogy a kép fokozatosan „húzott”. Különösen jól használható, hogy egy üzlet vagy statisztikai grafikonok, például építünk két funkciója van.

Készítsen egy függvényt, akkor simán húzott két grafikont valós időben.

Az eredmények az alábbiakban láthatók:

sprite animáció

Hogy az összetett animációk, valamint a játékok és egyéb HTML5-alapú webes alkalmazások, akkor sozdavt animáció segítségével sprite. Sprite - ez a képfájlt, amely tartalmaz egy sor olyan köztes képkockák. Ez az egyik kép illik a teljes storyboard animáció vagy tárgy államokban.

Elem . amint azt már kifejtettem, az előző cikkben támogatja a külső kép, amely lehet illeszteni a vásznon. Így lehetőség van arra, hogy helyezzen be egy sprite kép és záró felesleges részt, hogy hozzon létre az illúziót egy folyamatos animáció.

Forrásként animáció fogja használni a következő sprite:

A keret megjelenítéséhez a sprite fogja használni az összefüggésben módszer

Hozzon létre egy funkció a „megújulás” a sprite:

Ez csak egy kis bemutató HTML5 Canvas jellemzői. Ez a technológia széles körben alkalmazható: a létrehozása üzleti grafikák a teljes méretű és böngésző alapú játék.




Kapcsolódó cikkek

előző ◈ a következő