粒子淡入淡出

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。问题是让它淡出 in/fade 某个值，该值在其半衰期加起来为 100。

Answer 1

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

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

如果您希望它 fade-in for half-life，则：

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);

粒子淡入淡出

Fading in and out particles

javascript

algorithm

conditional

canvas

实验说明

疑问与问题

重要提示