JavaScript е последният от начините, които ще разгледаме за анимиране на SVG. Разгледахме CSS, който е страхотен и доста удобен, но не може да направи редица SVG свойства, които може да искате да анимирате. След това разгледахме SMIL, който е декларативен синтаксис точно в самия SVG код, който е по-мощен, тъй като може да анимира повече неща, включително формата на самия елемент.
JavaScript може да направи всичко, което може да направи, и то добре. Просто това се дължи или на писането на наистина сложен код сами, или на режийните разходи на библиотека, която да ви помогне. Но след като започнете да работите, синтаксисът може да бъде наистина прекрасен и приятелски настроен към анимациите, а изпълнението всъщност може да бъде първокласно.
Друго предимство при използването на JavaScript за SVG анимации е поддръжката. Има много странности, за които да се притеснявате, докато анимирате SVG. Някои браузъри не поддържат преобразувания на елементи. Някои браузъри правят странни неща с мащабиране на страниците. Някои са в противоречие с трансформирания произход. JavaScript библиотеките често помагат при тези проблеми.
Докато говорим конкретно за анимация, много SVG библиотеки на JavaScript са свързани с работата със SVG като цяло. Те могат да го създават и манипулират, да имат достъп до свойства от елемента, да ги променят и т.н. Някак като добавяне на по-надежден API към SVG.
Snag.svg - “jQuery за SVG”
Основен пример за използване на Snap.svg:
Вижте Pen BhHix от Chris Coyier (@chriscoyier) на CodePen.
Друго нещо, което направихме в това видео със Snap.svg, е да конвертираме тази CSS анимационна писалка в Snap.svg, обучавайки ни, че можем да използваме Snap.svg за работа с вграден SVG вече на страницата. Adobe са събрали редица примери сами.
Рафаел - по-стара библиотека от същия създател като Snap.svg
SVG.js - „Лека библиотека за манипулиране и анимиране на SVG.“ Ето демонстрацията на часовника, която разгледахме, показвайки как работят тези анимации чрез бързо манипулиране на DOM.
D3.js - „D3.js е JavaScript библиотека за манипулиране на документи въз основа на данни. D3 ви помага да съживите данните с помощта на HTML, SVG и CSS. " Ето урок за започване на създаването на SVG с него и още едно въвеждане на анимация с него.
GreenSock - „Ултра високоефективна професионална анимация за съвременната мрежа.“ GreenSock е за анимации в мрежата като цяло, но поддържа SVG. Ето писалка, където можете да видите как работи.
Velocity.js - „Ускорена анимация на JavaScript.“ Също така библиотека за анимацията в мрежата като цяло, която поддържа SVG. Джулиан Шапиро го създаде и писа за това защо анимацията на JavaScript всъщност може да бъде най-ефективният стил на анимация, както и как работи Velocity.js. Ето една много проста демонстрация, анимираща някои специфични за SVG свойства.
Можете също така да се заемете сами с JavaScript анимации без помощта на рамка. Не забравяйте, че вграденият SVG е в DOM, така че всички редовни неща за DOM API са достъпни за вас. Подобно на вас, как всъщност не се нуждаете от jQuery за работа с DOM, просто често го улеснява. Ето пример, който прави нещата по свой начин, което е доста интересно.