3

我在http://jsfiddle.net/emanuensis/NNvjA/上尝试了一个简单 SVG 图形的 SMIL 动画，这个想法是每个mouseover向上或向下的单词都会导致黄色冰球朝那个方向穿梭，停了一小段路，由mouseout事件决定......并从该位置等待进一步mouseover的 s。

不幸的是，现实（在 FF 和 Chrome 中）并非如此。

ABA 形式（其中 A 是任意数量的 ups，B 是 down - 或 vv）导致第二个 A 的 noop。

第一个 Afreezes属性的值 在第一个它的类型（向上或向下）的最后一个事件（可能有许多总是重新归位）上获得的值。即B 从那个位置开始（归巢）。

即使在第一个 Afreezes中也没有加法。即在穿梭之前每个事件的家。

freeze也许还有另一种在短时间内强制有效的方法（即不是一直到最后——这是一个方向，而不是一个幅度。）

这里很繁琐

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <svg id="svg2"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       width="400" height="500"
       version="1.1">
    <text id="tup" x="48 " y="33" >up  </text>
    <text id="tdn" x="235" y="33" >down</text>
     <rect id="trect" style="fill:yellow;stroke:red;"
             width="20" height="20" x="75" y="0" rx="5" ry="5" >
    <animate id="tr"
       begin="tdn.mouseover"
       end="tdn.mouseout+1s"
       attributeName="x"
       additive="sum"
       fill = "freeze"
       restart = "whenNotActive"
       from=""
       to="50"
       dur="3s"
       repeatCount="1" />
      <animate id="rt"
       begin="tup.mouseover"
       end="tup.mouseout+1s"
       attributeName="x"
       additive="sum"
       fill = "freeze"
       restart = "whenNotActive"
       from=""
       to="250"
       dur="3s"
       repeatCount="1"/>
      </rect>
    </svg>

4

1 回答 1

3

不幸的是，您想要的不是 SMIL 的工作方式。

如果附加动画在其处于活动或冻结状态时重新启动，则动画的先前效果（即重新启动之前）将不再应用于属性。请特别注意，累积动画仅在动画的活动持续时间内定义。当动画重新开始时，所有累积的上下文都被丢弃，动画效果 F(t) 从重新开始的活动持续时间的第一次迭代开始再次累积。

您可以做的是使用 javascript 监听动画结束事件并将动画值复制回基值。

于 2014-01-02T01:01:44.757 回答