0

我正在尝试创建一个非常简单的粒子系统。在这一点上不需要物理，只需动画看起来像气泡、蜜蜂或其他任何东西的 div。下面的代码创建了 div，通过 CSS 我可以让它们改变位置，向上浮动。但我似乎无法锻炼如何破坏粒子。每个粒子都做它的运动，然后返回到它的原点。如果它被完全删除，我更愿意。

谢谢你。

/* ==================== 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);
};
4

1 回答 1

0

这对我有用。我猜测它的工作方式是只要粒子少于 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-09T17:24:34.763 回答