QML文字灰飛煙滅效果
1，目的
實現文字化作一縷青煙隨風而逝的效果。
2，設計分析
在前面的章節中講述了如何化作光斑碎片逐漸消失的效果，我們可以借鑒它將光斑換成煙霧，再加入端流產生微風浮動，加上字幕的減淡消失，最終組合成文字化作一縷青煙隨風而逝的效果。
3，設計內容
我們先來看看效果
圖1
首先創建一個480*240的窗口，背景色設置為深灰黑#1f1f1f，文字配置居中、白色、粗體、微軟雅黑、64號。
import QtQuick 2.4
import QtQuick.Window 2.2
Window {
visible: true
width: 480
height: 240
Rectangle {
id: root
anchors.fill: parent
color: "#1f1f1f"
Text {
id:myText
anchors.centerIn: parent
text: "Hello world!"
font.bold: true
font.pixelSize: 64
font.family: "微軟雅黑"
color: "#ffffffff"
opacity: 1;
}
}
}
圖2
然后添加粒子系統的三個重要組成：ParticleSystem、ImageParticle、Emitter。及粒子系統的引用文件QtQuick.Particles。其中ImageParticle使用外發光光斑，顏色使用#30333333，這里顏色由4個8位16進制數組成分別對應A:0x30 R:0x33 G:0x33 B:0x33。表示30%的灰色模仿煙霧的顏色。
QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Particles 2.0
Window {
visible: true
width: 480
height: 240
Rectangle {
id: root
anchors.fill: parent
color: "#1f1f1f"
Text {
id:myText
anchors.centerIn: parent
text: "Hello world!"
font.bold: true
font.pixelSize: 64
font.family: "微軟雅黑"
color: "#ffffffff"
opacity: 1;
}
ParticleSystem {
id: myParticleSystem
}
ImageParticle {
system: myParticleSystem
source: "qrc:///particleresources/glowdot.png"
color: "#30333333"
}
Emitter {
id: myEmitter
system: myParticleSystem
anchors.fill: myText
lifeSpan: 1000
emitRate: 4000
size: 16
sizeVariation: 8
endSize: 8
}
}
}
圖3
現在煙霧環繞的狀態已經完成，但是過於古板，而且煙霧區域超出文本區域。下面我們減小一半煙霧區域，並且對煙霧添加和水平45°升空的效果。
修改Emitter
Emitter {
id: myEmitter
system: myParticleSystem
width: myText.width
height: myText.height / 2
anchors.left: myText.left
y: root.height / 2 - 12
lifeSpan: 1000
emitRate: 4000
size: 16
sizeVariation: 8
endSize: 8
velocity: PointDirection {
y: -48
x: 48
xVariation: 32
yVariation: 32
}
}
圖4
現在煙霧不夠自然，我們再增加點空氣亂流吹散它，增加Turbulence效果
Turbulence {
id: myTurb
enabled: true
anchors.fill: root
strength: 128
system: myParticleSystem
}
圖5
我們讓文本逐漸消失，並且在完全消失的瞬間停止粒子發射器發射，在粒子停止發射后已發射粒子會在生命周期結束后消失。我們需要用到SequentialAnimation順序動畫和ParallelAnimation進行組合完成。
動畫的流程：在1秒內粒子發生器范圍從0到4000，與此同時文字透明度降低到0.9，然后1秒時間內文字透明度降低到0，當透明度等於0時停止粒子發射器發射。最后為了方便演示增加鼠標觸發效果，在觸發效果之前先讓顯示內容的屬性重置到初始狀態。
最終代碼如下
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Particles 2.0
Window {
visible: true
width: 480
height: 240
Rectangle {
id: root
anchors.fill: parent
color: "#1f1f1f"
Text {
id:myText
anchors.centerIn: parent
text: "Hello world!"
font.bold: true
font.pixelSize: 64
font.family: "微軟雅黑"
color: "#ffffffff"
opacity: 1;
}
ParticleSystem {
id: myParticleSystem
}
ImageParticle {
system: myParticleSystem
source: "qrc:///particleresources/glowdot.png"
color: "#30333333"
}
Emitter {
id: myEmitter
system: myParticleSystem
enabled: false
width: myText.width
height: myText.height / 2
anchors.left: myText.left
y: root.height / 2 - 12
lifeSpan: 1000
lifeSpanVariation: 500
emitRate: 4000
size: 16
sizeVariation: 8
endSize: 8
velocity: PointDirection {
y: -48
x: 48
xVariation: 32
yVariation: 32
}
}
Turbulence {
id: myTurb
enabled: true
anchors.fill: root
strength: 128
system: myParticleSystem
}
SequentialAnimation{
id: myAnimation
ParallelAnimation {
PropertyAnimation {
target: myEmitter
properties: "emitRate"
from: 0
to: 4000
duration: 1000
}
PropertyAnimation {
target: myText
properties: "opacity"
to: 0.9
duration: 1000
}
}
//數值動畫
PropertyAnimation {
target: myText
properties: "opacity"
to: 0.0
duration: 1000
}
onStopped: myEmitter.enabled = false
}
MouseArea {
anchors.fill: parent
onClicked: {
myEmitter.enabled = true
myText.opacity = 1
myEmitter.emitRate = 4000
myAnimation.restart()
}
}
}
}
4，總結
對於一些飄散效果，重點是飄散主體的消失和飄散散落的過程，只要把握好了這一點配合就能讓整個過程很自然。下來大家也可以優化上述代碼達到更加真實的效果，可以在簡書、博客園、或郵箱將問題進行留言，我會及時修正和更新。
郵箱: whqcxz@163.com
原創：https://www.simbahiker.com/news/0220200508001.html