如何在動畫完成後隨機更改位置？

Question

我正試圖創建一個模擬天空中星星閃爍的效果。

我把它實現在一定程度上爲這樣的：Fiddle

我的JS打造的明星：

var limit=50, 
body = document.body; 
spread={ 
    start:function(){ 
     for (var i=0; i<=limit; i++){ 
      var star=this.newStar(); 
      var randomD = Math.random()*30; 
      var randomDelay = randomD.toString() + "s"; 
      star.style.top=this.rand()*90+"%"; 
      star.style.left=this.rand()*98+"%"; 
      star.style.animationDelay= randomDelay; 
      body.appendChild(star); 

     }; 
    }, 
    rand:function(){ 
     return Math.random(); 
    }, 
    newStar:function(){ 
     var d = document.createElement('div'); 
     d.innerHTML= '<figure class="star"></figure>'; 
     return d.firstChild; 
    } 
}; 
spread.start(); 

但是，我想以隨機的「明星」的位置，它的完成後，它的動畫。

我該如何做到這一點？

Answer 1

您可以在動畫循環播放時觸發元素上的animationiteration事件。

DEMO

spread={ 
    start:function(){ 
     for (var i=0; i<=limit; i++){ 
      var star=this.newStar(); 
      var randomD = Math.random()*30; 
      var randomDelay = randomD.toString() + "s"; 
      this.randomizeStar(star); 
      star.style.animationDelay= randomDelay; 
      star.addEventListener("animationiteration", 
        this.randomizeStar.bind(null, star)); 
      body.appendChild(star); 

     }; 
    }, 
    rand:function(){ 
     return Math.random(); 
    }, 
    newStar:function(){ 
     var d = document.createElement('div'); 
     d.innerHTML= '<figure class="star"></figure>'; 
     return d.firstChild; 
    }, 
    randomizeStar:function(star){ 
     star.style.top=Math.random()*90+"%"; 
     star.style.left=Math.random()*98+"%"; 
    } 
}; 

您將需要調整動畫一點，所以在動畫上opacity:0結束，但演示清楚地表明，恆星正在移動。

---

在你的代碼的一些提示和註釋：

• 只需使用Math.random()，而不是建立在一個spread功能rand，它不會增加太多。
• 如果你在一個Star原型中封裝了星型創建和隨機邏輯，代碼將變得更加清晰。