Advertisement
  1. Web Design
  2. HTML & CSS

Як анімувати святкові іконки за допомогою CSS

by
Read Time:16 minsLanguages:

Ukrainian (українська мова) translation by AlexBioJS (you can also view the original English article)

Настав час, тому у цьому посібнику ми розглянемо, як створювати деякі святкові SVG-іконки, анімовані за допомогою CSS. На Iconmelon, сайті, де викладено багато безкоштовних наборів векторних іконок, які можуть вас сильно зацікавити, ви можете знайти деякі чудові іконки. Іконки, які я використовую тут, надані Sam Jones. Так що візьміть собі чашку егногу (* молочно-яєчний коктейль з додаванням спецій та алкоголю. Тут і надалі примітка перекладача), затягніть ваш лептоп на Різдвяне поліно (* велике поліно, що спалюють у Різдвяний святвечір) і давайте перейдемо до справи!

SVG та Веб

Якщо ви зацікавлені у використанні SVG у веб, рекомендую почати з іконок. З елементами SVG легко працювати, вони не залежать від роздільної здатності екрана та мають невелику вагу, тому іконки природньо підходять для векторного формату. Більш того, так же, як і у випадку з HTML, для елементів SVG можна задати стильове оформлення за допомогою технології CSS, що включає до себе анімації CSS3. Завдяки доданню крихітки інтерактивності до наших іконок за допомогою анімацій вам може бути легше створити чарівний досвід користування для ваших користувачів і також надати контекст про те, що являє собою іконка.

У якості вступу до теми про те, як використовувати SVG у веб, ознайомтеся з SVG Files: From Illustrator to the Web.

Зверніть увагу: у нижченаведених демоверсіях використовуються передові технології, які на момент написання цього посібника не підтримуються у деяких браузерах, таких як Internet Explorer. Для роботи з посібником вам найкраще підійде Chrome або Safari. Підтримка Mozilla цілком можлива, якщо ви будете використовувати відповідні префікси для властивостей. Ви можете бути впевнені, що підтримку цих технологій буде покращено у майбутньому.

Окрім цього: у цьому посібнику я опустив декілька важливих префіксів браузерів декількох властивостей, щоб зробити код більш лаконічним та читабельним. Ознайомтеся з бібліотекою prefixfree, створеною Lea Verou, якщо би ви хотіли полегшити процес написання коду CSS без префіксів. Також ви могли би спробувати створити ваші демоверсії на Codepen, який можна легко налаштувати на використання prefixfree.


Підготовлюємо код SVG для редагування

Одна з головних труднощів при роботі з SVG – те, що з кодом тяжко працювати. Код SVG, що експортується Illustrator (редактором, якому я віддаю перевагу), доволі нечитабельний на перший погляд. Inkscape щодо цього краще, проте я виявив, що завдяки спрощенню та форматуванню можна зробити код значно більш читабельним та зручним для роботи.

Нижче наведено код SVG для першого прикладу анімації, який я продемонструю, – Різдвяний вогник.

Цей код було експортовано з мого редактора, Adobe Illustrator. Він майже нечитабельний на перший погляд. Нижче наведено ту саму розмітку у спрощеному вигляді:

Я значно спростив цей код xml завдяки видаленню надмірного коду розмітки, який програма виводить за налаштуванням. Мій базовий елемент SVG містить наступне:

  • Клас svg-light. Я скористався префіксом svg- для легкого звертання до елементів всередині конкретного елемента SVG.
  • Властивість viewbox. За допомогою значення властивості viewbox задається співвідношення розмірів сторін документа, і воно є еквівалентом розміру монтажної області в Illustrator.
  • Властивість xmnls. За допомогою цієї властивості задається простір імен XML SVG та спрощується розуміння розмітки деякими агентами користувача.

Я додав класи всередині відкриваючих тегів елементів, що містяться усередині SVG, за допомогою яких визначаються фігури, що становлять зображення, такі як шляхи, кола та прямокутники. Всі розташовані в лінію властивості елементів, такі як їх координати, я переніс на нові рядки. Також я додав відступ для всіх внутрішніх елементів так, щоб вони розташовувалися справа від базового тегу SVG.

Все це було зроблено не випадково. По-перше, завдяки цьому код набагато легше читати. По-друге, у редакторі коду, якому я віддаю перевагу, Sublime Text 3, я запросто можу звернути окремі елементи в елементах SVG або самі елементи SVG повністю, у той час як імена класів як і раніше допомагають пам'ятати контекст про те, чим є елементи.

Code folding of SVG in Sublime Text 3Code folding of SVG in Sublime Text 3Code folding of SVG in Sublime Text 3
Звертання коду SVG у Sublime Text 3

Різдвяні вогники

Давайте проймемося святковим настроєм та реалізуємо анімацію Різдвяного вогника. Нижче наведено, що будемо намагатися реалізувати:

Погляньте на Pen (* фрагмент коду) Light, створений Noah Blon (@noahblon) на CodePen

Мені потрібно анімувати елемент path, якому я додав клас bulb у SVG.

За допомогою CSS я задам для вогника колір заливки та визначу його властивості анімації.

Властивість fill дозволяє нам задати колір елемента SVG. За можливістю я люблю використовувати модель HSL (hue, saturation, lightness)(* модель кольоровідтворення "тон–насиченість–яскравість») для визначення значень кольорів, оскільки вона легка для розуміння. Тут я задав синій колір (hue 204) та залишив значення яскравості низьким, 23%, що означає, у нас вийде тено-синій колір.

Я налаштував вогник таким чином, щоб він анімувався за допомогою анімації за ключовими кадрами під назвою glow-blue. Тривалість цієї анімації – 1 секунда. Анімація повторюється нескінченно довго, що значить, вона буде виконуватися завжди. Анімація розподілена у часі таким чином, що вона виконується повільніше на початку та в кінці ключових кадрів, завдяки чому виходить більш плавний перехід у початковій та кінцевій точках анімації. Нарешті, у якості значення напрямку анімації встановлено alternate (* чергування), що значить, вона буде виконуватися у той та інший напрямок спочатку до кінця і знову назад.

Порада: ви, ймовірно, знаєте, що є скорочена форма запису правил CSS-анімації, проте я звичайно полюбляю розбивати правила, щоб їх було легше розуміти, змінювати та повторно використовувати в інших анімаціях при їх зчепленні.

Тепер я визначу анімацію за ключовими кадрами glow-blue:

Тут я задав початковий та кінцевий кольори заливки елемента, для якого ця анімація застосовується. Єдине значення, яке змінюється, – яскравість кольору (часть «l» в hsl), що означає, що вогник буде змінюватися від темної до світлої версії при той самій насиченості. Це інтуїтивний  синтаксис, надаваний HSL.

Оскільки я налаштував анімацію таким чином, що вона буде змінювати напрямок нескінченно довго, вогник буде змінюватися від темної до світлої версії та ніколи на зупинятися (* все ж таки колись зупиниться )). Тому виникає враження, що він мигає.

Анімуємо безліч вогників

Що ж, тепер давайте звернемося до нашого внутрішнього Clark W. Griswold (* персонаж «National Lampoon's Vacation (film series)», 1983 – 2015) та реалізуємо анімацію всіх Різдвяних вогників. Ось що ми створимо:

Погляньте на Pen 540257e4a8b727e435c8e4033602ebb0, створений Noah Blon (@noahblon) на CodePen

Я створив п'ять по-різному забарвлених вогників. Кожний вогник обернуто у div шириною 20%. Ці елементи div потім вирівняно по лівому краю, завдяки чому вони розташовуються на одній лінії. Оскільки я не задав для елемента SVG висоти або ширини та залишив значення властивості viewbox тим самим, розмір елемента SVG змінюється в залежності від розміру його батьківського елемента без порушення співвідношення розмірів або якості. Останнє є однією зі значних переваг SVG.

Для кожного елемента SVG я додав розширення базового класу svg-light, для якого вказується суфікс кольору (наприклад, svg-light--red). Нижче наведено фрагмент правил, використаних мною для анімації безлічі вогників:

Базові властивості анімації як і раніше застосовуються до базового класу svg-light, завдяки чому вони можуть бути використані знову в усіх вогниках. Для кожного різновиду кольору я створив окрему анімацію за ключовими кадрами на зразок glow-red або glow-blue та встановив для них різні затримки анімації та тривалості. Завдяки цьому вогники будуть мигати їх відповідними кольорами і не будуть всі мигати одночасно.


Rudolph the Red-Nosed Reindeer

(* Rudolph the Red-Nosed Reindeer – Рудольф, 9-й північний олень Санти. Персонаж, створений Robert Lewis May, зі світним носом). Я скористаюся тими самими принципами, описаними вище, для анімації найвідомішого північного оленя  – Рудольфа. Нижче наведено остаточний результат:

Погляньте на Pen SVG Rudolph Icon Animated with CSS, створений Noah Blon (@noahblon) на CodePen

Для початку я реалізую анімацію червоного носу:

Код виглядає доволі подібно тому для нашого Різдвяного вогника. В анімації за ключовими кадрами я роблю так, щоб анімація виконувалася спочатку на 50%, а потім – на 100%. Оскільки тривалість анімації становить 6 секунд, то це означає, що через три секунди ніс стане світло-червоним та залишиться таким упродовж наступних трьох секунд до кінця анімації. Також, оскільки я налаштував анімацію таким чином, щоб вона змінювала свій напрямок, то далі вона буде виконуватися у зворотному напрямку. Тому ніс буде залишатися повністю червоним упродовж наступних трьох секунд, перед тим як, нарешті, потемніти в останні три секунди. Розуміння взаємозв'язку між процентами, вказаними у ключових кадрах, та визначеннями анімації, такими як тривалість, – ключ до створення ефективних CSS-анімацій.

Також я реалізував анімацію для відблиску на носі Руді:

Тут я анімую іншу властивість SVG, fill-opacity. В якості значення цієї властивості встановлюється значення між 0 та 1; при 0 заливка стає повністю прозорою, при 1 – повністю непрозорою. Нарешті, я оживлю Руді ще трохи, зробивши так, щоб його очі мигали:

Я створив анімацію під назвою blink. Ця анімація виконується упродовж 8 секунд та ніколи не зупиняється. Я не налаштовую анімацію цього разу таким чином, щоб вона змінювала свій напрямок, а замість цього анімація буде виконуватися від початку до кінця і потім повторюватися спочатку. (* У якості значення за налаштуванням для напрямку використовується normal, при якому анімація буде виконуватися від початку до кінця при кожному циклі).

У ключових кадрах анімація мигання створюється за допомогою маніпулювання масштабом очей по осям X та Y. Наприклад, по досягненні відмітки 1% очі змінюються в 1.3 рази від їх розміру по осі Х та у 0.1 рази від їх нормального розміру по осі Y. Іншими словами, вони стають трохи ширшими та значно коротшими. Через 1% від тривалості анімації масштаб очей повертається до норми. Тому зміна масштабу відбувається надзвичайно швидко; 8 секунд / 100 = 8 сотих секунди.

Ключовим моментом при використанні трансформацій для анімування елементів SVG є встановлення значення властивості transform-origin. У більшості випадків для того, щоб трансформацію була коректно застосовано в SVG, ми повинні встановити в якості початкових координат цієї трансформації координати центру елемента. У протилежність елементу HTML за налаштуванням в якості початкових координат трансформації елемента SVG використовується його верхній лівий кут, координати (0,0). Завдяки вказанню в якості координат transform-origin (50%, 50%) осі Х та Y трансформації будуть починатися у центрі елемента, і трансформації потім будуть застосовуватися коректно.

Зверніть увагу: у Firefox є проблема при встановленні значень властивості transform-origin. Нажаль, при встановленні в якості значення transform-origin 50% відбувається власне скидання значень координат X/Y елемента. Одним із рішень цієї проблеми є повернення елемента до його вихідної позиції.


Ding Dong Merrily on High

(* Ding Dong Merrily on High – різдвяна пісня). У цьому прикладі я реалізую анімацію дзвону дзвіночка наступним чином:

Погляньте на Pen 63cdc3e8e785028deb35132d889b6090, створений Noah Blon (@noahblon) на CodePen

Давайте поглянемо на фрагмент розмітки SVG:

Я обгорнув контур дзвіночка та заливку у тег <g> (груповий тег). Цей тег дуже корисний для організації елементів подібно тому, як ви могли би обгорнути декілька елементів HTML за допомогою <div>. Анімації можуть бути застосовані до групи. Оскільки у цьому випадку мені потрібно, щоб повертався як контур, так і заповнення дзвіночка, я можу просто повернути групу, а не кожний елемент окремо.

Цей код CSS повинен бути вам уже знайомий, проте тут є декілька нових моментів. Для початку, в анімації за ключовими кадрами дзвіночок трансформується, проте замість трансформації масштабу виконується трансформація значення властивості rotation (* обертання; поворот) елемента. Завдяки цій анімації дзвіночок коливається між 27 та -27 градусами.

Ще я встановив в якості значення animation-delay від'ємне значення. Через це анімація починається по закінченні вказаного часу анімації. У цьому випадку анімація почнеться не після затримки тривалістю 1.5 секунди, а власне по закінченні 1.5 секунди анімації. Завдяки цьому анімація дзвіночка почнеться з нейтральної позиції, в якій дзвіночок знаходиться по закінченні 1.5 секунди анімації, а не повернутій позиції, в якій дзвіночок знаходиться по закінченні 0 секунд анімації.

Я застосував подібну анімацію до групи, що містить елементи язика дзвіночка. У цей раз, проте, я переношу, або переміщаю, елементи уздовж осі Х, а не обертаю, так що язик буде коливатися вправо та вліво.


"Let It Snow! Let It Snow! Let It Snow!"

(* «Let It Snow! Let It Snow! Let It Snow!», або «Let It Snow»; пісня, написана поетом Sammy Cahn та композитором Jule Styne у Липні 1945 року). У цьому прикладі ми реалізуємо анімацію падаючого снігу всередині скляної кулі.

Погляньте на Pen 2addb5f98c757d61cec87bdcacb5870d, створений Noah Blon (@noahblon) на CodePen

Я створив ряд елементів circle для представлення снігу та розмістив ці елементи по периметру скляної кулі, обгортаючи їх у тег <g>.

Снігу не видно за межами шару, оскільки я застосував відсічену область (* область, обмежуюча прихований графічний об'єкт, відтворюваний тільки при печатанні) для групи, що містить сніг. Відсічена область – фігура, яку можна застосувати до елементів SVG, маскуючи інші елементи всередині неї. У прикладі з нашою кулею я створив округлу відсічену область, яка охоплює внутрішню частину кулі.

Тег <clipPath> – наш маскуючий елемент; щоб їм скористатися, ми повинні додати йому ID.

Я обгорнув відсічену область в елемент defs. SVG дозволяє нам створювати елементи, які ми можемо використовувати пізніше, так як відсічена область, фільтри або фігури, які ми можемо штампувати. Обгортання визначень на зразок відсічених областей в елемент defs, завдяки чому код SVG стає більш читабельним, відноситься до усталеної практики.

Для застосування відсіченої області ми вказуємо її url, яким у нашому випадку є її ID, перед яким вказано знак решітки, у вбудованій властивості для вказання відсіченої області елемента SVG:

Тепер сніг видно тільки всередині тої округлої відсіченої області.

Анімація снігу реалізується за допомогою тих самих прийомів, які я описав раніше; він переноситься вздовж осі Y, і значення властивості fill-opacity наближується до нуля по завершенні анімації.

Так, селектори CSS3 можна застосовувати до елементів SVG! Тут я задав для кожного елемента сніжинки різні затримки, завдяки чому вони не будуть падати всі одночасно (* псевдоклас :nth-child використовується для додання стилю до елементів на основі нумерації у дереві елементів).


Season's Greetings

(* Season's Greetings – привітання зі святом). Нарешті, я реалізую анімацію деякого тексту на основі SVG для досягнення результату на зразок наступного:

Погляньте на Pen Message, створений Noah Blon (@noahblon) на CodePen

SVG надає нам можливість застосування штрихів до елементів SVG за допомогою CSS. В останньому прикладі я покажу вам, як поступово промалювати штрих тексту елемента.

Для реалізації цієї анімації я скористаюсь наступними властивостями штриха:

  • stroke-width: ширина штриха. Значення цієї властивості визначається в залежності від розміру елемента SVG і тому чутливо реагує на його зміни.
  • stroke: колір штриха.
  • stroke-dasharray: пунктирний штрих. За допомогою масиву значень, що чергуються, визначається довжина рисок пунктирної лінії та проміжків між ними.
  • stroke-dashoffset: місто початку штриха відносно довжини шляху.

Для отримання тексту, який промальовується штрихами, мені потрібно трохи попрацювати у графічному редакторі. Послідовність потрібних дій наступна:

  1. Створити текстовий елемент.
  2. Перетворити той текст у векторні шляхи.
  3. Об'єднати ті шляхи у складний шлях.

Нижче наведено мій код CSS для налаштування анімації:

Я задав у якості значення властивості stroke-dasharray значення довжини всього шляху (ви можете знайти це значення в Illustrator у панелі Document Info, вибравши пункт Object). Потім я задав в якості значення stroke-dashoffset значення всієї довжини шляху, у результаті чого весь текст стає невидимим. Потім за допомогою анімації, завдяки якій анімується властивість stroke-dashoffset, текст буде поступово промальовуватися штрихами на екрані.

Якщо ви хочете познайомитися з цим прикладом ближче, то ознайомтеся з постом Jake Archibald Animated line drawing in SVG.

Також я зробив так, щоб текст поступово проявлявся після завершення промальовування ліній, за допомогою властивості fill-opacity подібно тому, як я це зробив у прикладі зі скляною кулею.


Подальші кроки в області SVG та CSS

У цьому посібнику я показав, що за допомогою CSS та SVG ви можете створити доволі ефектні анімації. Якщо ви хочете розібратися з усім кодом, а також з деякими додатковими анімаціями, то можете завантажити приклади з Github або ознайомитися з моєю колекцією на Codepen.

Якщо вам потрібно щось поскладніше, то ви могли би спробувати розібратися з контролем CSS-анімацій за допомогою JavaScript або доповнити ваші CSS-анімації більш складними JavaScript-анімаціями, на зразок тих, що підтримуються чудовою бібліотекою JS SVG Snap SVG.

Дякую, що були зі мною сьогодні. Не можу дочекатися вигаданих вами творінь.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.