9

我正在尝试使用 <set> 标签设置形状的旋转角度，但对于我的生活，我无法弄清楚。什么是正确的语法？

<set id="smallGearJump" 
         attributeName="transform" attributeType="XML" type="rotate" 
         to="110 100 100" begin="1s" dur="1.7s" />

编辑：澄清 - 我试图将它设置为特定角度一段时间，而不是在那里设置动画。我希望它从 0 旋转跳到 110（在上面的这个例子中）

4

4 回答 4

2

你不需要animateTransform元素animate。您可能需要根据需要修改additive和fill属性。

<animateTransform id="smallGearJump"
                attributeName="transform" attributeType="XML"
                type="rotate" to="110 100 100" dur="1.7s" begin="1s"
                additive="replace" fill="freeze" />

请参阅W3C或MDN上的文档。

于 2012-03-25T13:04:38.750 回答
1

这只是解决您的问题的方法。发现setas的行为，当你给它错误的属性值时，它会触发onb​​egin事件，对元素没有任何作用。因此，使用它，我为“to”属性提供了错误的属性值。因此 set 命令会在 之后触发 begin 事件2s，但不会对元素应用任何转换。然后，在 onbegin 事件处理程序中，我得到了目标元素，在这种情况下是带有 id 的矩形c1。然后我对其应用所需的转换。（围绕中心旋转 110。）

onend 也是在 之后触发的5s。在其中，我测试填充属性值，并决定是否恢复应用的转换。

这可能是一种解决方法，但是在开始值、持续时间值方面没有妥协。

还

<set attributeName="transform" to="200" ... />在 x dir 中转换为 set 行为

<set attributeName="transform" to="200 100" ... />在 x 目录中转换 200 并在 y 目录中转换 100 并设置行为

但是找不到旋转的语法。

在这里放了一个小提琴http://jsfiddle.net/AA2tT/

于 2012-03-30T05:45:23.077 回答
1

如果您希望动画从一种状态跳转到另一种状态，请指定 calcMode="discrete"。比如这样：

<animateTransform attributeName="transform" type="rotate" to="110 100 100" dur="1.7s" begin="1s"
            calcMode="discrete" />
于 2013-03-16T16:03:08.880 回答
0

我找不到满意的答案。

我终于像这样编码了：

  • 将原始元素放在一个<defs>
  • 制作两个<use>元素，一个带有额外的旋转，另一个没有
  • <use>根据要求在动画期间将两者设置为可见或隐藏

例子：

<defs>
  <path id="example" d="..."/>
</defs>
<use xlink:href="#example" visibility="hidden">
  <set begin="0s" end="1s" attributeName="visibility" to="visible"/>
</use>
<use xlink:href="#example" visibility="hidden" transform="rotate(110 100 100)">
  <set begin="1s" end="3s" attributeName="visibility" to="visible"/>
</use>
于 2013-03-16T15:46:59.110 回答