javascript - 粒子淡入淡出

Question

实验说明

我正在尝试使用 Canvas 在 JavaScript 中制作一个基本的粒子发射器。我掌握了基础知识，但我无法弄清楚的是如何在创建后平滑地淡入粒子，并在删除前淡出粒子。

这是我创建的 Particle 对象的基本版本:

{
    alpha: 0,
    color: "blue",
    velocityX: .5,
    velocityY: .5,
    gravity: .01,
    currentLife: 1000
    startLife: 1000
}

您可以在此处查看代码:https://jsfiddle.net/8g5csscf/

数字通常是随机的，但相对接近那些值。

每个动画帧，对象都会更新，粒子根据其 color 和 alpha 值在屏幕上呈现为一个圆圈。它的 currentLife 每动画帧减一。一旦它的 currentLife 为零，一个新对象就会取而代之。

问题与问题

我怎样才能在对象构思之后淡入，并在删除之前淡出？

我假设我可能需要使用 FPS 或时间更改 (delta t)，以及基于 startLife 一半的 if 语句，但我不确定如何。

重要提示

是的，我知道我可以更新 alpha。问题是让它以某个值淡入/淡出，该值在其半衰期加起来为 100。

Answer 1

如果我理解你的问题，那么我会把这样的东西(伪代码)放入更新函数中:

if (currentLife > startLife/2 && currentLife > startLife-100) {
    alpha++;
} else if (currentLife < startLife/2 && currentLife < 100) {
    alpha--;
}

如果你想让它淡入半衰期，那么:

if (currentLife > startLife/2) {
    alpha=200*(startLife-currentLife)/startLife;
} else if (currentLife < startLife/2) {
    alpha=200*(startLife-(startLife-currentLife))/startLife;
}

然后用它所持有的 alpha 值绘制每个粒子。

要修复闪烁，请将 Particle 构造函数的最后两行更改为:

this.alpha = 0;
this.rgbaColor = hexToRgba(this.hexColor, this.alpha);