Туториал
Про инструмент
Здесь я оставил небольшой туториал для ознакомления с этим инструментом.
Инструмент очень простой. По факту, редактор для анимаций просто копирует написанную
разметку и вставляет в страницу и та (в зависимости от того, правильно ли она написанна),
запускает анимацию.
Другой редактор, только для ознакомления с исходным кодом самого изображения. Оба редактора
работают при помощи внешней библиотеки ACE. Прекрасная, быстрая и лёгкая библиотека для редактирование
кода в браузере.
Весь код анимаций записывается в конец редактируемого файла и оборачивается в отдельную группу с id="smil_svg-animation-editor-layer"
Как писать и применять анимации?
Не нужно искать кнопки применить, редактор автоматически сохраняет и применяет написанные анимации. Так как редактор сохраняет
все анимации в конце каждого редактируемого изображения, подход к написанию анимаций тоже должен ему соответствовать.
То есть, анимации вложенные в элементы не поддерживаются, применить анимации можно будет только к тем элементам к которым будет
соответствующий слектор или ID прописанный в атрибуте href.
Как узнать, какой и у какого элемента, ID?
Для этого я написал небольшое расширение для данного инструмента, которое подсвечивает пути до
желанных для анимации элементов, плюс возможность копирование любого из них. Делается это следующим образом.
В результате, выбранный элемент останется подсвеченным.
Ты наводишься на нужный элемент и кликаешь до тех пор, пока не будет выбран необходимый.
После того, как будет выбран последний элемент, следующий клик сделает круг и выберет самый верхний элемент.
Что делать дальше?
После того, как у тебя получилась требуемая анимация SVG изображения, просто нажми кнопку скачать под изображением.
Так же в последующем, если потребуется доработать анимации, можно просто импортировать данный файл обратно. Из-за того,
что все анимации хранятся в отдельном месте их легко воспроизвести в редакторе.
Отзывы
(0)