在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.0import QtQuick.Particles 2.0import Ubuntu.Components 1.1MainView {    // 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.0import Ubuntu.Components 1.1import 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