path animation
katkitty
Create svg path animation from frames. A path can be animated as follows: <path d="{orignal frame}"> <animate attributeName="d" attributeType="XML" begin="0s" dur="0.73" repeatCount="2" values="{frame1};{frame2}[;{framen}]"> </path> Most browsers will draw the path, then animate it, interpolating between the paths in the animate values list. Some i-phone browsers do not animate. Grrr. To use: Place each frame of the animation in a layer named 'frame{n}'. Each of these layers should have the same number of paths, and each path should have the same number of points as the corresponding path in other layers. The animation is applied to the paths in the first layer in the sequence, so the properties of that layer are used. Animations with different numbers of frames can be put into different sequences, named 'sequence{n}', using sub-groups: Layers: > not_animated_layer1 > sequence1 >> frame1 >>> path1a >>> path2a >> frame5 >>> path1b >>> path2b >> frame2 >>> path1c >>> path2c >> frame4 >>> path1d >>> path2d > sequence5 >> frame >> frame >> frame NOTE, any numbers on frames or sequence are ignored. The z order of frames and paths determine their position in the animation. SUGGESTION: Set all frames but the first to not display or even delete them before using the animated SVG in a browser. Experiment with different duration times for each path. NOTE: The pop-up box does not close after creating the animate node. The node appears under the paths in the first frame of each sequence. NOTE: Inkscape does NOT run the animation! You need to load the svg into a web browser to see it.
Comment here...
