我有要动画的SVG。是Wifi信号，所以我想产生发送wifi信号的效果，图像为：
所以效果是：
-Make red disappear half second (with opacity: 0 or display: none).
-使蓝色消失半秒
-使浅蓝色消失半秒
-使黄色消失半秒
-使紫色消失半秒
-使绿色消失半秒
-Increase devices transform: scale(1.5); and back again to transform: scale(1)
-等待4秒
-重新开始动画
我尝试过
function afterLoad() {
setInterval(function(){
var red= document.getElementById("red");
var blue= document.getElementById("blue");
var lightblue= document.getElementById("lightblue");
var yellow= document.getElementById("yellow");
var purple= document.getElementById("purple")
var green= document.getElementById("green");
var x = document.getElementById("devices");
red.style.display = 'none';
wait(9000);
red.style.display = 'block';
blue.style.display = 'none';
wait(9000);
blue.style.display = 'block';
lightblue.style.display = 'none';
wait(9000);
lightblue.style.display = 'block';
yellow.style.display = 'none';
wait(9000);
yellow.style.display = 'block';
purple.style.display = 'none';
wait(9000);
purple.style.display = 'block';
green.style.display = 'none';
wait(9000);
green.style.display = 'block';
}, 2000);
}
The wait method is comming from this question: Wait 5 seconds before executing next line
function wait(ms){
var start = new Date().getTime();
var end = start;
while(end < start + ms) {
end = new Date().getTime();
}
}
设置动画方法以在渲染结束时执行
<body onload="afterLoad()"> ... <body>
我已经修改了SVG，并且该方法已成功执行，正在选择颜色，并且它们可以在代码执行时隐藏，但不符合预期。问题在于浏览器崩溃了，就像进入循环直到动画结束一样，但是它也没有出现。 如果我忽略时间，例如在渲染后我只想隐藏黄色，则该方法将如下所示，并且将完美地工作：
function afterLoad() {
var yellow= document.getElementById("yellow");
yellow.style.display = 'none';
}
But with the seconds waiting is not working. This is one problem that the animation does not work. Another problem is that also not sure if with that function the animation repeats itself. I also tried with a while(true) with the waiting but that crashes the browser (or almost). Which is the correct way to handle the animation?
非常感谢！
