Първо, някои полезни "вода" на уеб иконата
По принцип, ако те докосна темата с икона на сайта. това не е толкова просто, защото на тази малка икона понякога забравя в сайта си, и това е много важна част от онлайн брандинг и дава визуални ориентири, които потребителят, което помага да се прави разлика вашия сайт от други. Във всеки случай, независимо от факта, че по-голямата част от иконите са статични (от Интернет огромен брой готови уеб икона икона на сайта + може да направи онлайн, за да се използва всеки онлайн генератор икона на сайта), те все още могат да "съживи" и да се съсредоточи вътр на ум. посетител.
Разбира се, постоянно се движат икона на сайта може да раздразни по-голямата част от потребителите и да се създаде допълнително натоварване при зареждането на страницата, и по този начин не е свързано с потребителя, а по-скоро, за да го отблъсне от сайта си. Все пак, ако ви свършат анимацията за кратко време, например в отговор на действие от потребителя, или фон събитие (за зареждане на страницата / AJAX изпълнение), тя може да предостави допълнителна визуална интерес към вашия сайт.
Анимирани уеб икона в 7 стъпки
По-долу, аз се опитах да опиша 7-те прости стъпки, след което можете да получите готов анимирана икона, която ще се задейства с натискане на един бутон.
1. Създайте платно чрез
Да започнем с това, ние трябва да се създаде платно анимация. което ще се направи пълен кръг при 100% (ще се увеличи на дъгата за нас е много важно да се кодът е необходимо). Ето защо, въведете следния маркиране:
Както можете да видите в допълнение към зануляване с променливите те също ще някаква магия 🙂 Но тук, всичко е просто, защото тази променлива просто се изчислява по формулата, както трябва да се държи / работа ъгъл на дъгата, която прави пълен кръг. По-долу ще се опитам да обясня какво и къде взети.
Формира ъгъл (ъгъл, образуван от две лъчи предварително определена дъга) обиколката на кръга е равен на 2π рад. където рад - радиани е - наименование ъгъл единици. След това, ъгълът, съответстваща на дължината на дъгата е 1/4 кръг. е 0.5π рад.
Т.е. от резултата на "мишката" на визуализация уеб икона Разбира се, ние бихме искали да обикаля върху платното не е съставен от точката на лежащ в дясно от центъра на предложената кръга и от най-високата си точка.
Ако започнете да чертаете кръг по часовниковата стрелка (посока, по подразбиране за оказване на дъга в платното) с по една точка, разположена на правото, на дъгата достига връхната точка на три четвърти от дължината на окръжността, т.е. под ъгъл, равен на 1.5π рад. Поради това е необходимо да се въведат променливата а = 1,5 * Math.PI да посочат началната ъгъла, под който ние започваме да се направи дъга в платното.
4. Styling гама
Сега, за да се направи пълен набор от минимално необходимото, за да оформите външния му вид. За да направите това, се определят ширина на линията и strokeStyle свойства варират:
clearRect () функция изчиства правоъгълната област на платно определени параметри: (х, у) - координатите на горния ляв ъгъл. clearRect низ (0, 0, 16, 16) напълно почиства създаде контактна област на 16 х 16 пиксела.
функцията beginPath () създава нов път за чертежа, и инсулт () функция започва рисуване кръгове на новосъздадената верига. След updateLoader () функция използва интерес брояч [сто] с нарастване от 1%, както и преди следващото показване на програмата ще бъде необходимо да се провери дали брояча не е равно на 100. Ако стойността на брояча е 100%, а след това setInterval на таймера стойност ( ) (както е определено от таймер ID, ТС) се нулира чрез clearInterval () функция.
И още?
дъгата на първите три параметъра функция () - координатите на центъра на дъгата (х, у) и радиус. Четвъртото и петото параметри са началната и крайната ъгли, при която на дъгата започва и приключва рендиране.
Ние вече са идентифицирани началната точка на изготвянето кръг фавикон-а, който е ъгъл S. На същото място ще се започне на всички повторения. Въпреки това, крайният ъгъл ще се увеличи с процентни стойности на брояча. Ние можем да изчислим увеличените стъпка размер, както следва. Например, на стъпки от 1% (1 от 100%) на определен ъгъл α от 2π ъгъл (където 2π - е ъгълът на цялата обиколка). По този начин, ние можем да създадем следния израз: