Qt Quick里的粒子系统

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

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

时间: 2024-10-25 19:56:08

Qt Quick里的粒子系统的相关文章

Qt Quick里的图形效果——渐变(Gradient)

Qt Quick提供了三种渐变图形效果: ConicalGradient,锥形渐变 LinearGradient,线性渐变 RadialGradient,径向渐变 效果 下图是我设计的示例效果: 图 1 渐变图形效果 如图所示,第一行为线性渐变,第二行为锥形渐变,第三行为径向渐变. 渐变元素与其他图形效果元素不同之处在于:渐变元素既可以用来改变一个已有的元素(如Image),也有可以独立使用.如你在示例效果图中看到的那样,每一行前两个是独立使用渐变元素的效果,后两个是讲渐变效果应用到其它元素上的

Qt Quick里的图形效果——颜色(Color)

Qt Quick提供了通过改变一个 Item 的颜色来产生各种各样效果的元素.有下面几种: BrightnessContrast,调整亮度和对比度 ColorOverlay,在源 Item 上覆盖一层颜色 Colorize,设置源 Item 的 HSL 颜色空间 Desaturate,降低颜色的饱和度 GammaAdjust,使用 gamma 曲线来改变源 Item 的照度 HueSaturation,在 HSL 颜色空间改变源 Item 的颜色 LevelAdjust,在 RGBA 颜色空间调

Qt Quick里的图形效果:阴影(Drop Shadow)

Qt Quick提供了两种阴影效果: DropShow,阴影.这个元素会根据源图像,产生一个彩色的.模糊的新图像,把这个新图像放在源图像后面,给人一种源图像从背景上凸出来的效果. InnerShadow,内阴影.这个元素会根据源图像,产生一个彩色的.模糊的新图像,与 DropShadow不同的是,新图像会放在源图像里面. 效果 下面是我设计的示例效果. 首先是 DropShadow : 图1 阴影效果 然后是内阴影效果: 图2 内阴影效果 源码分析 如图1所示,界面被分为三部分. 最上面的是源图

Qt Quick里的AnimatedSprite的用法

之前用 AnimatedImage 时一直对 AnimatedSprite 很奇怪,想试一下怎么用,一下子没试出来,放下了,后来一直没时间. OK ,今天想起来,又搞了一下. AnimatedSprite 说明 AnimatedSprite 元素用来播放精灵动画. 一些常见的属性解释: source 属性是 url 类型的,接受一个包含多帧的图片. frameWidth 和 frameHeight 指定帧大小. frameX 和 frameY 指定第一帧的左上角. frameCount 指定这个

Qt Quick核心编程从入门到精通

本文是个推荐文章,推荐foruok博主的Qt quick 核心编程的系列经典编程! foruok 博主 的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 写了个小游戏:疯狂算数.支持 Windows 和 Android 两个平台. 就差您这一票了亲:博客之星评选,点击投我一票,谢谢.投过了也可以点哦,每天都可以投投一票. 游戏简单,但牵涉到下面你的 Qt Quick 主题: 自己实现一个按钮 自适应分辨率 国际化 QML与C++混合编程 APK图标设置 APK名称汉化 动画 其实所有这些内容,在我的书<Qt Quick核心编程>里都讲到了,感兴趣的朋友可以看我的书. 大概来看一下吧,先看效果. Android 手机运行效

Qt Quick实现的涂鸦程序

之前一直以为 Qt Quick 里 Canvas 才可以自绘,后来发觉不是,原来还有好几种方式都可以绘图!可以使用原始的 OpenGL(Qt Quick 使用 OpenGL 渲染),可以构造QSGNode 来绘图,还可以使用 QPainter !哇, QPainter 我很熟悉啊.于是,我用 QPainter 结合 QML 实现了一个简单的涂鸦程序: PaintedItem .它有下列功能: 设置线条宽度 设置线条颜色 设置背景颜色 清除涂鸦 无限级undo 程序很简陋,效果如下: 图1 Pai

为什么写作《Qt Quick核心编程》

我的第二本书<Qt Quick 核心编程>上市了,各个网站的预售链接已经上线: 淘宝惊喜价 china-pub 京东 亚马逊 本书的前言: 今年(2014年)4月份,我开始写作<Qt on Android核心编程>,该书主要讲述Qt on Android的核心技术,比如信号与槽.元对象系统.Qt与Android的衔接.Android相关的开发主题等,对于界面开发,还是基于Qt传统的Widgets. 在写作的过程中,不断有技术同仁向我咨询Qt Quick的问题,有诸如对象如何声明.怎

Qt Quick之ListView下拉刷新数据

Qt Quick里的ListView,本身是Flickable的派生类,当你用鼠标拖曳或者手指触摸(触摸屏)时,会产生flickStarted和flickEnded两个信号,利用这两个信号,就可以实现下拉刷新数据,当然上拉刷新也是可以的. 创建一个Qt Quick App项目,添加dynamicModel.h和dynamicModel.cpp两个文件,用于实现DynamicListModel.项目创建过程参考<Qt Quick 之 Hello World 图文详解>. 我们实现的下拉刷新效果有