CODEWITHSUNDEEP
animationsvg
airnan
airnan

Reputation: 635

svg synced animate elements

I need to animate 6 svg circles that are dynamically created 1s appart from each other. They should start as a yellow gradient and fade out to a red gradient in 6s. But instead of starting yellow when they are created, they take the value the first element has at that moment so they all end up showing the same synced animation. This is what i'm doing:

 var svgElem = document.getElementById('svgElem');
var svgDefs = document.getElementById('svgDefs');
var count = 0;
function createNewElement(){
    var rnd;

    rnd = Math.floor(Math.random()*6);
    rnd = 0;
    createRadialAnimation(count, rnd);

    var circle = document.createElementNS(svgElem.namespaceURI,'circle');
    circle.setAttribute('cx', 100+Math.floor(Math.random()*300));
    circle.setAttribute('cy', 100+Math.floor(Math.random()*300));
    circle.setAttribute('r', 10);
    circle.setAttribute('fill','url(#grad'+count+')');
    var animate = document.createElementNS(svgElem.namespaceURI,'animate');
    animate.setAttribute('attributeName', 'r');
    animate.setAttribute('from', '10');
    animate.setAttribute('to', '10');
    animate.setAttribute('repeatCount', 'indefinite');
    animate.setAttribute('fill', 'freeze');
    animate.setAttribute('dur', '6s');
    animate.setAttribute('begin', rnd+'s');
    circle.appendChild(animate);
    svgElem.appendChild(circle);

    count +=1;
    if(count<6){
        setTimeout(createNewElement, 2000);
    }
}

function createRadialAnimation(num, rnd){
    var radialG = document.createElementNS(svgElem.namespaceURI,'radialGradient');
    radialG.setAttribute('id', 'grad'+num);
    radialG.setAttribute('cx', '50%');
    radialG.setAttribute('cy', '50%');
    radialG.setAttribute('r', '50%');
    radialG.setAttribute('fx', '50%');
    radialG.setAttribute('fy', '50%');
    var stop = document.createElementNS(svgElem.namespaceURI,'stop');
    stop.setAttribute('offset', '0%');
    stop.setAttribute('stop-color', 'rgb(255,228,129)');
    stop.setAttribute('stop-opacity', '0');
    radialG.appendChild(stop);
    stop = document.createElementNS(svgElem.namespaceURI,'stop');
    stop.setAttribute('offset', '100%');
    stop.setAttribute('stop-color', 'rgb(211,90,67)');
    stop.setAttribute('stop-opacity', '1');
    radialG.appendChild(stop);
    var animate = document.createElementNS(svgElem.namespaceURI,'animate');
    animate.setAttribute('attributeName', 'stop-color');
    animate.setAttribute('from', 'rgba(255,228,129,1)');
    animate.setAttribute('to', 'rgba(211,90,67,1)');
    animate.setAttribute('repeatCount', 'indefinite');
    animate.setAttribute('dur', '6s');
    animate.setAttribute('begin', rnd+'s');
    animate.setAttribute('fill', 'freeze');
    stop.appendChild(animate);
    animate = document.createElementNS(svgElem.namespaceURI,'animate');
    animate.setAttribute('attributeName', 'stop-opacity');
    animate.setAttribute('from', '1');
    animate.setAttribute('to', '0');
    animate.setAttribute('repeatCount', 'indefinite');
    animate.setAttribute('dur', '6s');
    animate.setAttribute('begin', rnd+'s');
    animate.setAttribute('fill', 'freeze');
    stop.appendChild(animate);

    svgDefs.appendChild(radialG);
}

createNewElement();

Here is a link to see what's happening. http://jsfiddle.net/cpUbS/2/

Any idea of what I'm missing? thanks!

Upvotes: 3

Views: 260

Answers (1)

Robert Longson
Robert Longson

Reputation: 123985

SVG documents have a timeline which by default starts at 0 seconds when the first thing to animate is created and then increments.

You are creating all of your elements with a begin of 6s so when the document timeline reaches 6 seconds they all start animating in sync.

Increment the begin of each element so that they start at the point of the timeline you want them to.

Upvotes: 1

Related Questions