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的效果了。

4，总结

此例程主要使用的功能块粒子系统，给粒子增长一些随机设置参数，可让粒子系统显示更天然。另外在粒子系统中还有颇有趣的功能如精灵显示、粒子影响器等等。另一个主要的功能就是渐变功能，可让颜色A过渡到颜色B，及本例程中使用的从无色A过渡到有色B。

https://www.simbahiker.com/news/0220200428001.html