Qt Quick提供了一个粒子系统,提供了四种主要的 QML 类型:
小孩子很喜欢吹泡泡,有手动的,拿个形似放大镜的玩意儿在泡泡液里蘸一下,嘟起小嘴一吹,五彩缤纷的泡泡就漫天飞舞了。还有一种泡泡机,自动的,形状跟枝枪似的,有个开关,按着不放,它就不停的发射泡泡。我们的示例就模仿吹泡泡的效果。
要使用粒子系统,得引入粒子模块:
import QtQuick.Particles 2.0
好啦,创建一个 Qt Quick App 项目,加入一个泡泡图片,如下图:
然后就是 main.qml 了:
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Particles 2.0
Window {
visible: true;
width: 600;
height: 400;
color: "lightblue";
id: root;
Rectangle {
id: target;
color: "transparent";
width: parent.width/2;
height: 100;
anchors.top: parent.top;
anchors.right: parent.right;
anchors.margins: 4;
}
ParticleSystem {
id: particleSystem;
}
Emitter {
id: emitter;
system: particleSystem;
anchors.left: parent.left;
anchors.bottom: parent.bottom;
width: 80;
height: 80;
size: 20;
endSize: 80;
sizeVariation: 10;
emitRate: 20;
lifeSpan: 4000;
lifeSpanVariation: 200;
velocity: TargetDirection {
targetItem: target;
targetX: target.width/2;
targetY: 0;
targetVariation: target.width/2;
magnitude: root.height/3;
}
}
ImageParticle {
system: particleSystem;
source: "qrc:///bubble_1.png";
}
}
示例的运行效果如下图:
我把发射器放在左下角,发射出来的泡泡往右上方飘飞,边飞边变大,过几秒就消失。
现在我们来解释一下用到的几个类。
ParticleSystem 代表一个粒子系统,它维护一个公用的时间线,管理发射器、逻辑粒子与渲染器、效果器。它提供了一些属性:
Emitter 用来发射逻辑粒子,在发射前, Emitter 会给逻辑粒子定义一些属性,比如大小、寿命等,这些属性后续可以被效果器(Affector)改变。 Emitter 发射出来的逻辑粒子,必须要和一个具体的 ParticlePainter 联系起来,才会被渲染,我们才能看到。 Emitter 、 Painter 、 Affector 都有一个 system 属性,用来指定它们关联的 ParticleSystem ,如果三者的 system 属性指向同一个 ParticleSystem 实例,那它们就自动关联在一起了,有肉大家吃,有汤大家喝。
Emitter 类似一个普通的 Item ,它的 width 、 height 属性可以指定发射区域大小, anchors 可以完成布局。我在示例中设置发射区域为 80x80 的正方形,使用锚布局将 Emitter 放置在窗口左下角。
除了常见的 Item 属性, Emitter 还有一些与粒子发射相关的属性:
Emitter 还有很多其它的属性,请参考 Qt 帮助来理解吧。
TargetDirection 是 Direction 的派生类,它的实例可以赋值给 Emitter 的 velocity 属性,用于指定 Emitter 发射的粒子的目标位置。
TargetDirection 的属性不细说了,看 Qt 帮助即可明白含义,这里只提一下 targetItem 。 targetItem 用于指定目标位置关联的 Item 。在示例中,我定义了一个 Rectangle 对象,把它放在根窗口的右上方,然后将 TargetDirection 的 targetItem 属性指向这个 Rectangle 。当 targetItem 指向一个具体的 Item 时,targetX 、 targetY 属性就是相对于 targetItem 了。
ImageParticle 是 Qt Quick 提供的图片粒子类,用来渲染图片。它的属性很多很多,我在示例中使用 system 指定它关联的粒子系统,使用 source 指定它使用的图片。
你可以改变图片粒子的颜色(alpha 、 alphaVariation 、 redVariation 、 blueVariation 、 greenVariation ),旋转角度(rotation 、 rotationVariation 、 rotationVelocity 、rotationVelocityVariation )。
entryEffect 属性提供了一种简便的方式来设定粒子的进场、出场效果。默认值为 ImageParticle.Fade ,渐显渐隐,即在出现时透明度从 0 慢慢变为 1,消失时透明度从 1 变为 0 。我们的示例就是这种效果。它还可以取值 ImageParticle.None(没效果) 或 ImageParticle.Scale(出现时从 0 放大到 1,消失时从 1 缩小到 0 )。如果你想获得更好地进场、出场效果,可以使用 sizeTable 和 opacityTable 。
ImageParticle 还有很多属性,用到时对照着 Qt 帮助来理解吧。
回顾一下我的Qt Quick系列文章: