Для початку трохи корисної «води» про фавікон
Взагалі, якщо торкатися теми з фавікона. то виявляється не все так просто, тому що про цю маленьку іконку часом забувають на своєму сайті, а вона є дуже важливою частиною онлайн брендингу та дає візуальний сигнал для користувача, допомагаючи відрізнити ваш сайт від інших. У будь-якому випадку, не дивлячись на те, що більшість іконок є статичними (т.к в інтернеті величезна кількість вже готових фавікона + можна зробити фавікон онлайн самому використовуючи будь-який онлайн фавікон генератор), їх все одно можна «оживити» і сфокусувати погляд доп. відвідувача.
Безумовно, постійно рухається favicon може дратувати більшість користувачів і створювати додаткове навантаження при завантаженні сторінки і тим самим не привертати користувача, а навпаки відштовхнути його від вашого сайту. Однак, якщо запускати анімацію на короткий проміжок часу, наприклад у відповідь на дію користувача або фонове подія (завантаження сторінки / виконання AJAX), то вона може забезпечити додаткову візуальну привабливість для вашого сайту.
Анімований фавікон за 7 кроків
Нижче, я постарався описати 7 простих кроків, після яких ви зможете отримати готову анімовану іконку, яка буде спрацьовувати після натискання на кнопку.
1. Створюємо полотно через
Для початку, нам потрібно створити canvas анімацію. яка буде малювати повне коло на всі 100% (для нас це буде дуже важливо коду потрібно буде збільшувати дугу). Тому вставляємо наступну розмітку:
Як бачите крім обнулення зі змінною s теж твориться якась магія 🙂 Але і тут все просто, так як в цій змінній просто розраховується по формулі як повинен себе вести / працювати кут дуги щоб отрісовиваємих повне коло. Нижче я постараюся пояснити, що і звідки береться.
Стягує кут (кут, утворений двома променями, які задають дугу) окружності кола дорівнює 2π rad. де rad - це радіан - назва одиниці виміру кутів. Тоді кут, відповідний дузі, що становить 1/4 довжини окружності. дорівнює 0.5π rad.
Тобто за підсумком при візуалізації ходу «завантаження» фавікона нам би хотілося, щоб коло в canvas отрісовиваємих немає від точки, що лежить праворуч від центру передбачуваної окружності, а від її верхньої точки.
Якщо почати креслити коло за годинниковою стрілкою (напрямок, що використовується за умовчанням для відтворення дуги в канвасе) від точки, що лежить праворуч, то дуга досягне верхньої точки через три чверті кола, тобто при куті, рівному 1.5π rad. Отже, необхідно ввести змінну s = 1.5 * Math.PI для позначення початкового кута, при якому ми і почнемо креслити дугу в полотні.
4. Стилізація кола
Тепер, для промальовування всього кола необхідно мінімально стилізувати його зовнішній вигляд. Для цього, визначимо lineWidth і strokeStyle властивості кола:
Функція clearRect () очищає прямокутну область полотна, задану параметрами: (x, y) - координати лівого верхнього кута. Рядок clearRect (0, 0, 16, 16) повністю очищає створену нами область розміром 16 x 16 пікселів.
Функція beginPath () створює новий контур для відтворення, а функція stroke () починає отрисовку кола по новоствореному контуру. В кінці функції updateLoader () використовується процентний лічильник [pct] з кроком збільшення в 1 відсоток, і перш ніж програма виконає чергове збільшення, необхідно буде перевірити, чи не так само Чи має значення лічильника 100. Якщо значення лічильника становить 100 відсотків, то значення таймера setInterval ( ) (визначається параметром timer id, tc) обнуляється за допомогою функції clearInterval ().
А детальніше?
Перші три параметри функції arc () - це координати центру дуги (x, y) і її радіус. Четвертий і п'ятий параметри представляють собою початковий і кінцевий кути, при яких починається і закінчується отрисовка дуги.
Ми вже позначили початкову точку відтворення кола favicon-а, якій є кут s. Ця ж точка буде початкової на всіх ітераціях. Однак кінцевий кут буде збільшуватися зі збільшенням значення процентного лічильника. Ми можемо розрахувати розмір кроку збільшення наступним чином. Наприклад, крок збільшення в 1% (1 відсоток з 100) становить якийсь кут α від кута 2π (де 2π - це кут всьому колу). Таким чином, ми можемо скласти такий вираз: