使用CSS和JavaScript的粒子

-1

我試圖創建一個非常簡單的粒子系統。此時不需要任何物理，只需動畫看起來像泡泡或蜜蜂，或任何其他物體的div。下面的代碼創建div和通過CSS我可以讓他們改變位置，向上浮動。但我似乎無法鍛鍊如何摧毀粒子。每個粒子都會運動，然後返回到原始點。我寧願如果它被完全刪除。使用CSS和JavaScript的粒子

謝謝。

/* ==================== PARTICLES CONTROLLER ==================== */ 

/** 
* Particle controller interates through all elements with 
* CSS class name PARTICLE_CSS and when found a ParticleController is instantiated 
* for each of the elements. 
*/ 

function ParticleBaseController(){ 
    var ParticleContainer = document.querySelectorAll(PARTICLE_CSS), 
     ParticleContainerLength = ParticleContainer.length; 

    for (var i = ParticleContainerLength - 1; i >= 0; i--){ 
    new ParticleController(ParticleContainer[i]); 
    }; 
}; 

function ParticleController(element) { 
    var particleElement, fragment = document.createDocumentFragment(); 
    var numberOfParticles = 1; 

    for (var i = 0; i < numberOfParticles; i ++) { 
    particleElement = document.createElement("div"); 
     particleElement.addClassName(PARTICLE_ELEMENT_CSS_CLASS); 
    var Ypos = Math.floor((Math.random()*200)+1); 
    var Xpos = Math.floor((Math.random()*200)+1); 
    particleElement.style.top = Ypos + "px"; 
    particleElement.style.left = Xpos + "px"; 
    fragment.appendChild(particleElement); 
    } 
    element.appendChild(fragment); 

setTimeout(ParticleBaseController, 3000); 
};

來源

2012-08-07 glebski

你錯過了一個JavaScript命令來刪除一個元素，或者我誤解了你嗎？ – 2012-08-07 11:08:23

是的。我需要刪除，所以它不會越來越多地實例化。某種限制器可能不會超過一定數量的粒子？ – glebski 2012-08-07 11:15:21

你可以使用'element.parentNode.removeChild（element）'從DOM中移除一個元素，但我想這不是你要找的東西，是嗎？或者更多關於如何關閉ParticleController實例的邏輯部分？ – 2012-08-07 12:30:56

這對我有效。我猜測它的工作方式是，只有少於15個粒子纔會附加到容器上。雖然我不知道它們是如何被實際銷燬的。但在屏幕上，我一次只能看到15個粒子，或者我設定的數量很多。

/* ==================== PARTICLES CONTROLLER ==================== */ 
    const NumberOfParticles = 15; 

function smoking() 
{ 
    var container = document.getElementById('particleContainer'); 
    for (var i = 0; i < NumberOfParticles; i++) 
    { 
     container.appendChild(createParticle()); 
    } 
} 

function randomFloat(low, high) 
{ 
    return low + Math.random() * (high - low); 
} 

function createParticle() 
{ 
    var particleDiv = document.createElement('div'); 
    particleDiv.style.top = "-300px"; 
    particleDiv.style.left = "200px" 

    particleDiv.style.webkitAnimationName = 'smoke-rise, smoke-fade'; 

    var SmokeDuration = randomFloat(5, 10)+"s"; 
    var FadeDuration = randomFloat(4, 11)+"s"; 
    var SmokeDelay = randomFloat(0, 5)+"s"; 
    var FadeDelay = randomFloat(2, 9)+"s"; 

    particleDiv.style.webkitAnimationDuration = SmokeDuration + ', ' + FadeDuration;  
    particleDiv.style.webkitAnimationDelay = SmokeDelay + ', ' + FadeDelay; 

    return particleDiv; 
} 

window.addEventListener("DOMContentLoaded", smoking, false);

來源

2012-08-09 17:24:34 glebski

我知道這是相當古老，但我正在尋找的東西像這樣，並遇到你的問題，也是這個鏈接 - http://paulmason.name/item/javascript-particle-engine-effects – RenaissanceProgrammer 2016-05-19 00:03:04

使用CSS和JavaScript的粒子

回答

相關問題