Question

我在http://jsfiddle.net/emanuensis/NNvjA/尝试了一个简单的SVG图形的SMIL动画。这个想法是每个mouseover个单词向上或向下都会导致黄色圆盘向那个方向穿梭而停止短路由mouseout事件确定的方式......等待mouseover来自该位置。{/ p>

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

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

第一个A freezes属性的值，在第一个值的最后一个事件（可能有许多总是重新上线）达到它的类型（向上或向下）。即B从那个位置开始（家）。

即使在第一个A freezes中也不是添加剂。即每次活动都在穿梭之前回家。

也许还有另一种方法可以在短时间内强制有效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>.

Answer 1

你想要的是not how SMIL works unfortunately。

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

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

动画中`fill =“冻结”失败

1 个答案: