實驗說明

我正在嘗試使用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

淡入和淡出粒子

實驗說明

問題和問題

重要提示

回答

相關問題