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

发布于 2024-10-13 10:33:16 字数 446 浏览 9 评论 0原文

我试图让一个点从白色渐变为红色，然后从白色渐变为红色。

这就是我到目前为止所拥有的：

<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" />

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

原文

I am trying to have a dot fade from white to red and then from white to red.

This is what I have thus far:

<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" />

I want the second animation to begin when the first one ends, I know this is possible, I just can't figure it out.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蓝眸 2024-10-20 10:33:16

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

<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 中所需的事件列表（最左边标有“事件名称”的列适用于此处）。

如果您不害怕规范，请参阅begin 属性的完整语法了解所有详细信息。

Using your example, here's how:

<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" />

or as an equivalent alternative without the xlink:href syntax:

<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>

So, basically just add the id of the element you want to trigger the other animation from and add a ".end" suffix. You can also specify ".begin" to trigger on the beginning of an animation, or add a time offset, e.g begin="someId.end+2s".

It's also possible to use events to trigger animations, the syntax is similar: id followed by a dot and then the name of the event and optionally a time offset. See the list of events that are required in SVG 1.1 here (the leftmost column labeled "Event name" is what applies here).

If you're not scared of specifications see the full syntax of the begin attribute for all the details.

回复收藏 0 原文

~没有更多了~