Dinamikus favicon - animálni a vászon és a javascript favicon, cső web-blog ziscod
Először is, néhány hasznos „víz” a favicon
Általában, ha megérinti a témát a ikon. ez nem olyan egyszerű, mert ez a kis ikon néha elfelejti a webhely, és ez egy nagyon fontos része az online branding és ad egy vizuális jel, hogy a felhasználó, segít megkülönböztetni a webhely másoktól. Mindenesetre, annak ellenére, hogy a legtöbb ikonok statikus (mivel az internet rengeteg kész favicon favicon + tehet online segítségével az online favicon generátor), még mindig lehet „feléleszteni”, és a hangsúly az elme ext. látogató.
Természetesen folyamatosan mozog favicon irritálhatja a felhasználók többsége, és további terhelést, ha az oldal betöltődik, és így nem jár a felhasználó, hanem az, hogy álljon neki, távol a webhelyen. Azonban, ha fut az animáció egy rövid ideig, például válaszul egy felhasználó vagy háttér esetén (az oldalak betöltési / AJAX végrehajtás), akkor további vizuális érdeklődés a webhelyen.
Animált favicon 7 lépésben
Az alábbiakban megpróbáltam leírni a 7 egyszerű lépésben, ami után lehet kapni kész animált ikont, amely kiválthatja egy gomb megnyomásával.
1. Hozzon létre egy vászon keresztül
Kezdjük azzal, hogy létre kell hoznunk egy vászon animáció. amely levonja a teljes kört, a 100% (növeli az ív számunkra nagyon fontos, hogy a kód szükséges). Ezért a következőket kell beilleszteni a jelölést:
Mint látható, továbbá a nullázás a változó s is lesz valamilyen mágikus 🙂 De itt, minden egyszerű, mert ez a változó egyszerűen képlettel számítjuk ki, ahogy kellene viselkednie / munka szög a körív, hogy felhívja egy teljes kört. Az alábbiakban megpróbálom elmagyarázni, hogy mit és hol venni.
Szöget zár (által bezárt szög két sugár előre meghatározott íven) a kör kerülete egyenlő 2π rad. ahol rad - radián jelentése - kijelölés szögmértékegység. Ezután a szög megfelelő ívhossz volt 1/4 kör. az 0.5π rad.
Azaz az eredmény a megjelenítés „letöltés” favicon Természetesen szeretnénk, hogy körbe a vásznon készült nem attól a ponttól, hazudik a középponttól jobbra a tervezett kör és a legmagasabb pontját.
Ha elkezd rajz egy kör az óramutató járásával megegyező (irány, az alapértelmezett megjelenítési köriratban a vászon) egy pont hazudik a jobb oldalon, az ív eléri a tetején pont háromnegyedét meg, vagyis szögben egyenlő 1.5π rad. Ezért szükséges bevezetni a változó s = 1,5 * Math.PI, hogy a kezdeti szög, ahol elkezdjük rajzolni egy ívnek a vásznon.
4. Styling tartomány
Most, hogy felhívja a teljes körű minimálisan szükséges stílust a megjelenését. Ehhez meghatározza csíkszélesség és strokeStyle tulajdonságok között:
clearRect () függvény törli a téglalap alakú területet a vászon meghatározott paraméterek: (x, y) - koordinátáit a bal felső sarokban. clearRect string (0, 0, 16, 16) teljesen megtisztítja a létrehozott érintkező területe 16 x 16 pixel.
A beginPath () függvény létrehoz egy új utat a rajzot, és a stroke () függvény indul rajz körök az újonnan létrehozott áramkör. Miután updateLoader () függvény érdeklődést számláló [PCT] növekménnyel 1 százalék, és mielőtt a következő növekménye a program lesz szükség annak ellenőrzésére, hogy a számláló nem egyenlő 100. Ha a számláló értéke 100 százalék, akkor az időzítő értéke setInterval ( ) (meghatározott időzítő által id, TC) alaphelyzetbe keresztül clearInterval () függvény.
És még?
Az első három paraméter funkció ív () - a középpontjának koordinátáit az ív (x, y) és annak sugara. A negyedik és ötödik paraméterek a kezdeti és a végső szög, mely az ív kezdődik és végződik rendering.
Már azonosították a kiindulási pont a rajz egy kör favicon-a, amely a szög s. Ugyanez a pont lesz kezdő egyáltalán ismétléseket. Azonban a végső szög növeli a százalékos értékek a számlálót. Mi lehet számítani a lépés nagysága lépésekben a következő. Például, az 1% -os lépésekben (100-ból 1 százalék) egy bizonyos szögben α a szög 2π (ahol 2π - az a szög, a teljes kerülete mentén). Így mi is létrehozhatunk a következő kifejezést: