Нижче наведено можливі способи анімації svg:
SVG SMIL ANIMATIONS
SVG можна анімувати за допомогою потужної рідної мови розмітки, що називається SMIL, експортується безпосередньо з таких анімаційних інструментів, як Adobe Animate CC + flash2svg плагін.
Щоб оживити SVG за допомогою SMIL навіть у браузерах, у яких відсутня підтримка, потрібно просто використовувати поліфункцію SMIL.
Поліфайла - це особливий фрагмент коду javascript, який забезпечує підтримку функцій, відсутніх у браузері, переводячи оригінальне кодування в те, що браузер може зрозуміти.
Поліфункція SMIL, зроблена Еріком Віллігерсом, робить саме це: вона переводить SMIL в API веб-анімації, який підтримує навіть браузер Microsoft. Це настільки ефективно, що розробники Google Chrome вирішили відмовитись від нативної підтримки SMIL і зосередитись на веб-анімаціях, залишивши перед завданням Eric Willigers повторно заповнити завдання відтворення SMIL-файлів у Chrome.
Хтось помилково трактував це як знецінення SMIL Chrome і критикував чортів за цей вибір. Але це було не справжньою депресією, а лише переїздом на роботу з інтерпретації SMIL на рівні заповнення.
Насправді самі розробники Chrome посилаються на поліфіл Willigers в тому самому офіційному повідомленні про намір знецінити SMIL.
Тож якщо ви читаєте в Інтернеті про смерть SMIL, не хвилюйтесь. «Смерть» SMIL була сильно посилена. Це більше схоже на відродження.
Щоб використовувати SMIL у всіх браузерах, включаючи IE та EDGE, вам просто потрібно додати цю поліфункцію JavaScript на свою веб-сторінку:
https://github.com/ericwilligers/svg-animation
Ось демонстраційна сторінка з використанням поліфабрикату, зробленого Томом Бірном, автором популярного експортера flash2svg:
сторінка без поліфункції:
http://www.tbyrne.org/staging/smil-polyfill/tears.htm
та однакова сторінка з поліфункцією:
http://www.tbyrne.org/staging/smil-polyfill/tears_polyfill.htm
Якщо ви подивитесь на джерело, це досить зрозуміло.
Крім того, ефекти з поліфіл часто краще, ніж оригінальний SMIL, тому що у багатьох браузерах Web Animations прискорюється апаратне забезпечення, тоді як SMIL зазвичай немає.
ЕКСПОРТ АНІМАЦІЙ У SVG SMIL
Найпростіший спосіб створення анімації SVG - використовувати інструменти на зразок Adobe Animate CC для їх малювання та плагіни типу Flash2svg ( https://github.com/TomByrne/Flash2Svg ) для їх експорту в SVG. З його допомогою ви можете експортувати майже всі анімації + звук як один SVG-файл, як цей епізод мультфільму:
http://www.tbyrne.org/portfolio/smil/LoveDota.svg
SVG ANIMATION JS LIBRARIES
Спосіб javascript є складнішим. Перш за все вам потрібно бути програмістом javascript. Тоді вам доведеться вибирати між багатьма бібліотеками. Більш популярними є:
SnapSVG
http://snapsvg.io
Ця бібліотека є спадкоємцем старої та популярної бібліотеки анімації Рафаеля, створеної тим самим автором. Дуже стабільний, але він перетворює SVG у внутрішній формат під час виконання, щоб оживити його. Варіанти морфінгу також дуже базові, просто лінійна інтерполяція. (ПРИМІТКА. Для Adobe Animate CC також існує плагін snap.svg, але експортовані файли роздуті. Експортер створює одну команду snag svg для кожного кадру анімації, а не кожного ключового кадру, створюючи SVG-файл 18 Кбіт з понад 1000 рядків коду, просто повернути простий прямокутник на 360 градусів. Плагін Flash2svg набагато ефективніший, лише одна команда і кілька байтів, щоб виконати ту саму роботу).
Greensock MorphSVG
http://greensock.com/morphSVG
Повнофункціональна бібліотека морфінгу, яка дозволяє легко анімувати SVG та без необхідності конвертувати їх у внутрішній формат. Просто створіть 3-4 svg ключові кадри в Inkscape, і вікно Greenock SVGMorphing автоматично буде інтерполювати між кадрами та створити всі кадри між ними для плавного відтворення. Ось приклад:
http://codepen.io/Emasoft/pen/reOqYE
3D Seen.js
http://seenjs.io/demo-svg-canvas.html
Якщо ви хочете анімувати в 3D, ця бібліотека дуже потужна.
Seen.js візуалізує 3D-файли .obj у форматі SVG та анімує їх дуже легко.
SVG редактори зображень
Щодо інструментів, ви можете створювати анімаційні ключові кадри переважно за допомогою трьох програм:
Inkscape: відкритий код, має безліч функцій, його вдосконалений пакет для редагування векторів складається з людей, які брали участь у робочій групі SVG. Посилання на формат SVG. Непросто навчитися.
Adobe Illustrator: комерційне, дуже потужне програмне забезпечення для векторного малювання, воно пропонує безліч функцій, які ще не підтримуються SVG, але воно також має найгіршу сумісність із форматом. Вам часто потрібно буде вручну редагувати експортований файл SVG, щоб виправити безладний ілюстратор. Але він дуже популярний в художній школі, і всі графіки знають, як ним користуватися.
Affinity Designer: Це комерційне програмне забезпечення типу Illustrator, але з відмінною сумісністю SVG, майже на рівні Inkscape. Користувацький інтерфейс набагато привітніший, і зараз він стає дуже популярним серед артистів SVG.
SVG ANIMATION EDITORS
Наразі єдиним редактором анімації SVG є такий:
- Adobe Animate CC: колишній Adobe Flash Pro повністю переписав Adobe, щоб перейти від застарілої флеш-анімації до сучасної SVG-анімації. Ви можете експортувати отримані анімації SVG разом із власною бібліотекою javascript або вибрати збереження у SVG + SMIL за допомогою плагінів типу "flash2svg". Цей останній варіант дуже ефективний, я завжди використовую його замість роздутого рідного експортера.
Завантажити безкоштовний плагін можна звідси:
https://github.com/TomByrne/Flash2Svg
Або встановіть його на панелі плагінів Adobe:
https://creative.adobe.com/addons/products/7232
На жаль, Adobe Animate CC є комерційним. Є безкоштовні програми з альтернативною анімацією з відкритим кодом, але я спробував їх усі, і вони все ще смокчуть IMHO. Будемо сподіватися на майбутнє.
Посилання:
Моя більш вичерпна публікація в блозі на тему: https://medium.com/@fmuaddib/the-following-are-the-possible-ways-to-create-professional-animations-in-svg-9d4caca5f4ec
Справа посилається на snap.svg:
/programming/35727635/adobe-animate-snap-svg-plugin-huge-files