QML-粒子系統

一、概念

粒子系統主要有四個QML類型，分別是ParticleSystem、Emitter、ParticlePainter和Affector。

ParticleSystem：是粒子系統，剩余幾個類型需要綁定同一個粒子系統；

Emitter：粒子發射器；

ParticlePainter：粒子可視化方式；

Affector：控制已發射粒子的參數。

需要注意ParticlePainter有3個子類：

 

 

 

二、例子一：使用圖片作為的效果粒子

1、下載star.png【例子並為加入到資源中】

 

 

2、代碼1

import QtQuick 2.5
import QtQuick.Particles 2.0

Rectangle {
    id: root
    width: 480; height: 160
    color: "#1f1f1f"

    ParticleSystem {
        id: particleSystem
    }

    Emitter {
        id: emitter
        anchors.centerIn: parent
        width: 160; height: 80
        system: particleSystem
        emitRate: 10
        lifeSpan: 1000
        lifeSpanVariation: 500
        size: 16
        endSize: 32
    }

    ImageParticle {
//        source: "assets/particle.png"
        source: "assets/star.png"
        system: particleSystem
    }
}

效果

 

 

 3、代碼2：加一點效果，顏色、旋轉

import QtQuick 2.5
import QtQuick.Particles 2.0

Rectangle {
    id: root
    width: 480; height: 160
    color: "#1F1F1F"

    ParticleSystem {
        id: particleSystem
    }
    ImageParticle {
        source: "assets/star.png"
        system: particleSystem

        color: '#FFD700'        //粒子初始顏色為金色
        colorVariation: 0.2     //不同粒子顏色變化范圍+/-20%

        rotation: 0             //粒子初始角度
        rotationVariation: 45   //不同粒子初始角度+/-45

        rotationVelocity: 15    //粒子每秒旋轉45度
        rotationVelocityVariation: 15   //不同粒子每秒旋轉角度+/-15

        entryEffect: ImageParticle.Scale    //粒子入場效果為縮放
    }
    Emitter {
        id: emitter
        anchors.fill: parent
        system: particleSystem
        lifeSpan: 8000
        size: 32
        endSize: 16
    }
}

 

 

 

 

代碼3：加一點效果，移動

import QtQuick 2.5
import QtQuick.Particles 2.0

Rectangle {
    id: root
    width: 480; height: 240
    color: "#1F1F1F"

    ParticleSystem {
        id: particleSystem
    }

    ImageParticle {
        source: "assets/star.png"
        system: particleSystem
        color: '#FFD700'
        colorVariation: 0.2
        rotation: 0
        rotationVariation: 45
        rotationVelocity: 15
        rotationVelocityVariation: 15
        entryEffect: ImageParticle.Scale
    }

    Emitter {
        id: emitter
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
        width: 1;
        height: 1
        system: particleSystem
        emitRate: 10
        lifeSpan: 6400
        lifeSpanVariation: 400
        size: 32
        velocity: TargetDirection {
            targetItem: target1
            targetVariation: 20
            magnitude: 50
        }
        acceleration: TargetDirection {
            targetItem: target2
            targetVariation: 20
            magnitude: 50
        }
    }

    Rectangle {
        id: target1
        width: 40; height: width
        radius: width/2
        color: '#FF0000'
        opacity: 0.5
        MouseArea {
            anchors.fill: parent
            drag.target: target1
        }
    }

    Rectangle {
        id: target2
        width: 40; height: width
        radius: width/2
        color: '#00FF00'
        opacity: 0.5
        MouseArea {
            anchors.fill: parent
            drag.target: target2
        }
    }
}