Иако би анимирање СВГ-а помоћу ЦСС-а могло бити удобније за просечну фронт-енд особу, СВГ има још један начин на који анимација уграђена у саму СВГ синтаксу. То је управо оно што укратко покривамо у овом видеу, али ако желите потпун референтни водич, свакако погледајте Водич за СВГ анимације (СМИЛ) Сара Соуеидан управо овде на ЦСС-триковима.
СМИЛ је скраћеница од Синцхронизед Мултимедиа Интегратион Лангуаге. Колико сам схватио, то је „ствар“ за себе која се уграђује у СВГ. Али СВГ има неке своје СМИЛ-ове додатке. Све ћу то назвати СМИЛ иако сам понекад сигуран да сам технички нетачан.
За врло једноставне анимације није битно ако то радите у СМИЛ-у или ЦСС-у, урадиће исту ствар на приближно истом нивоу тежине. Неке ствари могу бити чак и лакше у ЦСС-у. Али ево неколико ствари где је СМИЛ пут:
- Морате анимирати нешто што ЦСС не може додирнути. Попут облика многоугла или путање.
- Желите да користите догађаје да утиче на анимацију, као да је
clickилиmouseoverили нешто. - Желите да радите адитивне анимације, попут анимирања са било ког другог места, за још к пиксела.
- Желите да имате анимације које се директно односе на друге анимације, на пример, када ова анимација заврши, покреће следећу анимацију (без ручног манипулисања трајањем).
- Сигуран сам да их има још.
Синтакса у почетку делује застрашујуће, али обећавам да је заиста лако. Ево основног примера:
Погледајте Пен јАипИ Цхриса Цоииера (@цхрисцоииер) на ЦодеПен-у.
Ствар „преобликовања облика“ је заиста супер јединствена са СМИЛ-ом, па ево бољег примера од оног чудног који смо урадили у видеу:
Погледајте дугме за обликовање оловке у облику Цхриса Цоииера (@цхрисцоииер) на ЦодеПен-у.
У тој демонстрацији догађајима се бави ЈаваСцрипт уместо СМИЛ. Лепо је знати да и ти то можеш. СМИЛ окидачи догађаја су цоол, али онда ствар на коју треба кликнути мора бити у том СВГ-у, а не било где другде у ДОМ-у.