Animation SVG中的情感缓和

我想对animateMotion标记应用缓和

我不清楚哪些属性与形状动画相关：如果我理解得很好，则需要calcMode=“spline”，以及关键点时间和关键点样条线的定义；但关键点样条线和值的使用又如何呢

但是，我尝试在动画中插入计时，但出现了一些问题：

        <g style="transform-origin:50%;transform: rotate(180deg);">
          <path id="verticalMotionPath" d="m 100,100 0, 50" stroke-width="5px" stroke="red" fill="none" stroke-linecap="round" stroke-linejoin="round" />
          <circle cx="0" cy="0" r="5" fill="#333333">
            <animateMotion dur="0.2s" repeatCount="once" fill="freeze" calcMode="spline" keyPoints="0.25;0.50;0.75;1" keyTimes="0;0.25;0.75;1">
              <mpath xlink:href="#verticalMotionPath"/>
            </animateMotion>
          </circle>
        </g> 

从工具（如
中绘制的计时我会这样做，尽管我不使用
animateMotion
）

由于您的路径是由行组成的，您可以像这样定义
的值：

Your path's          d="M100, 100 L100, 47 146, 73"
the animation's  values="100, 100; 100, 47;146, 73"
您的路径是d=“m100100l10047146，73”
动画的值=“100100；10047；146，73”
这是一个工作示例：


您正在指定
calcMode=“spline”
，但尚未提供
keySplines
属性

可以从样条线编辑工具中复制键样条线的值

<circle cx="0" cy="0" r="5" fill="#333333">
  <animateMotion dur="2.2s" repeatCount="once" fill="freeze"
                 calcMode="spline" keyTimes="0;1" keySplines="0.1 0.8 0.9 0.1">
    <mpath xlink:href="#verticalMotionPath"/>
  </animateMotion>
</circle>



完整演示（我已经减慢了动画的速度，以便您可以看到它正在工作）



路径{
动画名称：animateDash；
动画持续时间：5s；
动画迭代次数：一次；
动画填充模式：正向；
}
@关键帧动画dash{
来自{stroke dasharray:02305}
到{stroke dasharray:2305,0}
}
谢谢！我不能很好地理解什么是
keyTimes
的关键时刻，只是设置了一个对象必须在动画中某个点的特定时间。在这种情况下，0表示开始，1表示结束。这就是这个动画所需要的全部。但是，如果您有一个更复杂的运动路径，您可能希望设置“多重关键点时间”（multile keyTimes），以便（例如）它在前三分之一的时间内变慢，在下三分之一的时间内变快，然后再变慢。但如果这样做，则需要向
关键点样条线添加更多样条线定义。谢谢！如果我理解得很好，我会检查这种方法，您可以使用值来定义形状的坐标和键采样时间；后者每个动作使用四个数字。是的。这4个数字定义了立方贝塞尔方程的2个控制点：x1 y1 x2 y2