QML文字灰飛煙滅效果

2020 年 5 月 10 日
筆記
qml

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，總結

對於一些飄散效果，重點是飄散主體的消失和飄散散落的過程，只要把握好了這一點配合就能讓整個過程很自然。下來大家也可以優化上述程式碼達到更加真實的效果，可以在簡書、部落格園、或郵箱將問題進行留言，我會及時修正和更新。
郵箱: [email protected]

原創：//www.simbahiker.com/news/0220200508001.html

Tags: qml