Pentru a începe o apă puțin utilă despre Fawicon
În general, dacă atingi subiectul cu Favicons. nu este atât de simplu, din cauza acestui mic icon, uneori, uita pe site-ul dvs., și este o parte foarte importantă a branding online si ofera un indiciu vizual pentru utilizator, ajutând pentru a distinge site-ul dvs. de la alții. În orice caz, în ciuda faptului că cele mai multe dintre pictogramele sunt statice (de la Internet un număr foarte mare de gata favicon favicon + poate face on-line de a utiliza orice generator favicon on-line), ei încă mai pot „revigora“ și să se concentreze ext minte. vizitatorul.
Desigur, un favicon în mișcare continuă poate deranja majoritatea utilizatorilor și poate crea o încărcătură suplimentară atunci când pagina se încarcă și astfel nu atrage utilizatorul, ci mai degrabă îl împinge de pe site-ul dvs. Cu toate acestea, dacă executați animația pentru o perioadă scurtă de timp, de exemplu, ca răspuns la o acțiune a utilizatorului sau la un eveniment de fundal (încărcare pagină / executare AJAX), aceasta poate oferi reclamă vizuală suplimentară site-ului dvs.
Favicon animat pentru 7 pași
Mai jos, am încercat să descriu 7 pași simpli, după care puteți obține o pictogramă animată, care va funcționa după ce faceți clic pe buton.
1. Creați o panza prin
În primul rând, trebuie să creați o animație de pânză. care va trage un cerc complet la 100% (pentru noi va fi foarte important codul va trebui să mărească arcul). Prin urmare, introducem următorul marcaj:
După cum puteți vedea, în plus față de reducerea la zero cu variabile s, de asemenea, merge ceva magie 🙂 Dar aici, totul este simplu, deoarece această variabilă este pur și simplu calculat prin formula cum ar trebui să se comporte / unghiul de lucru al arcului care atrage un cerc complet. Mai jos voi încerca să explic ce și unde provine.
Unghiul de contractare (unghiul format de cele două fascicule care definesc arcul) circumferinței cercului este egal cu 2π rad. unde rad este radianul - unitatea pentru măsurarea unghiurilor. Apoi, unghiul corespunzător arcului este de 1/4 din circumferință. este egal cu 0,5π rad.
De exemplu, prin vizualizarea progresului "încărcării" unui favicon, ne-ar plăcea ca cercul din panza să fie tras nu din punctul situat în partea dreaptă a centrului cercului presupus, ci din punctul superior.
Dacă începe să desenați un cerc sensul acelor de ceasornic (direcția, implicit pentru redarea unui arc în pânză) printr-un punct care se află la dreapta, arcul ajunge la punctul de sus a trei sferturi din circumferința, adică la un unghi egal cu 1.5π rad. Prin urmare, este necesar să se introducă variabila s = 1.5 * Math.PI pentru a indica unghiul inițial de la care începe să atragă un arc în panza.
4. Styling cercul
Acum, pentru a desena întregul cerc, trebuie să minimalizați aspectul acestuia. Pentru aceasta, definiți proprietățile lineWidth și strokeStyle ale cercului:
Funcția clearRect () șterge zona dreptunghiulară a pânzei specificată de parametrii: (x, y) - coordonatele colțului din stânga sus. Șirul clearRect (0, 0, 16, 16) elimină complet zona pe care am creat-o cu o dimensiune de 16 x 16 pixeli.
funcția beginPath () creează o nouă cale pentru desen, și funcția de accident vascular cerebral () începe cercuri de desen pe circuitul nou creat. După updateLoader () funcție utilizează contra interes [pct] cu creșteri de 1 la sută, iar înainte de următoarea incrementul a programului va fi necesar să se verifice dacă contorul nu este egal cu 100. Dacă valoarea contorului este de 100 la sută, atunci valoarea timer setInterval ( ) (definit de parametrul timer id, tc) este resetat folosind funcția clearInterval ().
Și mai mult?
Primii trei parametri ai funcției arc () sunt coordonatele centrului arcului (x, y) și raza sa. Al patrulea și al cincilea parametru reprezintă unghiurile inițiale și finale la care arcul începe și se termină.
Am desemnat deja punctul inițial de tragere a cercului favicon-a, care este unghiul s. Același punct va fi punctul inițial la toate iterațiile. Cu toate acestea, unghiul de capăt va crește cu creșterea numărătorului procentual. Putem calcula mărimea pasului incrementării după cum urmează. De exemplu, un pas de incrementare de 1% (1% din 100) este un anumit unghi α din unghiul 2π (unde 2π este unghiul întregului cerc). Astfel, putem scrie următoarea expresie:
Trimiteți-le prietenilor: