升级找到的代码。在原作中，一缕缕雾气在画布上上下移动并消失。我试图将已变为最大值的高度设置为 0（更准确地说，反之亦然，我们从下到上），并且动画循环。我还没有完全理解变量的本质。从var td = new Date().getTime() - p.start;数学上讲，这通常是（-延迟），但是变量是不断增长的（与实时相关？）
if (p.newTop < 0)
{
newTop = 100;
}
移动到坐标 100（100 纯粹是为了清楚起见）成功。但是“归零” td 以将其分配给 newTop 以获取新线圈是行不通的。
const TIMEOUT = 40;
var stTime = 0;
canvasWidth = 1600;
canvasHeight = 200;
pCount = 0;
pCollection = new Array();
var puffs = 1;
var particlesPerPuff = 50; //2000
var img = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/85280/smoke2.png';
var smokeImage = new Image();
smokeImage.src = img;
for (var i1 = 0; i1 < puffs; i1++) {
var puffDelay = i1 * 1500;
for (var i2 = 0; i2 < particlesPerPuff; i2++) {
addNewParticle((i2 * 50) + puffDelay);
}
}
draw(new Date().getTime(), 3000);
function addNewParticle(delay) {
var p = {};
p.top = canvasHeight;
p.left = randBetween(-200, 800);
p.start = new Date().getTime() + delay;
p.life = 8000;
p.speedUp = 30;
p.speedRight = randBetween(0, 20);
p.startOpacity = .3
p.newTop = p.top;
p.newLeft = p.left;
p.size = 200;
p.growth = 10;
pCollection[pCount] = p;
pCount++;
}
function draw(time) {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
for (let i = 0; i < pCount; i++) {
var p = pCollection[i];
var td = new Date().getTime() - p.start;
console.log(td);
var frac = td / p.life
var newTop = p.top - (p.speedUp * (td / 1000));
var newLeft = p.left + (p.speedRight * (td / 1000));
var newOpacity = Math.max(p.startOpacity * (1), 0);
//var newOpacity = Math.max(p.startOpacity * (1-frac),0);
var newSize = p.size + (p.growth * (td / 1000));
p.newTop = newTop;
p.newLeft = newLeft;
if (p.newTop < 0) {
//td = new Date().getTime() - p.start;
newTop = 100;
}
ctx.fillStyle = 'rgba(150,150,150,' + newOpacity + ')';
ctx.globalAlpha = newOpacity;
ctx.drawImage(smokeImage, newLeft, newTop, newSize, newSize);
}
requestAnimationFrame(draw);
}
function randBetween(n1, n2) {
var r = (Math.random() * (n2 - n1)) + n1;
return r;
}body {
background: black url(https://s.cdpn.io/16327/texture_bg.jpg) no-repeat 50% 0px;
}
#myCanvas {
height: 300px;
width: 2400px;
max-width: 99%;
min-width: 800px;
position: absolute;
bottom: 0;
z-index: 2;
}
#house {
position: absolute;
top: 20%;
left: 40%;
}<canvas id="myCanvas" height="200" width="800"></canvas>https://jsfiddle.net/Nata_Hamster/ut42nb5e/2/
您示例中的动画逻辑如下：
元素被创建
Particle。对他而言，除其他属性外，还设置了创建时间p.start = new Date().getTime() + delay，new Date().getTime()- 当前时间（以毫秒为单位）delay- 生成延迟然后，在元素的渲染过程中，计算它的位置
var newTop = p.top - (p.speedUp * (td / 1000));p.top- 起始位置p.speedUp- 上升速度td是当前时间和开始时间之间的时间差，以毫秒为单位var td = new Date().getTime() - p.start。结果，我们看到公式中元素的位置
var newTop = p.top - (p.speedUp * (td / 1000));取决于初始位置（p.top）、速度（p.speedUp）和时间差（td）。初始位置（p.top）和速度（p.speedUp）变量不会改变 - 它们是元素的常数。因此，元素的位置取决于 time(
td)。这意味着您需要更改时间的初始值才能设置元素的位置。所以你需要写代码p.start = new Date().getTime()。下面是一个例子。