Egy egyszerű animációt javascript, javascript animáció
Miért én az animáció tiszta js
Lehet, hogy elborzadt. Valójában rengeteg könyvtárak. például a kedvenc jQuery. Lehet, hogy így, de tiszta animáció Hasznos lehet ide írni, milyen helyzetekben.
- Ez egy kis hely minimális hatást. Harmadik fél könyvtárak nem csatlakozik. És hirtelen szükség van, hogy egy fokozatos oldódása az elem, ha rákattint. Megéri egy ilyen csekélység csatlakozni jQuery. Sok lesz kötve, és valójában teszi a megfelelő - a mai világban 98Kb nem számít. Azonban, ha dolgozik a csapat vannak ilyen kemény orrú csapat vezetője, amely nem teszi lehetővé a kis animációk ágyazott harmadik fél könyvtári projekt. Tehát meg kell érteni az animáció is.
- Használja kész könyvtár, és ez nem a kívánt hatást. Például meg kell, hogy az elem, majd eltűnt, megfordult háromszor az óramutató járásával megegyező irányba, ugrott, majd eltűnt. Ebben az esetben a könyvtár bővül. és ismét szüksége van egy alapvető ismereteket a szervezet animációs hatásokat.
Ezért, a megértés, hogyan kell megszervezni animációs elemeket, plusz nyilván nem. Ebben a cikkben tartjuk az alapvető technikákat, és a legegyszerűbb példa - levelet funkció, amely képes tökéletesen elrejti a DOM-elem, amely csökkenti annak az átláthatóságot.
Mi lesz a két fájlt: index.html és script.js. HTML-dokumentum nagyon egyszerű:
Tettük div 300h200 pixel, megtöltötte színes, adott egy kis külső párnázattal és rendelt id = elem. Semmi többet most nem kell.
Most szervezze js. Kezdjük div kapaszkodni Mindenesetre:
Ezután document.getElementById megkapjuk div id = elemet, és állítsa be az onclick esemény, amely kerül sor bekövetkeztével a riasztási kijelző teszt. Tény, hogy ahelyett, hogy a figyelmeztető jelzés tegyünk ide később kihívást elhalványulnak funkciók most elkezdik vizsgálni.
Szóval, mi kell animálni? Próbáld azonnal mérlegeli egy ilyen funkció felület, amely a jövőben teszik igazán egyszerű! Kap valami ilyesmi:
Valójában minden animáció egy olyan elem, amelyre készül, és az idő, amely alatt azt látjuk, sima változásokat. De milyen másodpercenként?
Tehát, ez a függvény egy második paramétert ezredmásodperc, ami után meg kellett ismételni annak végrehajtását. Kiderült, hogy ha írunk:
= Fogjuk látni egy figyelmeztető minden 20 ms. És ha írunk
A másodpercenként nagyon könnyen kapcsolódnak. Egy másik ezer milliszekundum, ezért ha meg akarjuk mutatni a személy, 50 képkocka másodpercenként, 1000-1050 = 20ms - minden 20 milliszekundum, van, hogy ismételje meg a műveletet az intervallumot.
A fentiek alapján, már most levonhatunk alap gerincét a jellemzők:
Konstrukciók var fps = f || 50 var idő = t || 500 nyilvánítja az alapértelmezett beállításokat. Azaz, ha a hívás nem fogjuk adni a funkció a második és a harmadik elem, értékeiket egyenlő lesz 50 és 500.
A nagyon szervezet setInterval kivitelben is logikus. Mi az intervallumot a frekvencia 1000 / fps. Miután az animáció befejeződött, ezt az intervallumot, el kell távolítani.
Ügyeljen arra, hogy „nincs” vonal elem.style.display =. Ez a jelzés az szükséges, hogy a nullázás után a homály elem, ő elhagyta a helyet. Ha nem, akkor az elem nem lesz látható, de az ő helye üres marad - az alsó elemek nem mozog ott.
Mert szinte mindent! Továbbra is hozzá csak egy változás a látható tulajdonságok és ellenőrizze befejezése az animációt.
Zanesom ez mind a kódot:
A fő vezérlő szerepét a változó lépéseket, melyben információkat tárolni, hogy sokkal több marad mutatni kereteket. Amikor lépéseket eléri a nullát, az animáció befejeződött.
Mindent. Továbbra is csak a helyes paramétereket adnak át a függvényt:
Az egyetlen finomság - ez - ez annak a jele, az aktuális elem, amelyben kattintottak.