淡入和淡出粒子

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减1。一旦currentLife为零，就会有一个新对象取代它。

问题和问题

如何在对象受到影响后淡入对象，并在删除之前淡出对象？

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

重要提示

是的，我知道我可以更新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值绘制每个粒子。

要修复filckering，请将Particle构造函数的最后两行更改为：

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