This one-minute video shows how to create a simple animation in macSVG with the <path> Element Shape Animation plug-in tool –
Start by creating a new SVG document.
Use the Path Tool to create a new <path> element, with “id” = “path1”. Press the “esc” key to end path drawing after the shape is completed.
With path1 selected, click the “++” button to duplicate the path. The duplicated path will have an “id” attribute value of “path2”.
Next, temporarily remove the visibility checkmark for path1, so that path2 is the only visible path.
Select path2, and use the Crosshair Cursor tool to change the shape of path2 in the web view.
After the changes to path2 are completed, remove the visibility checkmark from path2, and set the visibility checkmark for path1.
With path1 selected, choose the “Path Element Shape Animation Editor” in the pop-up menu list of plug-ins. Click the “Add Animate” to create a new <animate id=”animate1″> element within the path1 element, then click the “Manage Paths for Animate” to open the editor popover window.
Initially, the new <animate> element contains a copy of the path1 data. Drag-and-drop path2 from the Available Paths table to the Animation Paths table, below path1. The drag-and-drop another copy of path1 from the Available Paths table to the Animation Paths table, below path2. The sequence of the Animation Paths table items should be path1, path2, path1. Click the “Done” button to dismiss the path animation editor popover.
To view the animation in the main web view, set a checkmark in the “Animate” checkbox. The animation will start, and the animation timeline and current time marker will be updated.
Previous page: SVG <image> Elements
Next page: macSVG User Interface
Full index: macSVG User Guide