2

我有一个 SVG 图形，我正在通过animateTransform. 它动画，然后停留在屏幕上，直到您单击它，然后它缩小到 0 并且无法恢复。我想要做的是在最后一个动画结束（缩放到 0）后 2 秒内重新启动整个动画序列，所以它会重新开始动画。

我怎样才能做到这一点？谢谢！

<!-- Keep scaled at 0 on load -->
<animateTransform 
    attributeName="transform"
    attributeType="XML" 
    type="scale" 
    from="0" 
    to="0"
    dur="0.5s"/>
<!-- Scale up after 0.5 seconds -->
<animateTransform 
    attributeName="transform"
    attributeType="XML" 
    type="scale" 
    from="0" 
    to="1"  
    begin="0.5s"    
    dur="0.3s"
    fill="freeze"
    additive="sum"/>
<!-- Scale down on click -->
<animateTransform id="animatFinished"
    attributeName="transform"
    attributeType="XML" 
    type="scale" 
    from="1" 
    to="0" 
    begin="click" 
    dur="0.6s"
    fill="freeze"
    additive="sum"/>
4

2 回答 2

0

我们需要在 onclick 动画结束后的 0 秒和 2 秒开始第一次转换，这给了我们begin="0s;animatFinished.end+2s"

第二个动画需要在第一个动画结束时开始，否则它只会触发一次。

并且使用additive="sum" 会给您带来问题，因为动画最终会尝试将比例添加到比例为0 的东西上，而0 x value = 0 什么也不做。

所以，我认为这就是你要找的：

<!-- Keep scaled at 0 on load -->
<animateTransform id="one"
    attributeName="transform"
    attributeType="XML" 
    type="scale" 
    from="0" 
    to="0"
    begin="0s;animatFinished.end+2s"
    dur="0.5s"
    fill="freeze"/>
<!-- Scale up after 0.5 seconds -->
<animateTransform
    attributeName="transform"
    attributeType="XML" 
    type="scale" 
    from="0" 
    to="1"  
    begin="one.end"
    dur="0.3s"
    fill="freeze"/>
<!-- Scale down on click -->
<animateTransform id="animatFinished"
    attributeName="transform"
    attributeType="XML" 
    type="scale" 
    from="1" 
    to="0" 
    begin="click" 
    dur="0.6s"
    fill="freeze"/>
于 2013-08-19T21:30:30.247 回答
0

获取要重新启动的 animateTransform 元素并使用 beginElement() 方法

const animateEl = document.querySelector("#animatFinished");
animateEl.beginElement();
于 2020-04-05T10:01:47.420 回答