Direkt zum Hauptinhalt

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: