Question

我想对animateMotion标签应用缓动。

我对哪些属性与形状动画相关感到困惑：如果我很好理解，则需要 calcMode =“ spline” 以及 keyTimes 和 keySplines ;但是如何使用 keySplines 和 values ？

但是，我试图在动画中插入时间，但是出了点问题：

        <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>

我的目标是将this example的时间应用于this one之类的工具

Answer 1

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

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>

完整演示（我放慢了动画的播放速度，因此您可以看到它正在运行）。

<!DOCTYPE HTML>
  <html>
    <body>
      <?xml version="1.0"?>
    <svg width="400" height="400" viewBox="0 0 200 200"
        xmlns="http://www.w3.org/2000/svg" version="1.1"
        xmlns:xlink="http://www.w3.org/1999/xlink" style="background:aquamarine">
        <style>
        path {
          animation-name:animateDash;
          animation-duration:5s;
          animation-iteration-count:once;
          animation-fill-mode:forwards;
        }
        @keyframes animateDash {
          from{stroke-dasharray:0,2305}
          to  {stroke-dasharray:2305,0}
        }
        </style>

        <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="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>
        </g>

        <g style="transform-origin:50%;transform: rotate(60deg);">
          <path id="verticalMotionPath" d="m 100,100 0, 50" stroke-width="5px" stroke="white" 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">
              <mpath xlink:href="#verticalMotionPath"/>
            </animateMotion>
          </circle>
        </g>

        <g style="transform-origin:50%;transform: rotate(-60deg);">
          <path id="verticalMotionPath" d="m 100,100 0, 50" stroke-width="5px" stroke="blue" 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">
              <mpath xlink:href="#verticalMotionPath"/>
            </animateMotion>
          </circle>
        </g>

    </svg>
  </body>
</html>

Answer 2

尽管我不使用animateMotion，这是我会这样做的方式。

由于路径由线条组成，因此您可以像这样为<animateTransform>定义值：

Your path's          d="M100, 100 L100, 47 146, 73"
the animation's  values="100, 100; 100, 47;146, 73"

这是一个有效的示例：

<svg width="400" height="400" viewBox="0 0 200 200" style="background:aquamarine">

        <path id="theMotionPath" d="M100, 100 L100, 47 146, 73" stroke-width="5px" stroke="antiquewhite" fill="none" stroke-linecap="round" stroke-linejoin="round" />
  
  <circle r="5" >   
     <animateTransform 
    	attributeType="XML" 
        attributeName="transform" 
        type="translate"
        values="100,100; 100,47; 146,73" 
        keySplines= ".5 0 .5 1; 0 .75 .25 1";
        calcMode="spline" 
        dur="4s" 
        repeatCount="indefinite" />
  </circle>

</svg>

keySplines的长度必须等于值的长度-1。在这种情况下，values.length = 3从而keySplines.length = 2，即：定义了从第一个值到第二个值的移动通过第一个键样条；从第二个值到第三个值的移动由第二个键样条线定义。 keySplines的每个值都定义了贝塞尔曲线的2个控制点。

简化SVG中的animateMotion

2 个答案: