QML的粒子系统及图形渲染
在QML中，有两种特效可以让UI更加绚丽多彩，一种是粒子系统，另一种是图形渲染。
下面先来看一下粒子系统。
粒子系统主要有四个QML类型，分别是ParticleSystem、Emitter、ParticlePainter和Affector。在使用这些类型之前，首先要导入QtQuick.Particles模块。
ParticleSystem将其它的类型绑在了一起，也就是说，其它的类型之间想要交互的话就必须在同一个ParticleSystem中。
Emitter用来发射逻辑粒子，TrailEmitter也是一个发射器，两者的粒子发射位置不同，这些粒子都有自己的轨迹和生命期，但它们却是不可见的，想要可见的话就要用到ParticlePainter了，而且粒子的初始属性在其生命期内也是可以改变的，使用Affector。
ParticlePainter继承自Item元素，使用时要注意它的z属性，以明确粒子与其它可见元素的层次关系。ParticlePainter是个基本类型，本身并不描画任何东西，具体描画要使用其子类型ImageParticle、CustomParticle、ItemParticle。ImageParticle用来渲染照片，CustomParticle允许使用自定义的shader着色器来渲染，是作为vertex顶点数据来处理的，这个就涉及到OpenGl了，ItemParticle可以指定QML对象作为delegate来描画。
Affector是粒子系统中一个可选的组件，主要用来在粒子的生命期内改变其运行轨迹或提前结束其生命，不过出于性能考虑，在大容量的粒子系统中是不推荐使用Affector的。
在粒子系统中，还有几个重要的概念。每一个粒子都是粒子组（ParticleGroup）的成员，通过其name属性区分，当没有指定粒子所属的粒子组时，这些粒子默认也都在一个粒子组，不过name属性值是个空字符串，粒子组主要是为了方便地控制粒子行为状态。粒子系统的一个特性就是其随机性，如果不想要参数的随机变化也是可以取消的。关于粒子的方向，x和y属性影响的是矩形区域，角度angle和振幅magnitude影响的是在某个特定点的圆弧。形状（Shape）本身不可见，只是用来在其区域内随机选择一个点，默认的width和height都是0。
说了这么多，下面看一个简单的例子。
import QtQuick 2.3
import QtQuick.Particles 2.0
import QtQuick.Window 2.2
Window{
width: 450
height: 300
visible: true
Image {
source: "car.jpg"
anchors.fill: parent
}
Text {
text: "Left click to start/stop"
color: "white"
font.pixelSize: 20
}
MouseArea {
anchors.fill: parent
onClicked: particles.running = !particles.running
}
ParticleSystem {
id: particles
running: false
}
ImageParticle {
system: particles
source: "bubble_1.png"
alpha: 0.1
colorVariation: 0.6
}
Emitter {
width: 100
height: parent.height/3
anchors.top: parent.top
anchors.topMargin: parent.height/4
anchors.left: parent.left
anchors.margins: parent.width/4
system: particles
emitRate: 10
lifeSpan: 1000
size: 30
sizeVariation: 10
}
} 初始界面——
单击鼠标时会开始或暂停粒子发射，位置是图片右边的一个矩形区域，如下图片是粒子暂停发射时的状态——
再来说一下图形渲染，是用来创建图像组合效果的，需要导入QtGraphicalEffects模块，作用对象是QML可视化元素。
图像组合效果包括对象混合、颜色属性调整、渐变色彩、元素像素改变、阴影、模糊、运动式模糊、光晕及Mask效果，详细介绍可参考如下网址（Qt文档）：
http://doc.qt.io/qt-5/graphicaleffects.html
下面是运动式模糊效果的一个例子，使用了DirectionalBlur类型，即在某个指定的方向设置模糊效果。
import QtQuick 2.3
import QtGraphicalEffects 1.0
import QtQuick.Window 2.0
Window {
width: 450
height: 300
visible: true
Image {
id: car
anchors.fill: parent
source: "car.jpg"
sourceSize: Qt.size(parent.width, parent.height)
smooth: true
visible: false
}
DirectionalBlur {
anchors.fill: car
source: car
angle: 90
length: 8
samples: 20
}
}
说明 原文转载至：https://blog.csdn.net/ieearth/article/details/44493427