Векторная графика теперь захватывает Интернет и даже мобильные приложения. Значки, кнопки и элементы веб-страниц или мобильных приложений в настоящее время становятся все более ориентированными на вектор, отбрасывая растровые изображения из-за необходимости рендеринга на всех видах разрешений экрана, точек на дюйм, соотношений и т. Д., А также из-за полезной возможности «масштабировать» до Лучшее чтение страниц в мобильных браузерах сделало ресурсы растровыми изображениями более неприглядными и непригодными.

Итак, пришло время начать создавать анимированные иконки, фоны и элементы управления в SVG, но как вы анимируете файлы SVG?

Большая часть этого ответа также опубликована в этом связанном вопросе о том, как анимировать иллюстрации для Интернета.

Избегайте SMIL-анимации

Сара Соуэйдан, вероятно, лучший аниматор SVG в сети, написала: «Я знаю, что написала руководство по анимации SMIL, но, видя их будущее, я больше не использую их лично». Тебе тоже не следует.

Анимации SMIL не работают ни в одном IE, Edge, в некоторых мобильных браузерах и постепенно удаляются Chrome / Opera (хотя в последнее время команда Chrome заявила, что это устаревание временно приостановлено ). Вы должны избегать их использования в 99% случаев.

Используйте CSS для очень простых анимаций

SVG может быть в основном анимирован с использованием чистого CSS (включая использование :hoverсостояний, transforms, transitions и animations). Это планируется получить полную поддержку CSS анимации , но в настоящее время только некоторые из них поддерживается и может быть багги с проблемами кросса браузера.

Сара Соуэйдан говорит, что CSS отлично подходит для анимации SVG, но предпочитает JS, потому что помогает решить эти проблемы с несколькими браузерами. Таким образом, используйте его, когда можете, но не используйте JS, когда анимация более сложна или не работает в кросс-браузерном режиме.

Используйте JavaScript-анимацию, если CSS не будет работать

Большую часть времени SVG можно анимировать с помощью небольшого JavaScript без использования библиотеки анимации JavaScript. Анимация в JS имеет гораздо большую межбраузерную поддержку и довольно проста в использовании с некоторым базовым пониманием.

Для сложных анимаций, которые требуют использования временной шкалы или чего-то подобного, использование библиотеки, такой как GSAP, может быть очень полезным. Существует множество других библиотек анимации SVG, Snap.svg - еще одна большая библиотека, но большинство из них не справляются с анимацией почти так же легко и не так эффективно, как GSAP.

Для определенных типов анимации, использование определенного плагина JS, такого как GSph MorphSVG, может сэкономить вам немного времени, потому что они заботятся о кросс-браузерных проблемах и всех вычислениях. Тем не менее, большинство анимаций не требуют таких плагинов. См. «Руководство по альтернативам функциям SMIL» для получения дополнительной информации.

Также допустимо использовать полифилы для SMIL, но я устал от этого, потому что они не очень широко используются / тестируются. С учетом вышесказанного , Эрик Виллиджерс и FakeSmile являются двумя наиболее распространенными.

механическая обработка

Единственное программное обеспечение, с которым я сталкивался при экспорте в SVG + JS, - это плагин Adobe After Effects под названием Lottie (ранее Bodymovin), расширение Flash под названием Flash 2 SVG и небольшой онлайн-инструмент под названием SVG Circus . Кроме того, программные аниматоры, такие как Adobe Edge Animate, Adobe Animate CC или Animatron, экспортируют в анимации SMIL, которые не должны использоваться. Таким образом , это лучше иметь несколько разработчиков сделать SVG + CSS или SVG + JS анимации с использованием экспортированных SVGs из редактора . В Inkscape есть отличный ресурс, который содержит ссылки на учебники и примеры того, как это сделать.

Я уверен, что в будущем больше анимационных программ будет поддерживать экспорт в SVG + JS.

Некоторые другие важные заметки

• Важно помнить о производительности . Сара Драснер создала некоторые тесты производительности для SVG, которые показывают, что вы должны выбирать CSS-анимацию с аппаратным ускорением, когда это возможно, но использовать хороший подход JavaScript, когда это невозможно.

• Лучше использовать SVG в <object>теге или встраивать непосредственно в <svg>элемент XML, если он интерактивный, и в качестве фонового изображения, если он не интерактивный, но есть и другие способы сделать это .

Чтобы получить более полное представление о веб-анимации, прочитайте статью Рэйчел Набор в части «Список» . Для некоторых дополнительных советов по инструментам этот пост очень полезен, хотя я не согласен со всеми чувствами, особенно с тем, как он представляет SMIL-анимацию.

Я всегда считал, что полагаться на что-либо, кроме библиотек JS, очень сложно для поддержки и поддержки WRT.

Я всегда использовал D3.js . Первоначально он был создан для создания интерактивных элементов SVG / DOM из наборов данных. Однако вы можете изменить SVG / DOM, включенный в страницу, при условии, что JS имеет к ней доступ.

Я использую в различных проектах для создания / анимации SVG / DOM. некоторые примеры включают программные панели в реальном времени, визуализации карт, преобразования DOM и создание файлов SVG для включения в PDF-файлы. Я видел это по всей сети. На сайте есть множество примеров и ссылок на страницы, которые его использовали.

Я рекомендую его, потому что он довольно совместим с браузерами, имеет активное сообщество и прост в освоении. Взгляните на веб-страницу и обратите внимание на реальный мир, чтобы увидеть небольшой пример того, что вы можете с ним сделать.

Ниже приведены возможные способы анимации SVG:

SVG SMIL АНИМАЦИИ

SVG может быть анимирован с помощью его мощного собственного языка разметки, называемого SMIL, который экспортируется непосредственно из инструментов анимации, таких как Adobe Animate CC + плагин flash2svg.

Чтобы анимировать SVG с помощью SMIL даже в браузерах, в которых отсутствует поддержка, вам просто нужно использовать SMIL polyfill.

Polyfill - это специальный фрагмент кода javascript, который обеспечивает поддержку функций, отсутствующих в браузере, переводя оригинальную кодировку в ту, которую может понять браузер.

Polyfill, созданный Эриком Виллигерсом, делает именно это: он переводит SMIL в API веб-анимации, который поддерживается даже браузером Microsoft. Это настолько эффективно, что разработчики Google Chrome решили отказаться от встроенной поддержки SMIL и сосредоточиться на веб-анимации, оставив Эрику Виллиджерсу задачу выполнить воспроизведение файлов SMIL в Chrome.

Кто-то неверно истолковал это как оскорбление SMIL в Chrome и раскритиковал разработчиков за этот выбор. Но это было не настоящее осуждение, а просто перемещение работы по интерпретации SMIL на уровне полифилла.

Фактически сами разработчики Chrome цитировали полифилл Виллигерса в самом официальном объявлении о своем намерении осудить SMIL.

Так что, если вы читаете в Интернете о гибели SMIL, не волнуйтесь. «Смерть» СМИЛ была сильно преувеличена. Это больше похоже на возрождение.

Чтобы использовать SMIL во всех браузерах, в том числе в IE и EDGE, вам просто нужно добавить этот javascript polyfill на вашу веб-страницу:

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 БИБЛИОТЕКИ

Путь javascript более сложный. Прежде всего, вы должны быть программистом JavaScript. Тогда вам придется выбирать между многими библиотеками. Более популярными являются:

• SnapSVG http://snapsvg.io
  Эта библиотека является преемницей старой и популярной библиотеки анимации Raphael, созданной тем же автором. Очень стабильный, но он конвертирует SVG во внутренний формат во время выполнения, чтобы оживить его. Варианты морфинга также очень простые, просто линейная интерполяция. (ПРИМЕЧАНИЕ. Существует также плагин snap.svg для Adobe Animate CC, но экспортируемые файлы раздуты. Экспортер создает одну команду snap 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 АНИМАЦИОННЫЕ РЕДАКТОРЫ

В настоящее время единственный редактор 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 является коммерческой. Есть бесплатные альтернативные анимационные приложения с открытым исходным кодом, но я попробовал их все, и они все еще отстой ИМХО. Будем надеяться на будущее.

Ссылки:
Мой более исчерпывающий пост в блоге на эту тему: 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