2

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

这是代码；

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

4

2 回答 2

1

没有真正的问题（它做我应该相信的事情），所以不是真正的解决方案。但我会尝试强调正在发生的事情，以及混乱在哪里。我认为这是因为如果您愿意，则将矩形的 rotate="auto" 和 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>
于 2014-01-16T14:32:39.847 回答
0

一个很好的问题。当我第一次使用 animateMotion 时，我很困惑，因为我的矩形神秘地从视图中消失了，并且只有在动画结束时才返回到它们的原始位置（幸运的是，我没有使用 fill="freeze"）。问题是所有教程和示例都对动画对象使用 x="0" 和 y="0"，这并没有多大帮助。

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

在此处输入图像描述

于 2014-01-16T15:36:28.567 回答