Animáció, webreference
Animáció keresztül requestAnimationFrame
De a valóságban soha nem kell használni setInterval. setInterval mindig felhívni azonos sebességgel, nem számít, hogy milyen számítógép-felhasználó, így a felhasználó, és hogy az aktuális oldal aktív. Röviden, hogy működik, de nem hatékonyan. Ehelyett azt kell használni az új API requestAnimationFrame.
requestAnimationFrame jött létre, hogy az animáció zavartalan és hatékony a költségek szempontjából. Akkor ez egy mutató egy rajz funkciót. Egy bizonyos ponton a jövőben a böngésző fogja hívni a rajz funkció, a böngésző lesz kész. Ez adja a böngésző teljes ellenőrzése alatt a rajzot, úgy, hogy képes csökkenteni a frame rate, ha szükséges. A böngésző is, hogy animációkat simább, rögzítés a képernyő frissítési sebessége 60 képkocka másodpercenként. Hurok animációt csak hívja requestAnimationFrame rekurzívan az elején.
requestAnimationFrame válik szabvány, de a legtöbb böngésző csak támogatni a saját előtaggal változatok. Például, a Chrome az webkitRequestAnimationFrame. és támogatja a Mozilla mozRequestAnimationFrame. Ennek kijavításához fogjuk használni a forgatókönyvet Paul Irisha. Egyszerűen csatlakozik különböző változatai az új funkciók: requestAnimFrame.
Próbáljunk egy egyszerű példát, amelyben animálni egy téglalapot a képernyőn.
Alap animáció téglalap requestAnimFrame (kattintva elindul)
háttér razzia
Most már láthatja a problémát. A téglalap mozog az egész képernyőt, frissített öt pixel minden 100 milliszekundum (vagy 10 képkocka per másodperc.), De a régi téglalap marad. És úgy néz ki, mint a téglalap csak egyre hosszabb és hosszabb. Ne feledje, hogy a vásznon csak egy csomó pixel. Ha telepíti több pixel, akkor marad ott, amíg nem történt változás. Tehát tisztázzuk a vászonra minden egyes képkocka, mielőtt rajzoljon egy négyszöget.
Rajz a háttér téglalap tisztítás (kattintva elindul)
szimulátor részecskéket
Ez minden, amire szüksége animálni. Döntetlen valami újra és újra. Próbáljunk egy kicsit bonyolultabb: a részecske szimulátor. Azt szeretnénk, hogy néhány, a részecskék esik le a képernyőn, mint a hó. Ennek érdekében hajtják végre a klasszikus algoritmus szimuláció részecskék:
Simulator részecskék felsorolja hurok részecskéket. Az egyes keret, a helyzet az összes részecske frissül alapján egy bizonyos egyenlet, a részecskék megsemmisülnek / alapulnak bizonyos feltételek, ha szükséges. A részecskéket ezután levonni. Itt egy egyszerű példa a hó.
Eleinte létre az alapítvány szimulátor részecskéket. Ez a ciklus a funkció, hogy az úgynevezett minden 30 ms. Az adatok szerkezetek, szükségünk van egy üres tömböt, a részecskék és ellenintézkedések. Mindegyik ismétlésnél a hurok végezzük négy darab.
CreateParticles funkció ellenőrzi, hogy mennyire részecskéket. Ha kevesebb, mint 100, akkor létrehoz egy új részecske. Felhívjuk figyelmét, hogy az ellenőrzés végrehajtására csak egyszer minden 10 ciklus. Ez lehetővé teszi, hogy kezdeni egy üres képernyőt, majd fokozatosan növeli a részecskék száma létrehozása helyett 100 az elejétől. Akkor a beállításokat attól függően, hogy a kívánt hatást. Én a Math.random () és más aritmetikai, hogy megbizonyosodjon arról, hogy a hópelyhek található különböző helyeken, és nem ugyanúgy néz ki. Tehát a hó lesz a természetes.
updateParticles funkció nagyon egyszerű. Ez frissíti a koordináta minden egyes részecske, hozzátéve, hogy a sebessége. Lehetővé teszi, hogy hópehely megmozdulás a képernyőn.
Itt killParticles. Ez ellenőrzi, hogy a részecske az alsó szélén a vásznon. Egyes szimulátorok megsemmisíti a részecskéket, és eltávolítja a listából. Mivel ez az alkalmazás mutatja a folyamatos hó, újra telepíteni a részecske, amelyben vissza 0-ra.
Végül felhívja a részecskéket. Ismét, ez nagyon egyszerű: tiszta háttér, rajzoljon egy kört a koordináták, sugár és színe a részecskéket.
Most úgy néz ki, mint ez.
Szimulátor a hó részecskék (kattintva elindul)
Ez az, amit szeretek szimulátorok részecskék, így ez a tény, hogy hozhat létre nagyon összetett és szerves, természetes megjelenésű animáció meglehetősen egyszerű matematika, kombinálva egy kis ellenőrzött baleset.
sprite animáció
Mi az a sprite?
Az utolsó fő típusa animáció egy sprite animáció. Tehát mi is sprite?
Sprite - egy kis kép, hogy gyorsan tudja rajzolni a képernyőre. Jellemzően Sprite ténylegesen kivágott egy nagy képet, úgynevezett sprite lista vagy master képet. Ez a lista tartalmazhat számos különböző sprite, mint a különböző karakterek a játékban. Sprite lista tartalmazhat továbbá egy karakter a különböző pozíciókban. Ennek eredményeként, ez ad a különböző kerete animáció. Ez egy klasszikus stílusú animáció: csak flip keresztül különböző képek újra és újra.
Miért és mikor kell használni sprite?
Sprite jó néhány dolgot.
- Először is, a sprite egy olyan kép, talán felhívja a gyorsabb, mint vektorok, különösen összetett.
- Másodszor, a sprite rendkívül kényelmes, ha kell felhívni egy dolog újra és újra. Például a játék Space Invaders van egy csomó golyót a képernyőn, amely minden ugyanúgy néz ki. Sokkal gyorsabb letöltési sprite golyó egyszer felhívni, hogy újra és újra.
- Harmadszor: a sprite gyorsan töltődnek dolgozzák részeként a lap. Ez lehetővé teszi, hogy feltölt egy fájlt a teljes készlet sprite sokkal gyorsabb, mint egy csomó különálló képet kapunk. Sprite általában is tömöríteni jobb. Végül, kevesebb memória egy nagy kép, mint egy rakás kisebb.
- A végén, a sprite könnyű dolgozni animációs mert ezek nyert rajzeszközök, mint a Photoshop. A kód csak lapozgatta a képeket, és nem érdekel, hogy mi a kép. Ez azt jelenti, hogy az előadó egyszerűen frissítheti a grafika és animációk, hogy ne érjen a kódot.
rajz sprite
Sprite könnyű festeni, függvény segítségével drawImage. Ez a funkció levonhatjuk, és nyújtsd a részét a kép megadni egy másik forrás és a cél koordinátákat. Tegyük fel például, mi a következő sprite listán, és mi csak szeretnénk felhívni a Sprite ötödik maradt.
Csak akkor tudjuk felhívni a Sprite, a koordináták megadásával a forráskód:
sprite animáció
Mint látható, a teljes Sprite lapot, sőt ezek különböző keretek az animáció egy tárgy, úgyhogy most lapozhat a különböző sprite létrehozásához animáció. Tesszük ezt úgy, hogy követjük az aktuális keret segítségével ellenintézkedések.
Minden alkalommal, amikor frissíti a képernyőt kiszámítjuk az aktuális képkocka az animáció nézi a ellenintézkedéseket. Működés modulo (%) 10 olyan hurkot keret 0-9 újra. Ezután az x-koordináta számítják függően a keretek száma. Ezt követően, a kép készült és frissített ellenintézkedéseket. Persze, ez lehet túl gyors, így megoszthatja ciklusok modulo 2 vagy 3, az animációt lassan fut.
Animáció minden 10 képkocka részletekre (kattintva elindul)
A következő fejezetben fogunk létrehozni egy egyszerű játék, amely bemutatja, hogyan kell használni az alapvető animáció, sprite animáció, billentyűzet események és egyszerű részecske szimulátor robbanások.