沿路径来回制作圆动画

Question

嗨，我有一个基本的能量流图如下

Svg 在这里

我将如何让彩色圆圈沿着彩色路径移动？ 我尝试过使用类似的东西

<animateMotion
                        dur="10s"
                        repeatCount="indefinite"
                        path="m 281.66783,66.052163 c -58.15279,11.63055 -95.43899,64.652217 -95.43899,64.652217"
                    />

但这会使黄色圆圈消失。我还认为该方法不允许不同的方向。

我需要为圆圈设置动画，以便它们沿着路径以不同的速率向两个方向移动。这是否需要 javascript 或者可以在 svg 中完成以保持激活动画的代码最少？

感谢您的指导

Answer 1

看起来您需要（数组）

keyPoints

和

keyTimes

上的

<animateMotion>

进行定位。

添加

<animate>

进行其他设置。

<svg viewBox="0 0 200 100">
    <path id="PATH" stroke="black" fill="none" d="M10 50H200" />
    <circle r="10" fill="red">
      <animateMotion dur="5s" keyPoints="0;1;0" keyTimes="0;.5;1" 
                     calcMode="linear" repeatCount="indefinite">
        <mpath href="#PATH" />
      </animateMotion>
      <animate 
         attributeName="fill"
         attributeType="XML"
         values="red;green;yellow;hotpink;blue"
         keyTimes= "0;0.4;0.6;0.8;1"
         dur="10s"
         repeatCount="indefinite"/>
      <animate 
         attributeName="r"
         attributeType="XML"
         values="10;15;10"
         keyTimes= "0;0.5;1"
         dur="1s"
         repeatCount="indefinite"/>
    </circle>
</svg>