16. QML中的一些粒子特效

1.说明

在使用unity开发游戏时,都会涉及到一些特效的开发。实际上在QML中也提供了一些可以做特效的控件,称之为粒子系统。本篇博客主要记录一些使用粒子做特效的方式。
特效--火焰效果:

2. 案例汇总

2.1 案例1

效果展示:

粒子特效1

相关代码:

cpp 复制代码
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0
import QtQuick.Particles 2.0

ApplicationWindow {
    id:root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        id:rec
        width: 300
        height: 300
        anchors.centerIn: parent
        color: "black"
        Button {
            text: "start"
            y: 0
            onClicked: { particles.start() }
        }
        Button {
            text: "pause"
            y: 70
            onClicked: { particles.pause() }
        }
        Button {
            text: "resume"
            y: 140
            onClicked: { particles.resume() }
        }
        Button {
            text: "stop"
            y: 210
            onClicked: { particles.stop() }
        }
        ParticleSystem {id:particles; running: false}
        ItemParticle {
            system: particles
            delegate: Rectangle {
                id:rectdel
                width: 10
                height: 10
                radius: 10
                color: "red"
            }
        }
        Emitter {
            system: particles
            x:100
            width: 200
            velocity: PointDirection { y:300; yVariation: 100 }
        }
    }
}
2.2 案例2 -- 雪花特效

效果展示:

雪花特效

相关代码:

cpp 复制代码
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0
import QtQuick.Particles 2.0


ApplicationWindow {
    id:root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        id:rec
        width: 300
        height: 300
        anchors.centerIn: parent

        ParticleSystem {
            anchors.fill: parent

            ImageParticle {
                sprites: Sprite {	//此处用的是sprite图像--存储了图片每一帧的不同姿态
                    name: "snow"
                    source: "qrc:/image/imgs/snowflake.png"
                    frameCount: 51
                    frameDuration: 40
                    frameDurationVariation: 8
                }
                colorVariation: 0.8
                entryEffect: ImageParticle.scale
            }
            Emitter {
                emitRate: 20
                lifeSpan: 3000
                velocity: PointDirection {y:80; yVariation: 40;}
                acceleration: PointDirection {y:4}
                size: 20
                sizeVariation: 10
                width: parent.width
                height: 100
            }
        }

    }
}
2.3 案例3 -- 火焰特效

效果展示:

火焰特效

相关代码:

cpp 复制代码
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0
import QtQuick.Particles 2.0

ApplicationWindow {
    id:root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        anchors.fill: parent
        color: "#222222"
        ParticleSystem {
            anchors.fill: parent
            ImageParticle {
                groups: ["smoke"]
                color: "#11111111"
                source: "qrc:/image/imgs/butterfly.png"
            }
            ImageParticle {
                groups: ["flame"]
                color: "#11ff400f"
                colorVariation: 0.1
                source: "qrc:/image/imgs/butterfly.png"
            }
            Emitter {
                anchors.centerIn: parent
                group: "flame"
                emitRate: 120
                lifeSpan: 1200
                size: 20
                endSize: 10
                sizeVariation: 10
                acceleration: PointDirection { y:-40 }
                velocity: AngleDirection { angle: 270; magnitude: 20; angleVariation: 22; magnitudeVariation: 5 }
            }
            TrailEmitter {
                group: "smoke"
                follow: "flame"
                emitRatePerParticle: 1
                lifeSpan: 2400
                lifeSpanVariation: 400
                size: 16
                endSize: 8
                sizeVariation: 8
                acceleration: PointDirection { y:-40 }
                velocity: AngleDirection { angle: 270; magnitude: 40; angleVariation: 22; magnitudeVariation: 5 }
            }
        }
    }
}
2.4 案例4 -- 粒子组间过渡

效果展示:

粒子组过渡

相关代码:

cpp 复制代码
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0
import QtQuick.Particles 2.0


ApplicationWindow {
    id:root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        anchors.fill: parent
        color: "#222222"
        ParticleSystem {
            anchors.fill: parent

            ParticleGroup {
                name: "unlit"
                duration: 1000
                to: {"lighting": 1, "unlit": 5}
                ImageParticle {
                    source: "qrc:/image/imgs/butterfly.png"
                    color: "#2060160f"
                    colorVariation: 0.1
                }
                Emitter {
                    height: parent.height / 2
                    emitRate: 4
                    lifeSpan: 3000
                    size: 24
                    sizeVariation: 4
                    velocity: PointDirection {x: 120; xVariation: 80; yVariation: 50}
                    acceleration: PointDirection {y: 120}
                }
            }
            ParticleGroup {
                name: "lighting"
                duration: 200
                to: {"lit": 1}
            }
            ParticleGroup {
                name: "lit"
                duration: 2000
                TrailEmitter {
                    group: "flame"
                    emitRatePerParticle: 50
                    lifeSpan: 200
                    emitWidth: 8
                    emitHeight: 8
                    size: 24
                    sizeVariation: 8
                    endSize: 4
                }
            }
            ImageParticle {
                groups: ["flame", "lit", "lighting"]
                source: "qrc:/image/imgs/butterfly.png"
                color: "#00ff400f"
                colorVariation: 0.1
            }
        }
    }
}
相关推荐
钱彬 (Qian Bin)9 小时前
《使用Qt Quick从零构建AI螺丝瑕疵检测系统》——6. 传统算法实战:用OpenCV测量螺丝尺寸
教程·cmake·qml·qt quick·工业软件·工业瑕疵检测·qt6.9.1
钱彬 (Qian Bin)2 天前
《使用Qt Quick从零构建AI螺丝瑕疵检测系统》——4. 前后端联动:打通QML与C++的任督二脉
c++·qt·教程·qml·qt quick·qt 6.9.1·工业瑕疵检测
钱彬 (Qian Bin)5 天前
《使用Qt Quick从零构建AI螺丝瑕疵检测系统》——0. 博客系列大纲
人工智能·qt·qml·瑕疵检测·qt quick·yolo8·工业质检
丁劲犇7 天前
Qt Graphs 模块拟取代 charts 和 data visualization还有很长的路要走
c++·qt·qml·visualization·charts·graphs
cpp_learners11 天前
QML与C++相互调用函数并获得返回值
c++·qt·qml
Little-Hu18 天前
QML事件处理:鼠标、拖拽与键盘事件
qml
cpp_learners19 天前
QML与C++交互之创建自定义对象
c++·qt·qml
钱彬 (Qian Bin)20 天前
一文掌握Qt Quick数字图像处理项目开发(基于Qt 6.9 C++和QML,代码开源)
c++·开源·qml·qt quick·qt6.9·数字图像处理项目·美观界面
智驾1 个月前
QML革命:下一代GUI开发的核心优势详解
qt·qml
做一个坚强的女汉子1 个月前
Qt Quick 与 QML(三)qml中的基础控件
qt·qml