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

我对这个话题进行了很多研究，并且知道@lan是绝对正确的。！

解决此问题的唯一方法是：

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

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

Answer 2

您可以使用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解决方案会更好。

在SnapSvg中定时动画

2 个答案: