import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Particles 2.0
Window
{
visible: true
width: 1000;
height: 800
Rectangle
{
id: root;
anchors.fill: parent
color: "#1f1f1f"
ParticleSystem //粒子系统
{
id: particles
}
Emitter //发射器 向系统发射粒子 定义了发射区域和发射粒子的基础属性
{
id: emitter
y:400
// width: 900;
// height: 700
width: 1;//将发射器的宽度和高度都设置为1px,意味着所有粒子都会从相同位置发射,也就具有相同的轨迹起点。
height: 1
system: particles
emitRate: 10// 发射器每秒发射10个粒子
lifeSpan: 9000//每个粒子的生命周期是9000毫秒 默认为1000毫秒
lifeSpanVariation: 500//一个已发射粒子的生命周期变化是500毫秒
size: 16// 一个粒子开始的大小是16个像素
endSize: 32//生命周期结束时的大小是32个像素
//速度 可以不设置
// velocity:
// AngleDirection //角度方向
// {
// //粒子的发射将会使用指定的角度属性。角度值在0到360度之间,0度代表指向右边
// angle: 0//粒子的移动方向指向0度 即向右移动
// angleVariation: 15//粒子的角度变化在+/-15度之间
// magnitude: 100//粒子每秒钟移动100像素
// magnitudeVariation: 50//粒子每秒钟移动像素在+/-50像素之间
// }
// velocity: //使用点方向作为速度
// PointDirection
// {
// x: 100
// y: 0
// xVariation: 0
// yVariation: 100/6
// }
velocity:
TargetDirection //目标方向作为速度 粒子都流向这个目标位置
{
targetX: 100
targetY: 0
targetVariation: 100/6
magnitude: 100
}
//加速度是每个粒子加速度矢量(大小 方向)
// acceleration:
// AngleDirection
// {
// //设置这两个值可使粒子的运动轨迹是个弧形
// angle: 90
// magnitude: 25
// }
/*
用来显示发射器的几何形状。这个可视化展示了粒子在发射器矩形框内发射,
但是渲染效果不被限制在发射器的矩形框内。渲染位置依赖于粒子的寿命和方向。
*/
}
// ItemParticle //粒子项 粒子项可以将QML元素项作为粒子发射
// {
// system: particles
// delegate: Rectangle
// {
// id: rect
// width: 10
// height: 10
// color: "red"
// radius: 10
// }
// }
//也可以不使用粒子项而使用粒子画笔
ImageParticle
{
source: "qrc:/img/star.png"
system: particles
color: '#FFD700'//粒子使用金色来进行初始化
colorVariation: 0.2//不同的粒子颜色变化范围为+/- 20%
rotation: 15//粒子初始角度
rotationVariation: 45//不同的粒子在+/-45度之间变化
rotationVelocity: 15//每个例子会不断的以每秒15度旋转
rotationVelocityVariation: 15//每个粒子的旋转速度在+/-15度之间变化
entryEffect: ImageParticle.Scale//粒子产生时的效果:缩放
}
}
}
粒子影响器
粒子由发射器发射。一旦粒子发射出来,发射器的任务就已经完成,不会再对粒子有任何影响。如果需要影响已经发射出的粒子,需要使用影响器(affector)。影响器有很多种类:
- Age:改变粒子的生命周期,一般用于提前结束粒子的生命周期
- Attractor:将粒子吸引到一个指定的点
- Friction:按比例降低粒子的当前速度
- Gravity:添加一个有一定角度的加速度
- Turbulence:为粒子增加一个图像噪音
- Wander:随机改变粒子轨迹
- GroupGoal:改变粒子组的状态
- SpriteGoal:改变精灵粒子的状态
Age影响器
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Particles 2.0
Window
{
visible: true
width: 1000;
height: 800
Rectangle
{
id: root;
anchors.fill: parent
color: "#1f1f1f"
ParticleSystem //粒子系统
{
id: particles
}
Emitter //发射器 向系统发射粒子 定义了发射区域和发射粒子的基础属性
{
id: emitter
y:400
// width: 900;
// height: 700
width: 1;//将发射器的宽度和高度都设置为1px,意味着所有粒子都会从相同位置发射,也就具有相同的轨迹起点。
height: 1
system: particles
emitRate: 10// 发射器每秒发射10个粒子
lifeSpan: 9000//每个粒子的生命周期是9000毫秒 默认为1000毫秒
lifeSpanVariation: 500//一个已发射粒子的生命周期变化是500毫秒
size: 16// 一个粒子开始的大小是16个像素
endSize: 32//生命周期结束时的大小是32个像素
//速度 可以不设置
// velocity:
// AngleDirection //角度方向
// {
// //粒子的发射将会使用指定的角度属性。角度值在0到360度之间,0度代表指向右边
// angle: 0//粒子的移动方向指向0度 即向右移动
// angleVariation: 15//粒子的角度变化在+/-15度之间
// magnitude: 100//粒子每秒钟移动100像素
// magnitudeVariation: 50//粒子每秒钟移动像素在+/-50像素之间
// }
// velocity: //使用点方向作为速度
// PointDirection
// {
// x: 100
// y: 0
// xVariation: 0
// yVariation: 100/6
// }
velocity:
TargetDirection //目标方向作为速度 粒子都流向这个目标位置
{
targetX: 100
targetY: 0
targetVariation: 100/6
magnitude: 100
}
//加速度是每个粒子加速度矢量(大小 方向)
// acceleration:
// AngleDirection
// {
// //设置这两个值可使粒子的运动轨迹是个弧形
// angle: 90
// magnitude: 25
// }
/*
用来显示发射器的几何形状。这个可视化展示了粒子在发射器矩形框内发射,
但是渲染效果不被限制在发射器的矩形框内。渲染位置依赖于粒子的寿命和方向。
*/
}
// ItemParticle //粒子项 粒子项可以将QML元素项作为粒子发射
// {
// system: particles
// delegate: Rectangle
// {
// id: rect
// width: 10
// height: 10
// color: "red"
// radius: 10
// }
// }
//也可以不使用粒子项而使用粒子画笔
ImageParticle
{
source: "qrc:/img/star.png"
system: particles
color: '#FFD700'//粒子使用金色来进行初始化
colorVariation: 0.2//不同的粒子颜色变化范围为+/- 20%
rotation: 15//粒子初始角度
rotationVariation: 45//不同的粒子在+/-45度之间变化
rotationVelocity: 15//每个例子会不断的以每秒15度旋转
rotationVelocityVariation: 15//每个粒子的旋转速度在+/-15度之间变化
entryEffect: ImageParticle.Scale//粒子产生时的效果:缩放
}
}
Age
{
anchors.horizontalCenter: parent.horizontalCenter
width: 140;
height: 620
x:200
system: particles
advancePosition: true
lifeLeft: 1500
once: true
Rectangle
{
//这里设置的粒子寿命是9000ms 当粒子经过这个区域时粒子的寿命变成1500ms
//advancePosition设置为true则粒子会出现在根据预期当粒子寿命为1500ms时应出现的位置
anchors.fill: parent
color: 'transparent'
border.color: 'green'
border.width: 2
opacity: 0.8
}
}
}
Attractor影响器
将粒子吸引到使用 pointX 和 pointY 定位的指定点,该点的坐标相对于 Attractor。strength属性指定吸引的强度。
Attractor
{
anchors.horizontalCenter: parent.horizontalCenter
width: 140;
height: 620
x:200
system: particles
pointX: 0
pointY: 0
strength: 1.0
Rectangle
{
anchors.fill: parent
color: 'transparent'
border.color: 'green'
border.width: 2
opacity: 0.8
}
}
Friction控制器
会按照一定比例降低粒子的速度。粒子会按照factor为 0.8 的比例降低粒子的速度,直到降低到 25 像素/秒:
Friction
{
anchors.horizontalCenter: parent.horizontalCenter
width: 140;
height: 620
x:200
system: particles
factor : 0.8
threshold: 25
Rectangle
{
anchors.fill: parent
color: 'transparent'
border.color: 'green'
border.width: 2
opacity: 0.8
}
}
Gravity影响器
为粒子添加一个加速度,所有进入到影响器范围内的粒子都会添加一个加速度。
Gravity
{
width: 140;
height: 620
x:200
system: particles
magnitude: 50
angle: 90
Rectangle
{
anchors.fill: parent
color: 'transparent'
border.color: 'green'
border.width: 2
opacity: 0.8
}
}
Turbulence影响器
为每个粒子添加一个力向量。每个粒子所获得的随机力向量都是随机的,strength 属性定义了作用到粒子上面的向量有多强。一旦进入到影响器的范围内,粒子就像发疯一样到处乱穿,而不是原本按照从左向右的方向保持一个大致的轨迹。
Turbulence
{
anchors.horizontalCenter: parent.horizontalCenter
width: 340;
height: 620
x:200
system: particles
strength: 100
Rectangle
{
anchors.fill: parent
color: 'transparent'
border.color: 'green'
border.width: 2
opacity: 0.8
}
}
Wander影响器
- affectedParameter 属性指定Wander可以控制哪一个属性(速度、位置或者加速度等)
- pace 属性指定每秒该属性变化的最大值
- xVariance 和 yVariance 指定粒子轨迹 x 和 y 坐标的浮动区间
下面例子中,影响器作用于粒子轨迹的位置属性,轨迹位置会以每秒 200 次的频率,在 x 方向上随机震动:
Wander
{
anchors.horizontalCenter: parent.horizontalCenter
width: 340;
height: 620
x:200
system: particles
affectedParameter: Wander.Position
pace: 200
// yVariance: 240
xVariance: 500
Rectangle
{
anchors.fill: parent
color: 'transparent'
border.color: 'green'
border.width: 2
opacity: 0.8
}
}