Frame Animation Sequence
Source: https://github.com/yttiktak/inkscape_extension_animate
Create svg path animation from frames: Place each frame of the animation in a layer named 'frame'. 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', using sub-groups:
Layers structure example
not_animated_layer1
sequence
frame
path1a
path2a
frame
path1b
path2b
frame
path1c
path2c
frame
path1d
path2d
sequence
frame
frame
frame
Use layer named exactly 'frame' and groups named exactly 'sequence', not, eg, frame1 frame2 frame3 !
SVG Example
The svg:animate elements were created using this extension
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
sodipodi:docname="test.svg"
inkscape:version="1.1 (c68e22c387, 2021-05-23)"
id="svg5"
version="1.1"
viewBox="0 0 196.29599 203.26439"
height="203.26439mm"
width="196.29599mm"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="0.63250561"
inkscape:cx="222.92292"
inkscape:cy="560.46934"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="3" />
<defs
id="defs2" />
<g
inkscape:label="sequence"
inkscape:groupmode="layer"
id="sequence"
transform="translate(-13.540733,-0.43540987)">
<g
inkscape:groupmode="layer"
id="1"
inkscape:label="frame">
<path
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 53.238722,112.56222 c -0.427144,2.82588 -39.597237,48.85805 -39.597237,48.85805"
id="path1a">
<animate
attributeName="d"
attributeType="XML"
begin="0"
dur="9.1"
repeatCount="indefinite"
values="m 53.238722,112.56222 c -0.427144,2.82588 -39.597237,48.85805 -39.597237,48.85805;
M 90.991176,37.047614 C 90.564032,39.873491 51.393939,85.905662 51.393939,85.905662" />
</path>
<path
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 58.62681,152.54616 24.761296,51.09595"
id="path2a">
<animate
attributeName="d"
attributeType="XML"
begin="0"
dur="9.1"
repeatCount="indefinite"
values="m 58.62681,152.54616 24.761296,51.09595;
M 96.379264,77.031553 121.14056,128.1275" />
</path>
</g>
<g
inkscape:groupmode="layer"
id="2"
inkscape:label="frame">
<path
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 90.991176,37.047614 C 90.564032,39.873491 51.393939,85.905662 51.393939,85.905662"
id="path1b" />
<path
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 96.379264,77.031553 121.14056,128.1275"
id="path2b" />
<g
id="3"
inkscape:groupmode="layer"
inkscape:label="frame">
<path
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 179.5683,0.455182 C 179.14115,3.281059 139.97106,49.31323 139.97106,49.31323"
id="path1c" />
<path
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 184.95639,40.439121 24.76129,51.095947"
id="path2c" />
</g>
</g>
</g>
</svg>
Visual Output:
Keine Kommentare