QML粒子系统酷炫效果合集（不定时更新）

一.烟花效果

Qt开源社区yafeilinux大佬出品，不仅有烟花爆炸效果，还有爆炸音效

原文链接：使用Qt Quick Particle System粒子系统实现烟花效果
源码链接：https://github.com/yafeilinux/fireworks

二.文字灰飞烟灭效果

来自简书SimbaHiker

原文链接：https://www.jianshu.com/p/74b4e1f11be9

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

Window {
    visible: true

    width: 480
    height: 240
    title: "Hello World"

    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;
            visible: false;
        }

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

        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: 1600
            lifeSpanVariation: 400
            emitRate: 4000
            size: 16
            sizeVariation: 8
            endSize: 8

            velocity: PointDirection {
                y: -32
                x: 32
                xVariation: 16
                yVariation: 16
            }
        }

        Turbulence {
            id: myTurb
            enabled: true
            anchors.fill: root
            strength: 48
            system: myParticleSystem
        }

        SequentialAnimation{
            id: myAnimation

            ParallelAnimation {
                PropertyAnimation  {
                    target: myEmitter
                    properties: "emitRate"
                    from: 0
                    to: 4000
                    duration: 1000
                }

                PropertyAnimation  {
                    target: myText
                    properties: "opacity"
                    to: 0.7
                    duration: 1000
                }

                PropertyAnimation {
                    target: myGradientEnd
                    properties: "color"
                    from: "#ffffffff"
                    to: "#00ffffff"
                    duration: 1000
                }

                PropertyAnimation {
                    target: myGradientStart
                    properties: "color"
                    from: "#ffffffff"
                    to: "#77ffffff"
                    duration: 1000
                }
            }

            ParallelAnimation {
                //数值动画
                PropertyAnimation  {
                    target: myText
                    properties: "opacity"
                    to: 0.0
                    duration: 1000
                }

                PropertyAnimation {
                    target: myGradientStart
                    properties: "color"
                    to: "#001f1f1f"
                    duration: 1000
                }

                PropertyAnimation {
                    target: myEmitter
                    properties: "emitRate"
                    to: 0
                    duration: 1000
                }
            }
            onStopped: myEmitter.enabled = false
        }

        MouseArea {
            anchors.fill: parent

            onClicked: {
                myEmitter.enabled = true
                myText.opacity = 1
                myEmitter.emitRate = 4000
                myAnimation.restart()
            }
        }
    }
}

本文链接：QML粒子系统酷炫效果合集（不定时更新）-CSDN博客