粒子是计算机图形技术,可视化某些图形效果。典型的影响可能是:落叶,火灾,爆炸,流星,云,等。
在上面的例子中,我们使用了一个 ImageParticle.它继承于 ParticlePainter.用来显示每个粒子.我们同时也定义了一个发射器.在里面我们可以定义每个粒子的生命期,大小,方向及大小.运行我们的应用:
这里Emitter不再被ParticleSystem所包含,但是我们必须在里面定义一个叫做system的属性.
运行我们的例程,效果如下:
它不同于其他的图形渲染原因粒子渲染是基于模糊的方面。结果是不能在像素基底准确预测的。参数到粒子系统描述为随机模拟的边界。与粒子渲染的现象,往往很难与传统的渲染技术,可视化。好处是可以让要素QML与粒子系统交互。可以使用传统的动画技术动画通过属性的控制来实现动画效果。
概念
在粒子模拟的心脏是控制共享时间线的
ParticleSystem。一个场景可以有几个粒子系统,他们每个人具有独立的时间线。一个粒子是使用
Emitter发射并用
ParticlePainter来呈现,它可以是图像,QML项。发射器也提供了用于控制粒子向量空间的方向。一旦粒子被发射,它将不再被发射器所控制。粒子模块提供
Affector,它用来操控粒子被发射后的行为。
在一个系统中的颗粒可以共享使用 ParticleGroup元件定时切换。默认情况下,每一个粒子都是属于是空的('')组。
在一个系统中的颗粒可以共享使用 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。
其实在三者之外,还有一个不可忽视的类,那就是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