Маштабуецца вектарная графіка (SVG) - гэта фармат выявы, напісаны ў XML. З дапамогай SVG вы можаце кадаваць графіку, якая маштабуецца ў двух вымярэннях. Затым вы можаце рэалізаваць і змяніць іх у CSS і JavaScript.

SVG прапануе тры віды графікі: вектарныя формы (прамыя і выгнутыя лініі ва ўсіх напрамках і формах), выявы і тэкст. З-за розных функцый, вэб-дызайнеры звяртаюцца да SVG, каб стварыць складаныя анімацыі. Яны простыя ў ўстаноўцы, не губляюць якасць пры змене памеру і не патрабуюць старонніх прыкладанняў.

Па меры таго, як анімацыі становяцца ўсё больш папулярнымі, большасць з іх не знаёмыя. У гэтым артыкуле прадстаўлена 20 фантастычных SVG-анімацый, якія дэманструюць патэнцыял гэтага фармату.

1. Кіттонскі медыцынскі абраз SVG

Гэтая цёплая і гладкая анімацыя выдатна падыходзіць для ўсіх сайтаў, якія тычацца здароўя. Калі вы пералічваеце розныя тэмы, выявы выглядаюць тонка. Аўтамабіль хуткай дапамогі альбо атам пабудаваны, вочы адчыняюцца і лекар выскачыць. Гэтая анімацыя паказвае ўсё задавальненне і дынаміку 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. Новы торт ад Marco Barría

Цікавая анімацыя, якая паказвае выраб торта пласт за пластом. Гэта ўражлівая SVG-анімацыя, прыдатная для імянінніка.

16. Здрабняльнік дакументаў Крыса Ганона

Калі вы любіце глядзець дэталі паперы, вы можаце атрымліваць асалоду ад гэтай анімацыяй, у якой машына разбівае паперу для паперы неабмежаваную колькасць разоў.

Ярлык

17. Нізкі PolyLion ад GRAYGHOST

Гэта надзвычайная ілюстрацыя і анімацыя, якія паказваюць галава льва, якая з'яўляецца і знікае ў выглядзе аніміраваных шматкутнікаў.

Ярлык

18. Пагрузчык з пясочнага гадзінніка ад Leela

Яшчэ адна эфектыўная анімацыя, якая выкарыстоўвае толькі SVG. Пясочны гадзіннік круціцца кожныя 5 секунд і пачынае новы цыкл.

Ярлык

19. Спагадная карова Сары Драснер

Гэта пацешная інтэрактыўная анімацыя, якая дазваляе націскаць на карову і перацягваць яе вакол Месяца, пакуль разгублены астранаўт глядзіць на яе.

20-ы студэнт з Дамані

Захоплены студэнт, здаецца, гатовы вучыцца! Гэта выдатная анімацыя, якая акуратна перагортвае старонкі кнігі. Ніякага мігцення з боку студэнта, але гэта ўсё яшчэ ідэальна ахайная анімацыя для завяршэння гэтага спісу.

Ярлык

Ваша чарга

Вашы любімыя SVG-анімацыі, якіх няма ў гэтым спісе? Падзяліцеся сваім выбарам у каментарах ніжэй!