Мащабируема векторна графика (SVG) е формат на изображението, написано в XML. С SVG можете да кодирате двуизмерна мащабируема графика. След това можете да ги внедрите и промените в CSS и JavaScript.
SVG позволява три вида графики: векторни форми (прави и извити линии във всички посоки и форми), изображения и текст. Поради различните си възможности, уеб дизайнерите се обръщат към SVG, за да правят сложни анимации. Те са лесни за инсталиране, не губят качество при преоразмеряване и не изискват работа на приложения на трети страни.
Тъй като анимациите все още нарастват по популярност, повечето не са запознати с тях. Тази статия ще подчертае 20 фантастични SVG анимации, които показват потенциала на този формат.
1. Медицински SVG икони от котета
бързи връзки
- 1. Медицински SVG икони от котета
- 2. Задръжте курсора на мишката от SeanMcCaffery
- 3. Издърпайте надолу, за да опресните (хартиена плоскост) от Николай Таланов
- 4. Просто продължете напред от Diaco M. Lotfollahi
- 5. SVG филтри добавени към HTML5 видео
- 6. Пъзел на мозайката
- 7. Лайнер градиент от Патрик Янг
- 8. Нека пътуваме от jjperezaguinaga
- 9. Часовник от Мохамад Мохебифар
- 10. Анимирани икони от Луиджи Де Роза
- 11. Всички устройства в SVG от Chris Gannon
- 12. Водопад от Крис Ганон
- 13. Генератор на растения от Блейк Боуен
- 14. Икона за кликване от Хамиш Уилямс
- 15. Нова торта от Марко Бария
- 16. Шредер за хартия от Крис Ганон
- 17. Нисък полилион от GRAYGHOST
- 18. товарач с часовници от Leela
- 19. Отзивчива крава от Сара Драснер
- 20. Студент от Домани
- Твой ред
Тази топла и гладка анимация е чудесна за всеки уебсайт, свързан със здравето. Докато се изброявате през различните нишки, изображенията ще се появяват фино. Автомобилът на линейката или атома ще конструират, окото ще се отвори и лекарят ще изскочи. Тази анимация показва цялото забавление и динамика на SVG.
връзка
2. Задръжте курсора на мишката от SeanMcCaffery
Универсална анимация, която можете да поставите на всеки интерактивен уебсайт. Финият външен вид на границите, когато задържите курсора, ви оставя със задоволително усещане и ви кани да щракнете върху връзката.
връзка
3. Издърпайте надолу, за да опресните (хартиена плоскост) от Николай Таланов
Обикновено страниците ще се опресняват, когато ги „свалите“. Тази анимация извежда това на ново ниво. Когато се дръпнете надолу, за да го освободите, ще изстреляте хартиен самолет в небето. Ако искате посетителите ви да обновяват често приложението ви, трябва да помислите за добавяне на анимация като тази.
4. Просто продължете напред от Diaco M. Lotfollahi
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. Нисък полилион от GRAYGHOST
Това е умопомрачителна илюстрация и анимация, която изобразява лъвска глава, която се появява и изчезва под формата на анимирани полигони.
връзка
18. товарач с часовници от Leela
Друга ефективна анимация, която използва само SVG. На всеки 5 секунди часовниците ще се обърнат с главата надолу и ще започнат нов цикъл.
връзка
19. Отзивчива крава от Сара Драснер
Това е забавна интерактивна анимация, която ви позволява да щракнете върху крава и да я влачите около луната, докато озадачен астронавт я гледа.
20. Студент от Домани
Появява се ентусиазиран студент, готов да учи! Страхотна анимация, при която страниците на книгите се завъртат спретнато. Не мига от ученика, но това все още е напълно подредена анимация за завършване на този списък.
връзка
Твой ред
Кои са любимите ви SVG анимации, които не са включени в този списък? Споделете вашите снимки в коментарите по-долу!
