Како креирати анимирани Фавицон Лоадер са ЈаваСцрипт-ом

Фавицонс су кључни део онлине брендирања, они дати визуелни знак корисницима и помоћи им разликујете ваш сајт од других. Иако је већина фавикона статична, могуће је креирајте анимиране фавиконе такође.

Стално покретни фавикон је свакако неугодан за већину корисника, а штети и приступачности, али када је анимиран само кратко време као одговор на акцију корисника или позадински догађај, као што је учитавање странице, може пружити додатне визуелне информације-стога побољшава корисничко искуство.

У овом посту, показаћу вам како да направите анимирани кружни утоваривач у ХТМЛ платну, и како га можете користити као фавикон. Ан аниматед фавицон лоадер је одличан алат визуелизовати напредак било које акције на страници, као што је отпремање датотека или обрада слике. Можете погледати демо који припада овом упутству на Гитхуб такође.

1. Креирајте елемент

Прво, морамо направите анимацију на платну то црта пуни круг, укупно 100 посто (ово ће бити важно када морамо повећати лук).

 Лоад  

Користим стандардну величину фавикона, 16 * 16 пиксела, за платно. Можете користити величину већу од оне ако желите, али имајте на уму да ће слика на платну бити до 16² пикел ареа када се примењује као фавицон.

2. Проверите да ли је је подржан

Унутар на оптерећење() догађај, ми добити референцу за елемент платна [Си-Ви] помоћу куериСелецтор () и упутите се његов 2Д објект за цртање контекста [цтк] уз помоћ гетЦонтект () метода.

 онлоад = фунцтион () цв = доцумент.куериСелецтор ('# цвл'), цтк = цв.гетЦонтект ('2д'); иф (! цтк) / *… * /; 

Такође морамо да проверимо ако је платно подржано од стране УА тако што ћете се уверити да објекат контекста за цртање [цтк] постоји и није дефинисано. Ставићемо сав код који припада догађају учитавања у ово ако стање.

3. Креирајте почетне варијабле

Хајде да створимо још три глобалне варијабле, с за почетни угао лука, тц за ид за сетИнтервал () тимер, и пцт за процентуална вредност истог тајмера. Код тц = пцт = 0 додељује 0 као Почетна вредност за тц и пцт Променљиве.

 онлоад = фунцтион () цв = доцумент.куериСелецтор ('# цвл'), цтк = цв.гетЦонтект ('2д'); иф (! цтк) с = 1.5 * Матх.ПИ, тц = пцт = 0; ; 

Да покажем како је вредност с израчунао сам, да вам објасним како арц англес рад.

Арц англес

Тхе субтендед англе (угао састављен од два зрака који дефинишу лук) обима круга је 2π рад, где рад је симбол радијанске јединице. Ово чини угао за четвртину лука једнако 0.5π рад.

Када визуализацију напретка у учитавању, желимо да се нацрта круг на платну са горње позиције уместо подразумеваног права.

Идемо у смеру казаљке на сату (подразумевани лук правца је нацртан на платну) са правог положаја, горња тачка је након три четвртине, тј. под углом 1.5π рад. Зато сам креирао варијаблу с = 1.5 * Матх.ПИ то латер означава почетни угао за лукове извући на платну.

4. Направите круг

За објекат контекста цртања дефинишемо Ширина линије и строкеСтиле својства круга нацртаћемо у следећем кораку. Тхе строкеСтиле власништво је његова боја.

 онлоад = фунцтион () цв = доцумент.куериСелецтор ('# цвл'), цтк = цв.гетЦонтект ('2д'); иф (! цтк) с = 1.5 * Матх.ПИ, тц = пцт = 0; цтк.линеВидтх = 2; цтк.строкеСтиле = 'фуцхсиа'; ; 

5. Нацртајте круг

Ми додајте алатку за праћење догађаја на дугме за учитавање [#лбтн] која активира сетИнтервал тајмер од 60 милисекунди, која извршава функцију одговорну за цртање круга [упдатеЛоадер ()] сваких 60мс док се круг не повуче.

Тхе сетИнтервал () метода враћа ид бројача да идентификује тајмер који је додељен тц променљива.

 онлоад = фунцтион () цв = доцумент.куериСелецтор ('# цвл'), цтк = цв.гетЦонтект ('2д'); иф (! цтк) с = 1.5 * Мат.ПИ, тц = пцт = 0, бтн = доцумент.куериСелецтор ('# лбтн'); цтк.линеВидтх = 2; цтк.строкеСтиле = 'фуцхсиа'; бтн.аддЕвентЛистенер ('клик', функција () тц = сетИнтервал (упдатеЛоадер, 60);); ; 

6. Креирајте упдатеЛоадер () цустом фунцтион

Време је да креирамо обичај упдатеЛоадер () функција која ће бити зове сетИнтервал () метода када се кликне на дугме (догађај се активира). Дозволите ми да вам прво покажем код, онда можемо да се сложимо са објашњењем.

 фунцтион упдатеЛоадер () цтк.цлеарРецт (0, 0, 16, 16); цтк.бегинПатх (); цтк.арц (8, 8, 6, с, (пцт * 2 * Матх.ПИ / 100 + с)); цтк.строке (); иф (пцт === 100) цлеарИнтервал (тц); ретурн;  пцт ++;  

Тхе цлеарРецт () метода брише правоугаону површину платна дефинисани његовим параметрима: (к, и) координате горњег левог угла. Тхе цлеарРецт (0, 0, 16, 16) лине брише све у платну од 16 * 16 пиксела које смо направили.

Тхе бегинПатх () метода ствара нови пут за цртање, и удар() метода боје на новонасталој стази.

На крају упдатеЛоадер () функција цоунт цоунт [пцт] се повећава за 1, и пре коришћења ми проверите да ли је 100. Када је 100%, сетИнтервал () тимер (идентификовано бројем тајмера, тц) се брише уз помоћ цлеарИнтервал () метода.

Прва три параметра арц () метода су (к, и) координате средишта лука и његов радијус. Четврти и пети параметри представљају почетни и крајњи углови код којих цртање лука почиње и завршава.

Већ смо одредили полазну тачку круга утоваривача, који је под углом с, и то ће бити исто у свим итерацијама.

Међутим, крајњи угао ће бити повећати са постотком рачунања, можемо израчунати величина инкремента на следећи начин. Рецимо 1% (вредност 1 од 100) је еквивалент угао α од 2π у круг (2π = угао целог обима), онда се исто може записати као следећа једначина:

1/100 = α/ 2π

О преуређивању једначине:

 α = 1 * 2π / 100 α = 2π/ 100 

Дакле, 1% је еквивалентно куту 2π/ 100 у кругу. Дакле, крајњи угао током сваког постотног прираста је израчунава се множењем 2π/ 100 по процентуалној вредности. Онда је резултат додат с (почетни угао), тако су лукови из исте почетне позиције сваки пут. Зато смо користили пцт * 2 * Матх.ПИ / 100 + с формула за израчунавање крајњег угла у горњем исечку кода.

7. Додајте икону фавикона

Ставимо а фавицон линк елемент у ХТМЛ или директно или преко ЈаваСцрипт-а.

Ин тхе упдатеЛоадер () функција, прво ми дохватите фавицон помоћу куериСелецтор () метод, и доделите га лнк променљива. Онда морамо извоз слике на платну сваки пут када се повуче лук у кодирану слику помоћу тоДатаУРЛ () метода, и додели УРИ садржај података као слику фавикона. Ово ствара анимирани фавицон који је исто као и платно.

 онлоад = фунцтион () цв = доцумент.куериСелецтор ('# цвл'), цтк = цв.гетЦонтект ('2д'); иф (! цтк) с = 1.5 * Матх.ПИ, тц = пцт = 0, бтн = доцумент.куериСелецтор ('# лбтн'), лнк = доцумент.куериСелецтор ('линк [рел = "ицон"]') ; цтк.линеВидтх = 2; цтк.строкеСтиле = 'фуцхсиа'; бтн.аддЕвентЛистенер ('клик', функција () тц = сетИнтервал (упдатеЛоадер, 60);); ; фунцтион упдатеЛоадер () цтк.цлеарРецт (0, 0, 16, 16); цтк.бегинПатх (); цтк.арц (8, 8, 6, с, (пцт * 2 * Матх.ПИ / 100 + с)); цтк.строке (); лнк.хреф = цв.тоДатаУРЛ ('имаге / пнг'); иф (пцт === 100) цлеарТимеоут (тц); ретурн;  пцт ++;  

Можете погледати цијели код он Гитхуб.

Бонус: Користите пуњач за асинц догађаје

Када требате користити ову анимацију на платну у спрези са акцијом пуњења на веб страници, доделите упдатеЛоадер () функције као руковалац догађаја напредак () догађај акције.

На пример, наш ЈаваСцрипт ће се променити овако ин АЈАКС:

 онлоад = фунцтион () цв = доцумент.куериСелецтор ('# цвл'), цтк = цв.гетЦонтект ('2д'); иф (! цтк) с = 1.5 * Матх.ПИ, лнк = доцумент.куериСелецтор ('линк [рел = "икона"]'); цтк.линеВидтх = 2; цтк.строкеСтиле = 'фуцхсиа';  вар кхр = нев КСМЛХттпРекуест (); кхр.аддЕвентЛистенер ('прогресс', упдатеЛоадер); кхр.опен ('ГЕТ', 'хттпс://киз.цом/абц'); кхр.сенд (); ; фунцтион упдатеЛоадер (евт) цтк.цлеарРецт (0, 0, 16, 16); цтк.бегинПатх (); цтк.арц (8, 8, 6, с, (евт.лоадед * 2 * Матх.ПИ / евт.тотал + с)); цтк.строке (); лнк.хреф = цв.тоДатаУРЛ ('имаге / пнг');  

Ин тхе арц () методом, заменити процентуалну вредностпцт] са учита имовине догађаја-он означава колико је фајла учитано, и уместо 100 користити тотал имовине ПрогрессЕвента, која означава укупан износ који се учитава.

Ево га но неед фор сетИнтервал () у таквим случајевима, као напредак () догађај је аутоматски пуцано како се учитава напредује.