20 Приклад фантастичної SVG-анімації

Масштабована векторна графіка (SVG) - це формат зображення, записаний у XML. За допомогою SVG можна кодувати двовимірну масштабовану графіку. Потім ви можете їх впроваджувати та змінювати в CSS та JavaScript.

SVG дозволяє три види графіки: векторні форми (прямі та вигнуті лінії у всіх напрямках і формах), зображення та текст. Через різні можливості веб-дизайнери звертаються до SVG, щоб зробити складні анімації. Вони прості в установці, не втрачають якості при зміні розміру і не потребують роботи сторонніх додатків.

Оскільки анімація все ще зростає у популярності, більшість із них не знайомі. У цій статті буде висвітлено 20 фантастичних SVG-анімацій, які показують потенціал цього формату.

1. Медичні SVG іконки китонами

Швидкі посилання

1. Медичні SVG іконки китонами
2. Наведіть курсор на SeanMcCaffery
3. Потягніть вниз, щоб оновити (паперовий літак) Миколи Таланова
4. Просто продовжуйте діяти Діако М. Лотфоллахі
5. SVG-фільтри додано до відео HTML5
6. Головоломка
7. Лайнер градієнт Патрік Янг
8. Давайте подорожуємо jjperezaguinaga
9. Годинник Мохамада Мохебіфара
10. Анімовані іконки Луїджі Де Роза
11. Всі пристрої в SVG від Chris Gannon
12. Водоспад Кріса Ганнона
13. Генератор рослин Блейк Боуен
14. Ікона, що натискається, Гаміш Вільямс
15. Новий торт Марко Баррія
16. Подрібнювач паперу Кріс Ганнон
17. Низький PolyLion від GRAYGHOST
18. Навантажувач пісочного годинника від Leela
19. Корова чуйна Сара Драснер
20. Студент від Домані
Твоя черга

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

Посилання

2. Наведіть курсор на SeanMcCaffery

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

Посилання

3. Потягніть вниз, щоб оновити (паперовий літак) Миколи Таланова

Зазвичай сторінки оновлюватимуться, коли ви їх "спустите". Ця анімація виводить це на новий рівень. Коли ви потягнетесь вниз, щоб випустити його, ви запустите паперовий літак у небо. Якщо ви хочете, щоб ваші відвідувачі часто оновлювали ваш додаток, вам слід розглянути можливість додавання такої анімації.

4. Просто продовжуйте діяти Діако М. Лотфоллахі

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

Посилання

5. SVG-фільтри додано до відео HTML5

Пол Ірланд з команди Google Chrome подивився, як SVG може змінювати вміст поза векторною графікою. Він поєднав CSS і SVG, щоб створити дивовижні візуальні фільтри, щоб показати, що SVG-анімація може бути прекрасним доповненням до готового відео.

Посилання

6. Головоломка

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

Посилання

7. Лайнер градієнт Патрік Янг

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

Посилання

8. Давайте подорожуємо jjperezaguinaga

Два літаки та повітряна куля, що обертаються навколо популярних визначних пам'яток світу. Ця анімація барвиста, оптимістична та вражаюча. Це показує все, що ви можете зробити, якщо ви вмілі в SVG.

Посилання

9. Годинник Мохамада Мохебіфара

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

Посилання

10. Анімовані іконки Луїджі Де Роза

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

11. Всі пристрої в SVG від Chris Gannon

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

Посилання

12. Водоспад Кріса Ганнона

Ще один Кріс Ганнон - це акуратна демонстрація спіненого дна водоспаду. Рух води акуратний, і ви можете побачити невеликі краплі бризки води, що залишають межі анімації, щоб зробити все більш реалістичним.

Посилання

13. Генератор рослин Блейк Боуен

Зараз це щось інше. Натиснувши кнопку "Створити", ви побачите рослини, що ростуть і ростуть. Але кожен раз, коли ви клацаєте, формуватимуться різні візерунки.

Посилання

14. Ікона, що натискається, Гаміш Вільямс

Ще один інтерактивний SVG, який запускає анімацію, як тільки ви натискаєте на неї. Після натискання на нього ця анімація ініціює "Надіслати".

Посилання

15. Новий торт Марко Баррія

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

16. Подрібнювач паперу Кріс Ганнон

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

Посилання

17. Низький PolyLion від GRAYGHOST

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

Посилання

18. Навантажувач пісочного годинника від Leela

Ще одна ефективна анімація, яка використовує лише SVG. Кожні 5 секунд пісочний годинник перевертається догори дном і почне новий цикл.

Посилання

19. Корова чуйна Сара Драснер

Це кумедна інтерактивна анімація, яка дозволяє натиснути на корову і перетягнути її навколо Місяця, поки ошелешений космонавт дивиться на неї.

20. Студент від Домані

Здається захоплений студент, готовий вчитися! Це чудова анімація, де сторінки книг акуратно перегортаються. Ніякого моргання від студента, але це все ще ідеально охайна анімація для завершення цього списку.

Посилання