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