Question

我想沿着路径设置动画形状，我已经设法创建了我想要的路径，但是当我为形状设置动画以沿路径移动时，它似乎沿着路径的第一部分反转。（原谅我，一点菜鸟）。

这是代码;

<svg>
    <rect x="-100" y="100" width="200" height="200" style="stroke: none; fill: #FFCC33;">
        <animateMotion path="M200,200
                       a-50,-50 0 0,0 0,-30
                       a-50,-50 0 0,1 0,-30"
                       begin="0s" dur="3s" repeatCount="indefinite" rotate="auto"/>
  </rect>
</svg>

我也提到了它，这可能会更好地将其置于上下文中http://jsfiddle.net/fcz69/

Answer 1

实际上并没有这样的问题（它应该做我应该相信的事情），所以不是真正的解决方案。但我会尝试强调正在发生的事情以及混乱的地方。我认为这是因为rotate =“auto”和rect的x，y被视为组合变换，如果你喜欢它沿着路径动画。如果将x，y更改为0,0将突出显示此内容。

为了让它更清晰一点，我将几个不同的x，y值组合在一起。它的效果与将旋转与旋转结合起来的效果相同。

你会看到绿色的东西看起来是如何反转的，只是当旋转发生时它会更远。

http://jsfiddle.net/fcz69/4/是一个快速举例说明发生的事情。

可以在这里找到animationMotion元素描述http://www.w3.org/TR/SVG/animate.html#RotateAttribute它值得在那里读“旋转”，但如果不习惯于矩阵，它可能需要一段时间才能解决它。

<svg width="600" height="600">
    <path d="M200,200
     a-50,-50 0 0,0 0,-30
     a-50,-50 0 0,1 0,-30" fill="none" stroke="black"/>

 <rect x="0" y="0" width="200" height="200"
    style="stroke: none; fill: #FFCC33;">
  <animateMotion
          path="M200,200
     a-50,-50 0 0,0 0,-30
     a-50,-50 0 0,1 0,-30"
          begin="0s" dur="3s" repeatCount="indefinite"
          rotate="auto"
        />
</rect>
<rect x="-100" y="100" width="200" height="200"
    style="stroke: none; fill: #FF0000;">
  <animateMotion
          path="M200,200
     a-50,-50 0 0,0 0,-30
     a-50,-50 0 0,1 0,-30"
          begin="0s" dur="3s" repeatCount="indefinite"
          rotate="auto"
        />
 </rect>
    <rect x="-200" y="200" width="200" height="200"
    style="stroke: none; fill: #00FF00;">
  <animateMotion
          path="M200,200
     a-50,-50 0 0,0 0,-30
     a-50,-50 0 0,1 0,-30"
          begin="0s" dur="3s" repeatCount="indefinite"
          rotate="auto"
        />
 </rect>

</svg>

Answer 2

一个很好的问题。当我第一次使用animateMotion时，我很困惑，因为我的矩形神秘地从视图中消失，只有在动画结束时才回到原来的位置（幸运的是，我没有使用fill =“freeze”）。问题是所有教程和示例都使用x =“0”和y =“0”表示动画对象，这没什么用。

真正发生的事情：当您沿路径设置对象动画时，其x和y位置指的是新坐标系。它的原点（点0,0）沿路径滑动，其轴（默认情况下）与全局轴平行 - x轴是水平的，y轴是垂直的。指定rotate =“auto”时，轴会旋转，因此x轴与路径相切。实际上，动画对象不仅旋转，而且遵循完全不同的路径。见这个草图：

enter image description here

沿路径发出SVG动画

2 个答案: