Guide
About this tool
I've left a short tutorial here to get you started with this tool.
The tool is very simple. Essentially, the animation editor simply copies the written markup and pastes it into the page, which (depending on whether it's written correctly)
starts the animation.
Another editor, only for viewing the source code of the image itself. Both editors
use the external ACE library. A wonderful, fast, and lightweight library for editing
code in the browser.
All animation code is written to the end of the edited fileand wrapped in a separate group with id="smil_svg-animation-editor-layer"
How to make and apply an animations?
No need to search for apply buttons; the editor automatically saves and applies written animations. Since the editor saves
all animations at the end of each edited image, your approach to writing animations should also match it.
That is, animations nested within elements are not supported. animations can only be applied to elements that have a corresponding selector or ID specified in the href attribute.
How to find out which element has which ID?
For this purpose, I wrote a small extension for this tool, which highlights paths to the desired elements to animate, plus the ability to copy any of them. This is done as follows.
As a result, the selected item will remain highlighted.
You hover over the desired element and click until the desired element is selected.
After the last element is selected, the next click will circle and select the topmost element.
What to do next?
Once you've created the desired SVG animation, image, simply click the download button below it.
Also, if you need to refine the animations later, you can simply import this file back. Because all animations are stored in a separate location, they are easy to play in the editor.
Reviews
(0)