QML設計飄散效果

時間 2020-06-04

標籤 qml 設計飄散效果简体版

原文原文鏈接

1，目標及展現

首先但願實現文字、圖片、控件等在觸發後，呈現飄散並消失的效果。在QT例程《Qt Quick Particles Examples》是一個海星點擊鼠標後呈現打散的效果，這個效果和最終須要的略有不一樣，因此咱們在它的基礎上再加上我須要的一些元素，最終實現以下效果。html

圖1（gif）測試

圖6動畫

2，設計分析

這個項目咱們分析能夠拆分紅兩個部分，第一是背景飄散效果，第二是背景逐漸消失效果，而後將這兩種效果進行組合，就實現最終須要的效果。
首先先實現飄散效果，QT具備很是強大的粒子化效果，而且只需不多的幾行代碼就能實現效果。不過對於初次使用qml語言進行開發的設計人員，須要先了解關鍵字的含義和功能，固然咱們能夠在例程中微調每一個關鍵字參數，根據效果變化進行快速瞭解做用，也能夠直接經過強大的F1幫助鍵對關鍵字說明文檔進行全面的瞭解。
在咱們這些關鍵字有必定認識後，就能夠快速進行粒子化設計了。
第二就是逐步消失的效果，這裏的方法就有不少了：方法一可使用PS技術，找個單側是過渡效果的蒙版圖片，利用動畫效果逐步遮住顯示內容；
方法二能夠直接使用qml 中的 LinearGradient：線性過渡的方法來實現，從單側開始讓逐步隱藏，使10%的區域從透明度爲0(全透明)過渡到1(不透明)狀態，而後讓這10%的區域逐漸擴大範圍，最終實現背景消失。若是但願過渡區間更加均勻能夠把10%改爲20%或更大。
還有不少方法能夠實現這個效果，從適應性考慮採用的是後者。ui

3，設計內容

先說下個人開發環境：
qt5.4.2集成的Qt creator 3.4.1版本
首先建立Quick項目，若是自動建立了MainForm.ui.qml，直接刪除就能夠了，咱們直接在main.qml中開發就能夠了。
咱們在建粒子系統以前，先創建一個畫布，畫布大小填充父畫布。而後在這個畫布上添加粒子系統的基本元素：ParticleSystem、Emitter、ImageParticle和應用文件import QtQuick.Particles 2.0代碼以下：設計

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Particles 2.0

Window {
    width: 800
    height: 320
    visible: true

    Rectangle {
        id: root
        anchors.fill: parent
        color: "#1f1f1f"

        ParticleSystem {
            id: myParticleSystem
        }

        Emitter {
            id: myEmitter
            system: myParticleSystem

            //發射器區域寬和高
            width: 240
            height: parent.height

            //發射頻率每秒500個元素
            emitRate: 500
            //每一個元素的生命週期是1000毫秒
            lifeSpan: 1000
            //每一個元素的大小是16*16像素
            size: 16
        }

        ImageParticle {
            system: myParticleSystem
            //Qt自帶粒子圖，能夠換成自定義圖片
            source: "qrc:///particleresources/fuzzydot.png"
            //粒子圖使用白色
            color: "white"
        }

    }
}

圖2（gif）3d

這個圖看來只有粒子，咱們還須要動態飄動的效果，下面在粒子發射器中增長以下代碼。rest

velocity: PointDirection {
	x: 150
}
acceleration: PointDirection {
	x: 12
}

水平向右設置150像素/秒的速度，水平向右添加一個12像素/秒^2的加速。若是咱們須要讓他向左發射時，可讓x:-150，加速設置也是同理，添加一個符號就表示向左加速。若是咱們須要向下發射能夠y:150，同理向上發射時是y:-150。
這時咱們就有了全部粒子向右飄動的界面，可是飄動狀態還比較單調。咱們能夠給他增長一些差別性的元素，讓元素更豐富。
讓元素在±8*8像素範圍內隨機變化code

sizeVariation: 8

在velocity中增長x/y速度的隨機變化orm

xVariation: 60
yVariation: 20

在acceleration中增長x/y加速度的隨機變化htm

xVariation: 6
yVariation: 5

到此元素飄動就有了雪花飛舞的感受了，飄動的層次均勻而且舒服。

如今感受顏色稍微有點單調，咱們能夠在ImageParticle中對顏色增長隨機係數

colorVariation: 0.1

顏色也有必定的波動了，以下圖顯示

圖3

如今咱們的任務就是讓發射器一邊發射一邊向右移動，直到移動到界面外，實現飄散的元素飛舞過程。這裏咱們可使用動畫元素，讓發射器在1秒內從窗體的最左邊向右側窗口外移動，實現的代碼以下

NumberAnimation {
	id: myAnimation
	//設定動畫的目標
	target: myEmitter
	//設定改變的屬性是x座標
	properties: "x"
	//x移動到父窗口的邊沿
	to: root.width
	//在1秒內完成移動
	duration: 1000
}

有了動畫代碼，咱們還須要一個觸發這個動畫的事件，另外粒子系統建立後先不要發送，咱們演示時經過鼠標來激活動畫和粒子系統。
在粒子系統ParticleSystem添加以下代碼，讓粒子系統在建立時中止運行。
running: false
而後提那家數據觸發代碼

MouseArea {
	anchors.fill: parent

	//鼠標點擊測試
	onClicked: {
		//讓myEmitter窗口復位，這樣鼠標可重複點擊
		if (myEmitter.x > 0)
		{
			myAnimation.stop()
			myEmitter.x = 0;
		}
			
		//激活粒子系統
		myParticleSystem.restart()
		//激活動畫
		myAnimation.restart()
	}
}

因爲每次動畫執行結束後，myEmitter窗口已經在顯示窗體之外了，那麼在點擊時先讓myEmitter窗口回到初始位置，咱們就實現了點擊後重復演示功能。
效果以下

圖4

到這裏咱們第一項飄散的效果就完成了，下一步是實現背景元素逐漸消失的特效。
咱們後續會用到LinearGradient元素，須要添加引用import QtGraphicalEffects 1.0。咱們首先測試文字，添加以下內容。注意添加的位置，qml添加圖層的規則是先創建的（代碼行號偏小的）圖層在底層，後創建的（代碼行號偏大的）圖層在頂層，咱們文字須要顯示在飄飛效果的下面顯示，因此代碼儘可能靠前放置。

Text {
	id:myText
	anchors.centerIn: parent
	text: "Hello world!"
	font.bold: true
	font.pixelSize: 120
	font.family: "微軟雅黑"
	visible: false
}

LinearGradient {
	source: myText
	anchors.fill: myText
	start: Qt.point(0, 0)
	end: Qt.point(myText.width, 0)
	gradient: Gradient {
		GradientStop{id: myGradientStart; position: 0.0; color: "#FFFFFFFF"}
		GradientStop{id: myGradientEnd; position: 0.1; color: "#FFFFFFFF"}
	}
}

代碼中Text項目被設置爲隱藏。是由於咱們下面的漸變效果已經基於Text進行漸變覆蓋，咱們須要顯示的是漸變的內容，Text的內容就再也不被須要了，且當漸變被設置爲透明時，會顯示背景的內容，這時Text若是顯示出了就不是咱們所但願的效果了。
如今文本內容有了，下一步如何讓其逐步消失，咱們能夠用動畫控制漸變的定位。
圖5
如上圖所示，首先讓定位點myGradientStart在200毫秒內變成無色，而後讓定位點myGradientEnd移動到終點，這個過程同時讓myGradientStart跟隨移動到終點，可是他們之間須要有個時間差，消失邊界纔會有個過渡區間。這裏咱們可使用順序動畫、並行動畫來組合完成這個功能。

最終代碼以下

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Particles 2.0
import QtGraphicalEffects 1.0


Window {
    width: 800
    height: 320
    visible: true

    Rectangle {
        id: root
        anchors.fill: parent
        color: "#1f1f1f"

        Text {
            id:myText
            anchors.centerIn: parent
            text: "Hello world!"
            font.bold: true
            font.pixelSize: 120
            font.family: "微軟雅黑"
            visible: false
        }

        LinearGradient {
            source: myText
            anchors.fill: myText
            start: Qt.point(0, 0)
            end: Qt.point(myText.width, 0)
            gradient: Gradient {
                GradientStop{id: myGradientStart; position: 0.0; color: "#FFFFFFFF"}
                GradientStop{id: myGradientEnd; position: 0.1; color: "#FFFFFFFF"}
            }
        }

        ParticleSystem {
            id: myParticleSystem
            running: false
        }

        Emitter {
            id: myEmitter
            system: myParticleSystem
            anchors.verticalCenter: parent.verticalCenter

            //發射器區域寬和高
            width: 240
            height: 180

            //發射頻率每秒500個元素
            emitRate: 500
            //每一個元素的生命週期是1000毫秒
            lifeSpan: 1000
            //每一個元素的大小是16*16像素
            size: 16
            //元素能夠在±8*8像素範圍內隨機變化
            sizeVariation: 8
            //元素髮射速度設置，使用點方向模式
            velocity: PointDirection {
                //水平方式速度 150像素/秒
                x: 150
                //隨着變量調整
                xVariation: 60
                yVariation: 20
            }
            //元素行進加速度設置，使用點方式模式
            acceleration: PointDirection {
                x: 12
                //隨着變量調整
                xVariation: 6
                yVariation: 5
            }
        }

        ImageParticle {
            system: myParticleSystem
            //Qt自帶粒子圖，能夠換成自定義圖片
            source: "qrc:///particleresources/fuzzydot.png"
            //粒子圖使用白色
            color: "white"
            //顏色隨機係數
            colorVariation: 0.1
        }

        ParallelAnimation {
            id: myAnimation

            //數值動畫
            NumberAnimation {
                //設定動畫的目標
                target: myEmitter
                //設定改變的屬性是x座標
                properties: "x"
                //x移動到父窗口的邊沿
                to: root.width
                //在1秒內完成移動
                duration: 1000
            }

            SequentialAnimation {
                PropertyAnimation {
                    target: myGradientStart
                    properties: "color"
                    to: "#00FFFFFF"
                    duration: 200
                }

                ParallelAnimation {
                    PropertyAnimation {
                        target: myGradientEnd
                        properties: "position"
                        to: "1.0"
                        duration: 1000
                    }

                    PropertyAnimation {
                        target: myGradientStart
                        properties: "position"
                        to: "0.9"
                        duration: 1000
                    }
                }

                PropertyAnimation {
                    target: myGradientEnd
                    properties: "color"
                    to: "#00FFFFFF"
                    duration: 200
                }
            }
        }

        MouseArea {
            anchors.fill: parent

            //鼠標點擊測試
            onClicked: {
                //讓myEmitter窗口復位，這樣鼠標可重複點擊
                if (myEmitter.x > 0)
                {
                    myAnimation.stop()
                    myEmitter.x = 0;

                    myGradientStart.position = 0.0
                    myGradientStart.color = "#FFFFFFFF"

                    myGradientEnd.position = 0.1
                    myGradientEnd.color = "#FFFFFFFF"
                }

                //激活粒子系統
                myParticleSystem.restart()
                //激活動畫
                myAnimation.restart()
            }
        }
    }
}

在以上代碼中簡單修改，就能夠實現圖6的效果了。