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, це часто робить це простіше. Ось приклад, який робить речі по-своєму, що досить цікаво.