23: Анимирање СВГ-а са СМИЛ - ЦСС-трикови

Anonim

Иако би анимирање СВГ-а помоћу ЦСС-а могло бити удобније за просечну фронт-енд особу, СВГ има још један начин на који анимација уграђена у саму СВГ синтаксу. То је управо оно што укратко покривамо у овом видеу, али ако желите потпун референтни водич, свакако погледајте Водич за СВГ анимације (СМИЛ) Сара Соуеидан управо овде на ЦСС-триковима.

СМИЛ је скраћеница од Синцхронизед Мултимедиа Интегратион Лангуаге. Колико сам схватио, то је „ствар“ за себе која се уграђује у СВГ. Али СВГ има неке своје СМИЛ-ове додатке. Све ћу то назвати СМИЛ иако сам понекад сигуран да сам технички нетачан.

За врло једноставне анимације није битно ако то радите у СМИЛ-у или ЦСС-у, урадиће исту ствар на приближно истом нивоу тежине. Неке ствари могу бити чак и лакше у ЦСС-у. Али ево неколико ствари где је СМИЛ пут:

  • Морате анимирати нешто што ЦСС не може додирнути. Попут облика многоугла или путање.
  • Желите да користите догађаје да утиче на анимацију, као да је clickили mouseoverили нешто.
  • Желите да радите адитивне анимације, попут анимирања са било ког другог места, за још к пиксела.
  • Желите да имате анимације које се директно односе на друге анимације, на пример, када ова анимација заврши, покреће следећу анимацију (без ручног манипулисања трајањем).
  • Сигуран сам да их има још.

Синтакса у почетку делује застрашујуће, али обећавам да је заиста лако. Ево основног примера:

 

Погледајте Пен јАипИ Цхриса Цоииера (@цхрисцоииер) на ЦодеПен-у.

Ствар „преобликовања облика“ је заиста супер јединствена са СМИЛ-ом, па ево бољег примера од оног чудног који смо урадили у видеу:

Погледајте дугме за обликовање оловке у облику Цхриса Цоииера (@цхрисцоииер) на ЦодеПен-у.

У тој демонстрацији догађајима се бави ЈаваСцрипт уместо СМИЛ. Лепо је знати да и ти то можеш. СМИЛ окидачи догађаја су цоол, али онда ствар на коју треба кликнути мора бити у том СВГ-у, а не било где другде у ДОМ-у.