我需要动画显示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/
你有什么想法,我错过了什么吗? 谢谢!