Egyszerű animációk - web interfészek api, mdn
Valószínűleg a legnagyobb korlátozás az, hogy amikor egy számot rajzolunk, akkor már nem lehet mozgatni. A mozgás ábrázolásához újra kell rajzolnunk az alakot és mindazt, ami előtte készült. A bonyolult keretek átrajzolása sok időt vesz igénybe, és a teljesítmény nagyban függ a számítógép sebességétől, amelyen fut.
A következő lépések a keret rajzolásához szükségesek:
- Tiszta vászon
Ha a rajzolandó szám nem foglalja el az egész vásznat (mint pl. A háttér), akkor minden, amit előzetesen rajzolt, törölni kell. A legegyszerűbb mód a clearRect () módszerrel. - Mentse a vászon kezdeti állapotát
Ha módosítja a vászon állapotát befolyásoló beállításokat (pl. Stílusok, átalakítások stb.), És meg kívánja győződni arról, hogy az eredeti állapotot minden alkalommal használja, amikor a keret húzódott, tartsa meg ezt az eredeti állapotot. - Rajzolj animált alakzatokat
Lépés, amelyre ténylegesen rajzoljon egy keretet. - Visszaszerez vászonállapotot
Ha elmentette az állapotot, akkor helyezze vissza, mielőtt rajzot rajzolna.
Animáció kezelése
Az ábrákat vásznon rajzolják közvetlenül - vászon módszerekkel vagy harmadik féltől származó funkciók segítségével. Normál esetben az eredmény a szkript befejezése után látható lesz a vászonon. Például a for hurok nem használható animációhoz.
Ez azt jelenti, hogy módot kell biztosítani a renderelési funkciók időközönként történő elvégzésére. Kétféleképpen kezelheti ezt az animációt.
Ütemezett frissítések
Az első az window.setInterval () függvény. window.setTimeout (). és window.requestAnimationFrame (). amely egy meghatározott időtartam elteltével egy funkció hívására használható.
setInterval (funkció, késleltetés) Rendszeresen elindul a függvényfunkció végrehajtásához minden késleltetés milliszekundumban. setTimeout (függvény, késleltetés) Végrehajtja a függvény függvényét a késleltetés milliszekundumában. requestAnimationFrame (visszahívás) A böngésző megmondja, hogy animációt szeretne végrehajtani, és kéri, hogy a böngésző egy meghatározott funkciót hívjon fel az animáció frissítéséhez a következő rímelés előtt.
Ha nem kíván felhasználói interakciót, akkor a setInterval () függvényt használhatja, amely ismételten végrehajtja a mellékelt kódot. Ha játszani akarunk, használhatnánk billentyűzet vagy egér eseményeket az animáció vezérléséhez és a setTimeout () használatához. Az EventListener s beállításával bármilyen felhasználói interakciót el fogunk érni, és végrehajtjuk animációs funkcióinkat.
Animált naprendszer
Ez a példa a naprendszerünk egy kis modelljét animálja.