SVG同步动画元素

Question

SVG同步动画元素

3

我需要动画显示6个svg圆，这些圆是动态创建的，每个圆之间相隔1秒。它们应该从黄色渐变到红色渐变，耗时6秒。但是，它们在创建时不是黄色起始，而是采用第一个元素在那一刻拥有的值，所以它们最终都将显示相同的同步动画。这是我的做法:

 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();

这里有一个链接可以查看正在发生的事情。 http://jsfiddle.net/cpUbS/2/

你有什么想法，我错过了什么吗？谢谢！

- airnan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robert Longson · Accepted Answer

SVG文档具有时间轴，默认情况下，当创建第一个要动画化的对象时开始计时，并递增。

您正在创建所有元素，其起始时间为6秒，因此当文档时间轴达到6秒时，它们都会同步开始动画。

递增每个元素的起始时间，使它们从您想要的时间轴点开始。