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

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了解所有细节。