З тих пір, як я повністю перейшла на фронтенд-розробку на роботі, я працюю над багатьма веб-анімаціями, переходами та ефектами. Чим більше я це роблю, тим більше креативних способів я знаходжу, щоб змусити це працювати.
Раніше я шукала GIF-файл, стискала його і закінчував на цьому. Потім я дізналася про бібліотеку Three.js, яка дозволяє створювати інтерактивні веб-додатки прямо в браузері. Мій улюблений проект на Three.js — це, мабуть, різдвяна ялинка з подарунками, які можна було б пересувати та розгортати. Створювати щось подібне з нуля було дуже весело!
Потім я дізнався про Lottie, формат анімаційних файлів з відкритим вихідним кодом, який швидко став новим галузевим стандартом у світі веб-розробки.
Я дуже люблю Lottie, але встановлення всіх цих залежностей для однієї крихітної анімації здається мені перебором. Не кажучи вже про те, що його плеєр для React значно збільшує розмір пакета. Якщо весь ваш додаток складається з інтерактивних елементів та анімацій, то використання Lottie має сенс. Але якщо вам потрібна лише одна крихітна анімація, у мене є кращий варіант для вас.
Чесно кажучи, я й гадки не мала, що можна легко зробити анімований SVG з нуля. Секрет полягає в тому, щоб помістити CSS, який анімує зображення, безпосередньо в SVG, потім зберегти його як зображення і посилатися на нього як на звичайний SVG у вашому коді АБО закодувати його і помістити безпосередньо в CSS. Останній підхід робить його менш читабельним, але набагато компактнішим. Я б не рекомендувала цей шлях, якщо ви плануєте змінювати анімацію в майбутньому.
Існує безліч безкоштовних SVG-кодерів, якщо ви вирішите розмістити анімований SVG безпосередньо в CSS:
background-image: url("data:image/svg+xml,...)
Ось посилання на мій улюблений інструмент.
Розшифрувати цю анімацію і отримати зображення у форматі SVG ще простіше — просто скопіюйте і вставте її у ваш браузер і збережіть зображення, натиснувши на кнопку «Зберегти як…».
Насамкінець, я хочу дати посилання на статтю, яка надихнула мене на експерименти з CSS в SVG. Це дивовижна стаття команди StackOverflow, де вони описують, як їм прийшла в голову ця ідея і як крок за кроком реалізувати свій власний анімований SVG. Я почала свої експерименти з копіювання їхнього коду конфетті, а потім повільно створювала власні прості анімації.
Кінцевий результат був дійсно вражаючим — моя анімація займала лише 8 КБ, і мені довелося додати рівно нуль залежностей, щоб змусити її працювати. Хіба це не круто?
Цей текст з особистого блогу, опублікований з дозволу автора.
Щодня ми носимо в своїй кишені пристрій, що в сотні мільйонів разів потужніший за комп’ютер,…
Оце сиджу, працюю і задумався: «А де ж проходить та тонка межа між фіксом, який…
«Коли вимірюваний показник стає метою, він перестає бути хорошою мірою» Закон який значною мірою відповідальний…
Інколи здається, що ви врахували все. Упевненість у рішенні настільки висока, що ви вже подумки…
Блогер та розробник Джозеф Круз розповів, як він працює програмістом, маючи доволі серйозні проблеми із…
Голова може боліти з безлічі причин. Але один з найпоширеніших різновидів — так званий головний…