SnapSvg 中的定时动画

Question

我目前正在使用 SnapSvg，但在动画方面遇到了一些问题。我有一个元素说圆圈，并希望它在页面加载 10 秒后以动画淡入淡出的形式出现。我们可以像在 HTML5 SVG

中那样执行它

<circle id="c1" cx="50" cy="30" r="26" fill="#ff0000" opacity="0" />
<set xlink:href="#c1" attributeName="opacity" attributeType="CSS" from="0" to="1" />

在 SnapSVG 中我们也可以创建没有时间的动画如下：

var c1=page.circle(50,30,26);
c1.attr({
fill:"#ff0000",
opacity:0
});
c1.animate({opacity:1},1000);

但是我实在无法在第二种情况下应用计时。有人请帮忙。

Answer 1

您可以使用 setInterval 向 SVG 添加不透明度步骤，从而模拟褪色。

这可能会给你一个提示：（假设你有一个带有 id="c1" 的元素：

//Function that fades out elements
function fadeOutElement(elementId,time){

    var element = document.getElementById(elementId);
    var opacity = 1;

    function fadeOut(){ 
        opacity = opacity - 0.01;
        element.setAttribute('opacity',String(opacity));
        //clear interval when opacity reaches 0;
        if (opacity<=0) clearInterval(fadeInterval);
    }
    var fadeInterval = setInterval(function(){fadeOut()},time);
}

//call function and pass arguments, id of element and the interval time for each step
fadeOutElement('c1',1);

这是上述代码段的 JSFiddle

注：然而，这不使用 snap.svg 方法，因为您希望在整个过程中编写统一代码，所以最好使用这些方法。所以 snap.svg 解决方案会更好。

Answer 2

我对这个话题做了很多研究，后来知道@lan 是绝对正确的。！

这个问题唯一的解决办法是：

setTimeout(function(){c1.animate({opacity:"1"},1000)},1500);

其中setTimeout()函数的第二个参数是动画开始的时间。您还可以使用此方法放置尽可能多的动画。

SnapSvg 中的定时动画

Animation with timing in SnapSvg

html

svg

snap.svg