CODEWITHSUNDEEP
htmlsvgsnap.svg
Rivu Chakraborty
Rivu Chakraborty

Reputation: 1372

Animation with timing in SnapSvg

I am currently using SnapSvg and faced some problem in animation. I have an element say circle and want it to appear with fade in animation after 10 seconds of page loading. We can perform it like following in 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" />

In SnapSVG also we can create animation without timing as follow:

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

But I am really unable to apply timing on the second case. Somebody please help.

Upvotes: 1

Views: 1761

Answers (2)

Rivu Chakraborty
Rivu Chakraborty

Reputation: 1372

I have done many research on that topic and came to know that @lan was absolutely right.!

The only solution to this problem is:

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

Where the second argument in setTimeout() function is the time to start the animation. You can also put as many animations as you can with this with this method.

Upvotes: 1

nicholaswmin
nicholaswmin

Reputation: 22949

You could use setInterval to add opacity steps to your SVG thus simulating fading.

This might give you a hint: (assuming you have an element with 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);

Here's the JSFiddle for the above snippet

Note: This however does not use snap.svg methods which would be prefferable to use since you'd want to write uniform code throughout. So a snap.svg solution would be better.

Upvotes: 0

Related Questions