[test017] svgでざわざわ

# svgでざわざわ

- svg あまり触ったことないので、とりあえずざわざわさせてみた

## ソース1

### html

```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

``` 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
```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
```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)

### 動かしてみる
- [codepen](https://codepen.io/yambejp/pen/ZrqOQy)

### 備考
- 別に最初の円の描画はゆっくりみせる必要はないが、やるだけやってみた
- 非同期処理の調整のためPromiseライブラリ呼んでるのはIEのため。EdgeはPromiseネイティブで動く
- IEは描画領域がおかしいので枠外でもうにょうにょする