如何隱藏粒子效果（圈），直到它加載動畫的.png爲止？

我正在使用我在google上找到的這個JS fiddle的代碼片斷。它對我的項目非常有效，我已經在我的網站上生效了。如何隱藏粒子效果（圈），直到它加載動畫的.png爲止？

但是，我有一個較慢的連接 - 儘管我不確定這是爲什麼發生這種情況，但我看到「霓虹藍色圓圈」在顯示「粒子」的屏幕上浮動，然後加載到作爲煙霧效果動畫的.PNG中。

我的問題：有反正我可以隱藏這些圈子嗎？或者可能延遲效果，直到.PNG被加載？

我聽起來可能會變得更加複雜。我對JS的感覺不是很好，但我可以嘗試一下。任何幫助深表感謝！

#myCanvas{ 
    background:black; 
    }

來源

2016-03-11 Patrick

您可以刪除/註釋掉這些行：

this.context.beginPath(); 
    this.context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false); 
    this.context.fillStyle = "rgba(0, 255, 255, 1)"; 
    this.context.fill(); 
    this.context.closePath();

這本質上繪製一個單圈。

來源

2016-03-11 01:17:27 thedeliciousmuffin

更新演示：http://jsfiddle.net/Limitlessisa/Ujz4P/6158/

步驟添加風格= 「不透明度：0」

<canvas id="myCanvas" style="opacity:0" width="400" height="400"></canvas>

步驟中添加的js線$（ '＃myCanvas'）動畫（{不透明度：1}）。

imageObj.onload = function() { particles.forEach(function(particle) { particle.setImage(imageObj); }); $('#myCanvas').animate({opacity:1}); };

替代煙霧效果：

JS FIDDLE Example

來源

2017-05-23 12:29:41

如何隱藏粒子效果（圈），直到它加載動畫的.png爲止？

回答

相關問題