当前位置：首页 > news >正文

QML动画--ParticleSystem

news 来源：原创 2025/4/23 20:58:08

ParticleSystem 是 QML 中用于创建和管理粒子系统的组件，可以制作各种粒子效果如火焰、烟雾、爆炸等。

基本用法

qml

import QtQuick.Particles 2.15ParticleSystem {id: particleSystemImageParticle {source: "particle.png"color: "red"alpha: 0.5}Emitter {anchors.centerIn: parentemitRate: 100lifeSpan: 2000size: 16velocity: AngleDirection { angle: 0; angleVariation: 360; magnitude: 100 }}
}

主要属性

属性	类型	描述	默认值
`running`	bool	是否运行	true
`paused`	bool	是否暂停	false
`empty`	bool	是否没有活动粒子	只读
`particleStates`	list<string>	可用粒子状态列表	只读
`system`	ParticleSystem	所属粒子系统 (用于分组)	null

方法

方法	参数	描述
`start()`	-	启动粒子系统
`stop()`	-	停止粒子系统
`pause()`	-	暂停粒子系统
`restart()`	-	重新启动粒子系统
`reset()`	-	重置粒子系统
`clear()`	-	清除所有粒子
`setState(stateName)`	string	设置粒子状态
`takeSnapshot()`	-	返回当前粒子的快照

信号

信号	描述
`started()`	系统启动时触发
`stopped()`	系统停止时触发
`paused()`	系统暂停时触发
`emptied()`	系统变空时触发

核心组件

1. ImageParticle (粒子渲染)

qml

ImageParticle {source: "particle.png"color: "#FF0000"alpha: 0.8size: 16sizeVariation: 4
}

2. Emitter (粒子发射器)

qml

Emitter {id: emitterwidth: 10; height: 10emitRate: 50lifeSpan: 1000size: 16velocity: AngleDirection {angle: 270angleVariation: 45magnitude: 100}
}

3. Affector (粒子影响器)

qml

Gravity {anchors.fill: parentmagnitude: 100angle: 90
}

使用示例

1. 火焰效果

qml

ParticleSystem {ImageParticle {source: "particle.png"color: "#FF6600"colorVariation: 0.3alpha: 0.5}Emitter {emitRate: 100lifeSpan: 1000size: 24sizeVariation: 8velocity: AngleDirection {angle: 270angleVariation: 30magnitude: 50magnitudeVariation: 20}acceleration: PointDirection {y: -50xVariation: 10}}
}

2. 爆炸效果

qml

ParticleSystem {ImageParticle {source: "sparkle.png"colorVariation: 0.8}Emitter {id: explosionemitRate: 5000lifeSpan: 500size: 32sizeVariation: 16velocity: AngleDirection {angleVariation: 360magnitude: 200magnitudeVariation: 100}enabled: false}Timer {interval: 2000running: trueonTriggered: explosion.burst(5000)}
}

完整示例

import QtQuick 2.15
import QtQuick.Particles 2.15
import QtQuick.Controls 2.15ApplicationWindow {width: 800height: 600visible: truetitle: "QML粒子系统完整示例"color: "#222222"// 主粒子系统ParticleSystem {id: particleSystemrunning: true// 1. 火焰粒子ImageParticle {id: flameParticlegroups: ["flame"]source: "qrc:/particle.png"color: "#FF9900"colorVariation: 0.3alpha: 0.6size: 24sizeVariation: 8entryEffect: ImageParticle.Scale}Emitter {id: flameEmittergroup: "flame"anchors.bottom: parent.bottomanchors.horizontalCenter: parent.horizontalCenterwidth: 120height: 40emitRate: 150lifeSpan: 1200size: 28sizeVariation: 10velocity: AngleDirection {angle: 270angleVariation: 30magnitude: 80magnitudeVariation: 30}acceleration: PointDirection {y: -40xVariation: 20}}// 2. 烟雾粒子ImageParticle {id: smokeParticlegroups: ["smoke"]source: "qrc:/smoke.png"color: "#AAAAAA"alpha: 0.3alphaVariation: 0.2size: 60sizeVariation: 30entryEffect: ImageParticle.Fade}Emitter {id: smokeEmittergroup: "smoke"anchors.bottom: parent.bottomanchors.horizontalCenter: parent.horizontalCenterwidth: 120height: 40emitRate: 30lifeSpan: 2000size: 40sizeVariation: 20velocity: AngleDirection {angle: 270angleVariation: 15magnitude: 40magnitudeVariation: 10}acceleration: PointDirection {y: -20xVariation: 10}}// 3. 爆炸粒子ImageParticle {id: explosionParticlegroups: ["explosion"]source: "qrc:/sparkle.png"color: "#FFFF00"colorVariation: 0.8alpha: 0.8size: 16sizeVariation: 8}Emitter {id: explosionEmittergroup: "explosion"emitRate: 0lifeSpan: 800size: 24sizeVariation: 12velocity: AngleDirection {angleVariation: 360magnitude: 300magnitudeVariation: 150}enabled: false}// 4. 重力影响器Gravity {anchors.fill: parentmagnitude: 100angle: 90}// 5. 粒子年龄影响器Age {anchors.fill: parentadvancePosition: truelifeLeft: 1000}}// 交互控制面板Rectangle {anchors.bottom: parent.bottomwidth: parent.widthheight: 120color: "#40000000"radius: 10Column {anchors.centerIn: parentspacing: 10Row {spacing: 20Button {text: particleSystem.running ? "暂停系统" : "启动系统"onClicked: particleSystem.running ? particleSystem.pause() : particleSystem.start()}Button {text: "创建爆炸"onClicked: {explosionEmitter.burst(500);explosionEmitter.x = Math.random() * (parent.parent.width - 100);explosionEmitter.y = Math.random() * (parent.parent.height - 100);}}Button {text: "清除粒子"onClicked: particleSystem.clear()}}Row {spacing: 20Slider {id: flameSliderwidth: 200from: 0to: 300value: 150onValueChanged: flameEmitter.emitRate = value}Text {text: "火焰密度: " + flameSlider.value.toFixed(0)color: "white"anchors.verticalCenter: parent.verticalCenter}}Row {spacing: 20Slider {id: smokeSliderwidth: 200from: 0to: 100value: 30onValueChanged: smokeEmitter.emitRate = value}Text {text: "烟雾密度: " + smokeSlider.value.toFixed(0)color: "white"anchors.verticalCenter: parent.verticalCenter}}}}// 状态指示器Text {anchors.top: parent.topanchors.right: parent.rightanchors.margins: 10text: "粒子数: " + particleSystem.particleCountcolor: "white"font.pixelSize: 16}
}