svgでざわざわ
- svg あまり触ったことないので、とりあえずざわざわさせてみた
ソース1
html
test017_1.htm
<html>
<head>
<script src="https://www.promisejs.org/polyfills/promise-6.1.0.min.js"></script>
<script src="test017_1.js" type="text/javascript"></script>
<title>svgでざわざわ</title>
</head>
<body>
<h1>svgでざわざわ</h1>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="300" height="300" id="s">
</svg>
</body>
</html>
javascript
test017_1.js
var count=20;
var c=[];
new Promise(function(resolver){
var timerId=setInterval(function(){
count--;
c[count]=document.createElementNS('http://www.w3.org/2000/svg', "circle");
var r=parseInt(Math.random()*50+10);
var cx=parseInt(Math.random()*300);
var cy=parseInt(Math.random()*300);
var color=parseInt(Math.random()*8);
var cList=["red","blue","green","aqua","yellow","lime","fuchsia","black"];
c[count].setAttribute("cx",cx);
c[count].setAttribute("cy",cy);
c[count].setAttribute("r",r);
c[count].setAttribute("fill",cList[color]);
document.querySelector('#s').appendChild(c[count]);
if(count<=0){
clearInterval(timerId);
return resolver();
}
},100);
}).then(function(){
var timerId=setInterval(function(){
for(var i=0;i<c.length;i++){
c[i].setAttribute("cx",parseInt(c[i].getAttribute("cx"))+parseInt(Math.random()*10-5));
c[i].setAttribute("cy",parseInt(c[i].getAttribute("cy"))+parseInt(Math.random()*10-5));
}
},10);
});
ソース2
ソース1を5秒間隔で繰り返す
HTML
test017_2.htm
<html>
<head>
<script src="https://www.promisejs.org/polyfills/promise-6.1.0.min.js"></script>
<script src="test017_2.js" type="text/javascript"></script>
<title>svgでざわざわ、ループ</title>
</head>
<body>
<h1>svgでざわざわ、ループ</h1>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="300" height="300" id="s">
</svg>
</body>
</html>
javascript
test017_2.js
var c=[];//サークルの実体
var wait_set=0.1;//初期表示するためのwait
var wait_move=0.01;//動くためのwait
var wait_loop=10;//ループ1回転の間隔
var timerId;//タイマー
var items=30;//動かすアイテム数
main();
function main(){
new Promise(function(resolver){
Promise.all([
new Promise(function(resolver){
var counter=items;
timerId=setInterval(function(){
counter--;
c[counter]=document.createElementNS('http://www.w3.org/2000/svg', "circle");
var r=parseInt(Math.random()*50+10);
var cx=parseInt(Math.random()*300);
var cy=parseInt(Math.random()*300);
var color=parseInt(Math.random()*8);
var cList=["red","blue","green","aqua","yellow","lime","fuchsia","black"];
c[counter].setAttribute("cx",cx);
c[counter].setAttribute("cy",cy);
c[counter].setAttribute("r",r);
c[counter].setAttribute("fill",cList[color]);
document.querySelector('#s').appendChild(c[counter]);
if(counter<=0){
clearInterval(timerId);
return resolver();
}
},wait_set*1000);
}).then(function(){
timerId=setInterval(function(){
for(var i=0;i<c.length;i++){
c[i].setAttribute("cx",parseInt(c[i].getAttribute("cx"))+parseInt(Math.random()*10-5));
c[i].setAttribute("cy",parseInt(c[i].getAttribute("cy"))+parseInt(Math.random()*10-5));
}
},wait_move*1000);
}),
new Promise(function(resolver){
setTimeout(function(){return resolver();}, wait_loop*1000);
}),
]).then(function(){
clearInterval(timerId);
while(n=document.querySelector('#s circle')){
n.parentNode.removeChild(n);
}
return resolver();
});
}).then(function(){
console.log("loop");
main();
});
}
その他
動作確認
- IE9以上（IE8ではcreateElementNSでひっかかる）
- Edge
- Firefox(現行版58でOK)
- chrome(現行版64でOK)
動かしてみる
備考
- 別に最初の円の描画はゆっくりみせる必要はないが、やるだけやってみた
- 非同期処理の調整のためPromiseライブラリ呼んでるのはIEのため。EdgeはPromiseネイティブで動く
- IEは描画領域がおかしいので枠外でもうにょうにょする