当前位置： 移动技术网 > IT编程>网页制作>CSS > QML元素粒子系统知识讲解

QML元素粒子系统知识讲解

2018年11月01日  | 移动技术网IT编程  | 我要评论

粒子是一个比较难理解的内容,它掌控着控制酷炫效果的操作,下面通过介绍粒子系统的构造和属性来学习吧

要想完成粒子系统必须要先有 particlesystem(粒子系统)来操控粒子系统的时间线,通俗的讲就是粒子系统的实例

下面来看看它的属性

属性:type 含义
empty:bool 表明粒子系统是否还有粒子存活
particlestates:list< sprite > 可以用来提供粒子群的子集对随机状态进行过渡
paused:bool 粒子系统是否已经停止工作
running:bool 粒子系统是否正在工作

同时我们需要一个 emitter(发射器)来指定粒子发射的工作方式

emiiter

属性:type 含义
acceleration:stochasticdirection 粒子发射的起始加速度
emitrate:real 每秒发射的粒子数 默认是 10
enabled:bool 表明粒子发射器是否工作
endsize:real 表明粒子结束生命的大小,通过插值过渡
group:string 发射的粒子群名
lifespan:int 以毫秒为单位的粒子生存周期
lifespanvariation:int 发射器生存器内发射的最大粒子数
shape:shape 发射的形状
size:real 粒子的开始大小
sizevariation:real 粒子大小变化
starttime:int 粒子发射器多少毫秒后开始发射
system:particlesystem 指定粒子系统
velocity:stochasticdirection 粒子速度
velocityfrommovement:qrel 相当于粒子发射器的速度,如果指定的话也会加给粒子

此时我们需要粒子画笔,来描绘粒子的形状 particlepainter

属性:type 含义
groups:list < string > 描述粒子群的链表
system:particlesystem 指示所属粒子系统

再来看看粒子群 particlegroup

属性:type 含义
duration:int 时间段,以毫秒为单位
durationvariation:particlesystem 指定控制时间段的粒子系统
name:string 指定粒子群的名称
to:particlesystem 过渡有效的加权列表

我们有imageparticle，itemparticle可以指定图片或item成为粒子

除了掌握粒子的具体表现方式之外,我们还需要指定粒子的行为,具体分为以下情况

粒子的发射频率 (每秒发出多少)

粒子存活时间

粒子存活周期变化

粒子起始大小

粒子大小变化

粒子结束大小

粒子速度方向及其变化

粒子加速度及其变化

以上一般由发射器指定

下面可能还有

粒子起始颜色

粒子颜色变化幅度

粒子起始偏转角度

粒子偏转角度变化幅度

粒子起始透明度

粒子透明度变化幅度

以上可能由paniter指定

粒子的方向又有 angledirection pointdirection targetdirection等,可以查询文档

下面来给出个例子 demo

import qtquick 2.7
import qtquick.particles 2.0

rectangle {
    id:root;
    width:600;
    height:500;
    image {
        source:"./images/bg.jpg"
        anchors.fill:parent;
        fillmode:image.stretch;
    }
    particlesystem {
        id:particlesystem;
    }

    emitter {
        id:emmiter;
        anchors.fill:parent;
        system:particlesystem;
        emitrate:12;
        lifespan:3000;
        size:30;
        endsize:50;
    }

    imageparticle {
        source:"./images/crab.png";
        rotation:10;
        rotationvariation:30;
        system:particlesystem;
        color:"red";
        colorvariation:0.5;
    }
}

这里写图片描述

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网