烟径效果 - Javascript

Question

如何使用Javascript从我附加的代码中产生平滑烟雾追踪效果？小径应该跟随一个物体，但是具有物体刚才的位置。我附加的代码确实有一些跟踪效果，但它并不顺利。可以使用类似这样的内容给小道一个位置：position:trail = position:object, 5 ms ago？

var left = parseInt(document.getElementById("thingy").style.left);

setInterval(fly, 10); 
function fly() {
  if (left > 300) {
      left = 300; 
    }; 
    left++; 
    document.getElementById("thingy").style.left = left + "px";  
  }

setInterval(trail, 100); 
function trail() { 
    document.getElementById("trail").style.left = left + "px";  
  }

<div id="thingy" style="position:absolute; top:100px; left: 0px; width: 100px; height: 100px; background-color:#000000;"></div>

<div id="trail" style="position:absolute; top:125px; left: 0px; width: 50px; height: 50px; background-color:#CCCCCC; z-index: -10;"></div>

如果有可能我想不参与jQuery。

Answer 1

此解决方案每次移动时都会克隆元素。

CSS3过渡用于克隆节点的背景，以模拟烟雾痕迹。

代码确保从不超过100个克隆节点。

var thingy= document.getElementById('thingy'),
    left = thingy.offsetLeft,
    shadows= [],
    delta= 4;

setInterval(fly, 10); 

function fly() {
  var shadow= thingy.cloneNode();
  shadow.classList.add('shadow');
  shadow.style.backgroundColor= 'silver';
  document.body.appendChild(shadow);
  setTimeout(function() {
    shadow.style.backgroundColor= 'white';
  },100);
    
  shadows.push(shadow);
  if(shadows.length>100) {
    shadows[0].parentNode.removeChild(shadows[0]);
    shadows.shift();
  }
  if(left+delta > document.body.offsetWidth-thingy.offsetWidth || left < 0) {
    delta= -delta;
  }
  left+= delta;
  thingy.style.left = left + 'px';
}

body {
  margin: 0;
  padding: 0;
}

#thingy {
  position: absolute; 
  top: 100px;
  left: 0px;
  width: 100px; 
  height: 100px;
  background-color: orange;
  border-radius: 50%;
}

.shadow {
  transition: all 1s;
  z-index: -1;
}

<div id="thingy"></div>

<小时/> 的更新

对于“smokier”效果，您可以为克隆节点的宽度，高度，过渡等使用随机值，就像我在此片段中所做的那样：

var thingy= document.getElementById('thingy'),
    tleft = thingy.offsetLeft,
    ttop = thingy.offsetTop,
    smokes= [],
    deltaX= deltaY= 2;

setInterval(fly, 10); 

function fly() {
  if(Math.random()>0.5) {
    var smoke= thingy.cloneNode();

    smoke.classList.add('smoke');
    smoke.style.background= 'gray';
    smoke.style.opacity= 0.2;
    smoke.style.transition= Math.random()+'s';
    smoke.style.width= Math.random()*thingy.offsetWidth+'px';
    smoke.style.height= Math.random()*thingy.offsetHeight+'px';
    smoke.style.marginTop= smoke.offsetHeight+'px';
    smoke.style.borderRadius= (Math.random()*25+25)+'%';
    document.body.appendChild(smoke);
    setTimeout(function() {
      smoke.style.opacity= 0;
    },100);
    
    smokes.push(smoke);
    if(smokes.length>20) {
      smokes[0].parentNode.removeChild(smokes[0]);
      smokes.shift();
    }
  }
  
  if(tleft+deltaX > document.body.offsetWidth-thingy.offsetWidth   || tleft < 0) {
    deltaX= -deltaX;
  }
  if(ttop +deltaY > document.body.offsetHeight-thingy.offsetHeight || ttop  < 0) {
    deltaY= -deltaY;
  }
  tleft+= deltaX;
  ttop += deltaY;
  thingy.style.left = tleft + 'px';
  thingy.style.top  = ttop  + 'px';
}

body {
  margin: 0;
  padding: 0;
  background: black;
  height: 100vh;
}

#thingy {
  position: absolute; 
  top: 100px;
  left: 0px;
  width: 100px; 
  height: 100px;
  background-color: orange;
  border-radius: 50%;
}

.smoke {
  z-index: -1;
}

<div id="thingy"></div>