首页 > 代码库 > Qt Quick里的粒子系统

Qt Quick里的粒子系统

2024-10-22 12:47:39   214人阅读

    就差您这一票了亲：博客之星评选，点击投我一票，谢谢。投过了也可以点哦，每天都可以投投一票。

    Qt Quick提供了一个粒子系统，提供了四种主要的 QML 类型：

  • ParticleSystem ，粒子系统，它维护一个粒子系统相关的 Emitters 、 Painters 、 Affectors ，Emitters 、 Painters 、 Affectors 要想一起玩儿，就得指定同一个 ParticleSystem。 ParticleSystem
  • Painters ， 它负责渲染一个粒子。ParticlePainter 是基类， CustomParticle 、 ImageParticle 、 ItemParticle 是 Qt Quick 内置的三种粒子，都是 ParticlePainter 的派生类。
  • Emitters ，发射器，可以在给定的区域内突突突地发射逻辑粒子。具体的类为 Emitter 。
  • Affectors ， 效果器，通过改变发射出去的逻辑粒子的属性来产生特效。 Qt Quick 内置了 Age 、 Gravity 、Friction 、 Attractor 等等效果器。

吹泡泡

    小孩子很喜欢吹泡泡，有手动的，拿个形似放大镜的玩意儿在泡泡液里蘸一下，嘟起小嘴一吹，五彩缤纷的泡泡就漫天飞舞了。还有一种泡泡机，自动的，形状跟枝枪似的，有个开关，按着不放，它就不停的发射泡泡。我们的示例就模仿吹泡泡的效果。

    要使用粒子系统，得引入粒子模块：

import QtQuick.Particles 2.0

    ParticleSystem 、 Emitter 、 ImageParticle 、 ItemParticle 等等都在 Particles 这个模块里。

    好啦，创建一个 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";
    }
}

    50 行代码，用到了 ParticleSystem 、 ImageParticle 、 Emitter 、 TargetDirection 四个类。

    示例的运行效果如下图：

技术分享


    我把发射器放在左下角，发射出来的泡泡往右上方飘飞，边飞边变大，过几秒就消失。

    现在我们来解释一下用到的几个类。

ParticleSystem

    ParticleSystem 代表一个粒子系统，它维护一个公用的时间线，管理发射器、逻辑粒子与渲染器、效果器。它提供了一些属性：

  • empty ，布尔值，当粒子系统中的逻辑粒子都死翘翘时它被设置为 true 。也可以通过这个属性来暂停粒子系统，不过系统的时间线还是会更新。
  • paused ，布尔值，设置为 true ，粒子系统暂停，设置为 false ，粒子系统从暂停点恢复
  • running ，布尔值，设置为 false ，停止粒子系统。再次设置为 true 时，原先产生的那些逻辑粒子都会被销毁
  • particleStates ，Sprite 列表，列表中的每个 Sprite 的名字，与粒子系统中的某个粒子分组（ParticleGroup）的名字对应。 Sprite 用来定义粒子分组中的粒子状态变换时应用的效果。
    ParticleSystem 还有一些方法，如 pause() 、 resume() ，基本上和属性对应，看看帮助就明了意思了。

Emitter

    Emitter 用来发射逻辑粒子，在发射前， Emitter 会给逻辑粒子定义一些属性，比如大小、寿命等，这些属性后续可以被效果器（Affector）改变。 Emitter 发射出来的逻辑粒子，必须要和一个具体的 ParticlePainter 联系起来，才会被渲染，我们才能看到。 Emitter 、 Painter 、 Affector 都有一个 system 属性，用来指定它们关联的 ParticleSystem ，如果三者的 system 属性指向同一个 ParticleSystem 实例，那它们就自动关联在一起了，有肉大家吃，有汤大家喝。

    Emitter 类似一个普通的 Item ，它的 width 、 height 属性可以指定发射区域大小， anchors 可以完成布局。我在示例中设置发射区域为 80x80 的正方形，使用锚布局将 Emitter 放置在窗口左下角。

    除了常见的 Item 属性， Emitter 还有一些与粒子发射相关的属性：

  • size ，待发射的粒子的起始大小（像素），默认值为 16 。
  • endSize ，粒子寿命结束时的大小。在粒子的生命周期内，它的大小会从 size 到 endSize 线性变化。如果 endSize 为 -1 ，粒子大小则是固定的，始终是 size 。默认值为 -1 。
  • sizeVariation ，一个变量，设定粒子的 size 和 endSize 上下变化的最大范围，粒子系统会根据这个值，随便产生一个变量，添加到 size 和 endSize 属性上，用于产生大小随机变化的粒子。
  • lifeSpan ，寿命，单位是毫秒。默认为 1000 毫秒。
  • lifeSpanVariation ，一个变量，设定寿命的随机可变范围。默认为 0 。
  • emitRate ，发射频率，含义是每秒多少个。默认值为 10 。
  • velocity ，速度，类型是 StochasticDirection ，可以是 AngleDirection 、 PointDirection 、 TargetDirection 、 CumulativeDirection 中的一个。我的理解，velocity 界定了粒子的运动方向。我在示例中使用了 TargetDirection ，让粒子朝着右上方运行。如果不指定 velocity 属性，粒子会在原地出生、变化、死亡。

    Emitter 还有很多其它的属性，请参考 Qt 帮助来理解吧。

TargetDirection

    TargetDirection 是 Direction 的派生类，它的实例可以赋值给 Emitter 的 velocity 属性，用于指定 Emitter 发射的粒子的目标位置。

    TargetDirection 的属性不细说了，看 Qt 帮助即可明白含义，这里只提一下 targetItem 。 targetItem 用于指定目标位置关联的 Item 。在示例中，我定义了一个 Rectangle 对象，把它放在根窗口的右上方，然后将 TargetDirection 的 targetItem 属性指向这个 Rectangle 。当 targetItem 指向一个具体的 Item 时，targetX 、 targetY 属性就是相对于 targetItem 了。

ImageParticle

    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系列文章：

  • Qt Quick 简介
  • QML 语言基础
  • Qt Quick 之 Hello World 图文详解
  • Qt Quick 简单教程
  • Qt Quick 事件处理之信号与槽
  • Qt Quick事件处理之鼠标、键盘、定时器
  • Qt Quick 事件处理之捏拉缩放与旋转
  • Qt Quick 组件与对象动态创建详解
  • Qt Quick 布局介绍
  • Qt Quick 之 QML 与 C++ 混合编程详解
  • Qt Quick 图像处理实例之美图秀秀（附源码下载）
  • Qt Quick 之 PathView 详解
  • Qt Quick实例之挖头像
  • Qt Quick综合实例之文件查看器
  • Qt Quick调试之显示代码行号
  • Qt Quick实现的涂鸦程序
  • Qt Quick播放GIF动画
  • Qt Quick 中的 drag and drop（拖放）
  • Qt Quick里的AnimatedSprite的用法


Qt Quick里的粒子系统


联系
我们