实验说明

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

来源

2016-01-24 Elegant.Scripting

目前还不清楚你想要什么。 CSS或JS解决方案？你的代码在哪里？您只发布了一个包含一些数据的对象。只需将其从0.0更改为1.0，即可获得效果 – Gavriel

@Gavriel我将在大约一分钟内更新我的问题。是的，我知道我可以更新阿尔法。问题是让它淡入/淡出达到一半的生命值达到100的特定值。 –

为什么半生？如果创建了一个粒子，那么您可能会淡入其中，但这只是将其展示给用户的一种可视方式。你可以选择它在1秒内消失。然后这个粒子可以活60秒，然后消失，并且为了视觉效果，它会消失1秒。我不明白为什么在这种情况下，你会想要淡入30秒，淡出30秒 – Gavriel

如果我明白你的问题，然后我会把这样的事情（伪）到更新功能：

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最后两行粒子的构造的改变：

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

来源

2016-01-24 15:09:22 Gavriel

谢谢，半衰期功能真的很好。虽然我实施它时有一个奇怪的闪烁，但它很好。 –

我已经更新了JSFiddle以包含后面的条件，但仍然有闪烁。让我知道你是否可以弄明白。 –

看到我的更新，我想我解决了闪烁：https://jsfiddle.net/8g5csscf/9/ – Gavriel

淡入和淡出粒子

实验说明

问题和问题

重要提示

回答

相关问题