Question

我试图从白色到红色然后从白色到红色点亮淡出。

这就是我到目前为止：

<circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485"/>
<animate id="testies" attributeName="fill" from="#ED1C24" 
to="#fff" xlink:href="#test" dur="2s" fill="freeze" />
<animate attributeName="fill" from="" to="#ED1C24"
xlink:href="#test" begin="" onrepeat=" dur="2s" fill="freeze" />

我希望第一个动画在第一个动画结束时开始，我知道这是可能的，我只是想不出来。

Answer 1

使用您的示例，方法如下：

<circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485"/>
<animate id="testies" attributeName="fill" from="#ED1C24" to="#fff"
  xlink:href="#test" dur="2s" fill="freeze" />  
<animate attributeName="fill" from="" to="#ED1C24" xlink:href="#test"
  begin="testies.end" dur="2s" fill="freeze" />

或作为没有xlink:href语法的等效替代方法：

<circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485">
  <animate id="testies" attributeName="fill" from="#ED1C24" to="#fff"
    dur="2s" fill="freeze" />  
  <animate attributeName="fill" from="" to="#ED1C24"
    begin="testies.end" dur="2s" fill="freeze" />
</circle>

因此，基本上只需添加要触发其他动画的元素的id，并添加“.end”后缀。您还可以指定“.begin”在动画开头触发，或者添加时间偏移，例如begin="someId.end+2s"。

也可以使用事件来触发动画，语法类似：id后跟一个点，然后是事件的名称和可选的时间偏移。请参阅SVG 1.1 here中所需的事件列表（标有“事件名称”的最左侧列适用于此处。）

如果您不害怕规格，请参阅full syntax of the begin attribute了解所有详细信息。

如何在另一个动画结束时开始动画？

1 个答案: