Question

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

我该怎么做？谢谢！

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

Answer 1

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

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

使用additive =“sum”会给你带来问题，因为动画最终会尝试将比例添加到比例为0且0 x值= 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"/>

Answer 2

获取要重新启动的animateTransform元素，并使用beginElement（）方法

const animateEl = document.querySelector("#animatFinished");
animateEl.beginElement();

重启整个SVG animateTransform序列？

2 个答案: