在Ubuntu QML应用中实现Particle特效

粒子是计算机图形技术，可视化某些图形效果。典型的影响可能是：落叶，火灾，爆炸，流星，云，等。

它不同于其他的图形渲染原因粒子渲染是基于模糊的方面。结果是不能在像素基底准确预测的。参数到粒子系统描述为随机模拟的边界。与粒子渲染的现象，往往很难与传统的渲染技术，可视化。好处是可以让要素QML与粒子系统交互。可以使用传统的动画技术动画通过属性的控制来实现动画效果。

概念

在粒子模拟的心脏是控制共享时间线的 ParticleSystem。一个场景可以有几个粒子系统，他们每个人具有独立的时间线。一个粒子是使用 Emitter发射并用 ParticlePainter来呈现，它可以是图像，QML项。发射器也提供了用于控制粒子向量空间的方向。一旦粒子被发射，它将不再被发射器所控制。粒子模块提供 Affector，它用来操控粒子被发射后的行为。
在一个系统中的颗粒可以共享使用 ParticleGroup元件定时切换。默认情况下，每一个粒子都是属于是空的（''）组。

• ParticleSystem - manages shared time-line between emitters
• Emitter - emits logical particles into the system
• ParticlePainter - particles are visualized by a particle painter
• Direction - vector space for emitted particles
• ParticleGroup - every particle is a member of a group
• Affector - manipulates particles after they have been emitted

一个粒子系统基本是由ParticleSystem、ImageParticle（ParticlePainter）以及Emitter组成的。其中ParticleSystem必不可少，因为这是要控制好各个粒子系统组件的必备类型。如果ParticleSystem是不作为Emitter的父类存在的话，那么Emitter有一个成员system必须要指定ParticleSystem的id。Emitter也是一个必不可少的类，它的作用是规定这些例子以何种方式发射、以及规定粒子的大小和生命周期。而ImageParticle是ParticlePainter的子类，它不是必备的，我们可以采用ParticlePainter的其它子类CustomParticle和ItemParticle来指定。它的作用是规定粒子的图片以及旋转、颜色、透明度等信息。

其实在三者之外，还有一个不可忽视的类，那就是Affector。一般来说，粒子在Emitter作用后会保持初始的速度、加速度和大小进行运动，此后这些数值不再受Emitter控制了，只有Affector才能控制粒子在运行过程中的数值大小。这里Affector只是一个基类，在它的基础上定义出来了很多根据不同效果而定义的子类。比如说Age、Attractor、Friction、Gravity、GroupGoal、SpriteGoal、Turbulence和Wander。

我们先来做一个简单的例子：

Main.qml

import QtQuick 2.0
import QtQuick.Particles 2.0
import Ubuntu.Components 1.1


MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "particle1.liu-xiao-guo"

    width: units.gu(100)
    height: units.gu(75)

    Page {
        title: i18n.tr("particle1")

        ParticleSystem {
            id: particle
            anchors.fill: parent
            running: true

            ImageParticle {
                anchors.fill: parent
//                source: "qrc:///particleresources/star.png"
                source: "images/starfish_1.png"
                alpha: 0.5
                alphaVariation: 0.2
                colorVariation: 1.0
            }

            Emitter {
                anchors.centerIn: parent
                emitRate: 400
                lifeSpan: 5000
                size: 20
                sizeVariation: 8
                velocity: AngleDirection {angleVariation: 180; magnitude: 60}
            }

            Turbulence {
                anchors.fill: parent
                strength: 2
            }
        }
    }
}

在上面的例子中，我们使用了一个 ImageParticle．它继承于 ParticlePainter．用来显示每个粒子．我们同时也定义了一个发射器．在里面我们可以定义每个粒子的生命期，大小，方向及大小．运行我们的应用：

我们可以修改上面的例程的一些参数，比如我们修改AngleDirection里的角度就图片．

上面的例程的源码在 https://github.com/liu-xiao-guo/particle1.　我们上面的代码也可以使用如下的格式：

    Page {
        title: i18n.tr("particle3")

        ParticleSystem {
            id: particleSystem
        }

        Emitter {
            id: emitter
            anchors.centerIn: parent
            anchors.fill: parent
            system: particleSystem
            emitRate: 10
            lifeSpan: 2000
            lifeSpanVariation: 500
            size: 54
            endSize: 32
        }

        ImageParticle {
            source: "images/realLeaf1.png"
            system: particleSystem
        }
    }

这里Emitter不再被ParticleSystem所包含，但是我们必须在里面定义一个叫做system的属性．

我们修改我们上面的例子．我们使用 Gravity Affector. 在Gravity中，我们可以使用加速度及角度．整个例程的代码为：

import QtQuick 2.0
import Ubuntu.Components 1.1
import QtQuick.Particles 2.0

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "particle2.liu-xiao-guo"

    width: units.gu(100)
    height: units.gu(75)

    Page {
        title: i18n.tr("particle2")

        ParticleSystem
        {
            anchors.centerIn: parent
            running: true

            ImageParticle {
                anchors.fill: parent
                // source: "qrc:///particleresources/star.png"
                source: "images/starfish_0.png"
                alpha: 0.5
                alphaVariation: 0.2
                colorVariation: 1.0
            }

            Emitter
            {
                emitRate: 20
                size: 50
                lifeSpan: 5000
                velocity: AngleDirection { magnitude: 100; angleVariation: 360  }
            }

            Gravity
            {
                angle: 90
                magnitude: 100
            }

            Turbulence {
                anchors.fill: parent
                strength: 2
            }
        }
    }
}

运行我们的例程，效果如下：

如上图所示，我们可以看到一种重力的效果．整个项目的源码在  https://github.com/liu-xiao-guo/particle2