Question

我需要动画制作6个svg圆圈，这些圆圈是相互动态创建的1个appart。它们应该以黄色渐变开始，并在6s内淡出为红色渐变。但是当它们被创建时，它们不是从黄色开始，而是获取第一个元素在那一刻所具有的值，因此它们最终都会显示相同的同步动画。这就是我正在做的事情：

 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/

知道我缺少什么吗？谢谢！

Answer 1

SVG文档有一个时间轴，默认情况下，在创建动画的第一个内容然后递增时，从0秒开始。

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

增加每个元素的开头，使它们从你想要的时间轴开始。

svg同步了animate元素

1 个答案: