Svg alternate animateMotion

user_3621350 0
Viewed 30

I want to have repeating alternate direction for the animation

<animateMotion keyPoints="0;1;0" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" rotate="auto" >
  <mpath href="#path1"/>
</animateMotion>

Keypoints and KeyTimes are not working

Full code:

<svg width="200" height="200" viewBox="0 0 700 700">
  <g>
      <path id="path1" d="M200,350 C 200,440 400,150 400,250 M200,350"
            fill="none" stroke="blue" stroke-width="7.06"  />

      <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
            fill="yellow" stroke="red" stroke-width="7.06"  />

        <animateMotion keyPoints="0;1;0" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" rotate="auto" >
          <mpath href="#path1"/>
        </animateMotion>
  </g>     
</svg>

svg
1 Answers

First there is an issue with your code. You are animating a group of shapes and you are using one of those shapes as mpath.

In the next examples I'm animating the triangle over the integral like shape. In order to animate the triangle in both ways I'm rewriting the mpath so that the path will reverse to the starting point.

svg{width:90vh}
<svg viewBox="0 0 700 700">
<path id="path1" d="M200,350 C 200,440 400,150 400,250 C400,150 200,440 200,350" fill="none" stroke="blue" stroke-width="7.06"  />
 
      <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06"  >
        <animateMotion keyPoints="0;1;0" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" rotate="auto" >
          <mpath href="#path1"/>
        </animateMotion>
   </path>
</svg>

However if you want the triangle to stay the same side of the curve when reversing, in this case I'm using 2 animations, each one begining when the previous one ends. For the second animation I'm using rotate="auto-reverse"

svg{width:90vh}
<svg viewBox="0 0 700 700">

  <path id="path1" d="M200,350 C 200,440 400,150 400,250" fill="none" stroke="blue" stroke-width="7.06" />
  <path id="path2" d="M400,250 C400,150 200,440 200,350" fill="none" stroke="blue" stroke-width="7.06" />

  <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06">
    <animateMotion id="a1" dur="3s" rotate="auto" begin="0;a2.end">
      <mpath href="#path1" />
    </animateMotion>

    <animateMotion id="a2" dur="3s" rotate="auto-reverse" begin="a1.end">
      <mpath href="#path2" />
    </animateMotion>
  </path>
</svg>

Please observe that the path for the second animation is the path for the first animation reversed.

user_78973950
Related