Question

我正在尝试创建一个非常简单的粒子系统。此时不需要物理，只是动画的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);
};

Answer 1

这对我有用。我猜它的工作方式是粒子只会附加到容器上，只要少于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);

使用CSS和JavaScript的粒子

1 个答案: