淡入和淡出粒子(Fading in and out particles)

实验说明

我正在尝试使用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。

Explanation of Experiment

I'm trying to make a basic particle emitter in JavaScript with canvas. I have the basics down, but one thing I can't figure out is how to smoothly fade in the particles after creation, and fade out the particles before deletion.

Here's a basic version of my Particle object on creation:

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

You can view the code here: https://jsfiddle.net/8g5csscf/

The numbers are generally random, but relatively near those values.

Each animation frame, the object is updated and the particle is rendered as a circle on the screen by its color and alpha value. Its currentLife is decremented by one, per animation frame. Once its currentLife is zero, a new object takes its place.

Question and Problem

How can I fade in the object after its conception, and fade it out before its deletion?

I'm assuming I might need to use FPS or time changed (delta t), with if statements based on half of the startLife, but I'm just not sure how.

Important Note

Yes, I know I can update the alpha. The problem is getting it to fade in/fade out by a certain value that adds up to 100 by its half life.

最满意答案

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

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

If I understand your question, then I would put something like this (pseudocode) into the update function:

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

If you want it to fade-in for half-life, then:

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

And draw each particle with the alpha value it holds.

To fix the filckering change the last 2 lines of the constructor of Particle to:

this.alpha = 0; this.rgbaColor = hexToRgba(this.hexColor, this.alpha);淡入和淡出粒子(Fading in and out particles)

实验说明

我正在尝试使用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。

Explanation of Experiment

I'm trying to make a basic particle emitter in JavaScript with canvas. I have the basics down, but one thing I can't figure out is how to smoothly fade in the particles after creation, and fade out the particles before deletion.

Here's a basic version of my Particle object on creation:

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

You can view the code here: https://jsfiddle.net/8g5csscf/

The numbers are generally random, but relatively near those values.

Each animation frame, the object is updated and the particle is rendered as a circle on the screen by its color and alpha value. Its currentLife is decremented by one, per animation frame. Once its currentLife is zero, a new object takes its place.

Question and Problem

How can I fade in the object after its conception, and fade it out before its deletion?

I'm assuming I might need to use FPS or time changed (delta t), with if statements based on half of the startLife, but I'm just not sure how.

Important Note

Yes, I know I can update the alpha. The problem is getting it to fade in/fade out by a certain value that adds up to 100 by its half life.

最满意答案

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

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

If I understand your question, then I would put something like this (pseudocode) into the update function:

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

If you want it to fade-in for half-life, then:

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

And draw each particle with the alpha value it holds.

To fix the filckering change the last 2 lines of the constructor of Particle to:

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