Animation 如何在另一个动画结束时启动动画?
我试着让一个点从白色变为红色,然后从白色变为红色 这就是我迄今为止所做的:Animation 如何在另一个动画结束时启动动画?,animation,svg,fade,smil,Animation,Svg,Fade,Smil,我试着让一个点从白色变为红色,然后从白色变为红色 这就是我迄今为止所做的: <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 attr
<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" />
以您的示例为例,下面介绍如何:
<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" />
因此,基本上只需添加要触发其他动画的元素的id,并添加“.end”后缀。您还可以指定“.begin”在动画开始时触发,或添加时间偏移,例如begin=“someId.end+2s”
也可以使用事件触发动画,语法类似:id后跟一个点,然后是事件名称,还可以选择时间偏移。请参阅SVG1.1中所需的事件列表(最左边的“事件名称”列适用于此处)
如果您不害怕规格,请参阅了解所有详细信息。这在Chrome(34)中目前不起作用。编辑:我的错误,工作正常。如何使用onrepeat属性?你能解释一下吗example@RiteshDhuri在本例中,onrepeat属性根本不起任何作用。是否可以用javascript复制此行为?
<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>