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 //particle system { id: particles } Emitter //Emitters emit particles to the system, defining the emission region and the basic attributes of the emitted particles { id: emitter y:400 // width: 900; // height: 700 width: 1;//Setting the width and height of the emitter to 1px means that all particles are emitted from the same position, which means they have the same track start point. height: 1 system: particles emitRate: 10// The emitter emits 10 particles per second lifeSpan: 9000//The life cycle of each particle is 9000 milliseconds, and the default is 1000 milliseconds lifeSpanVariation: 500//The life cycle change of an emitted particle is 500 milliseconds size: 16// The starting size of a particle is 16 pixels endSize: 32//The size at the end of the life cycle is 32 pixels //The speed can not be set // velocity: // AngleDirection / / angle direction // { // //The emission of particles will use the specified angle attribute. The angle value is between 0 and 360 degrees, and 0 degrees means pointing to the right // angle: 0 / / the moving direction of the particle points to 0 degrees, that is, it moves to the right // angleVariation: 15 / / the angle change of particles is + / - 15 degrees // Magnet: 100 / / particles move 100 pixels per second // magnitudeVariation: 50 / / particles move between + / - 50 pixels per second // } // Velocity: / / use the point direction as the velocity // PointDirection // { // x: 100 // y: 0 // xVariation: 0 // yVariation: 100/6 // } velocity: TargetDirection //The target direction as velocity particles flow to this target position { targetX: 100 targetY: 0 targetVariation: 100/6 magnitude: 100 } //Acceleration is the acceleration vector (magnitude direction) of each particle // acceleration: // AngleDirection // { // //Setting these two values makes the particle's trajectory an arc // angle: 90 // magnitude: 25 // } /* Used to display the geometry of the emitter. This visualization shows the particles emitted in the emitter rectangle, However, the rendering effect is not limited to the rectangle of the emitter. The render position depends on the lifespan and orientation of the particles. */ } // ItemParticle / / a particle item can emit a QML element item as a particle // { // system: particles // delegate: Rectangle // { // id: rect // width: 10 // height: 10 // color: "red" // radius: 10 // } // } //You can also use particle brushes instead of particle items ImageParticle { source: "qrc:/img/star.png" system: particles color: '#FFD700 '/ / particles are initialized with gold colorVariation: 0.2//The color variation range of different particles is + / - 20% rotation: 15//Particle initial angle rotationVariation: 45//Different particles vary between + / - 45 degrees rotationVelocity: 15//Each example will continue to rotate at 15 degrees per second rotationVelocityVariation: 15//The rotational speed of each particle varies between + / - 15 degrees entryEffect: ImageParticle.Scale//Effect when particles are generated: scaling } } }
Particle controller
Particles are emitted by the emitter. Once the particles are emitted, the task of the emitter is completed and will no longer have any impact on the particles. If you need to influence the emitted particles, you need to use an effector. There are many kinds of impactors:
- Age: change the life cycle of particles. It is generally used to end the life cycle of particles in advance
- Attractor: attracts particles to a specified point
- Friction: proportionally reduces the current speed of particles
- Gravity: add an acceleration with a certain angle
- Turbonce: adds an image noise to the particles
- Wonder: randomly changing particle trajectories
- GroupGoal: change the state of the particle group
- SpriteGoal: change the state of Sprite particles
Age controller
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 //particle system { id: particles } Emitter //Emitters emit particles to the system, defining the emission region and the basic attributes of the emitted particles { id: emitter y:400 // width: 900; // height: 700 width: 1;//Setting the width and height of the emitter to 1px means that all particles are emitted from the same position, which means they have the same track start point. height: 1 system: particles emitRate: 10// The emitter emits 10 particles per second lifeSpan: 9000//The life cycle of each particle is 9000 milliseconds, and the default is 1000 milliseconds lifeSpanVariation: 500//The life cycle change of an emitted particle is 500 milliseconds size: 16// The starting size of a particle is 16 pixels endSize: 32//The size at the end of the life cycle is 32 pixels //The speed can not be set // velocity: // AngleDirection / / angle direction // { // //The emission of particles will use the specified angle attribute. The angle value is between 0 and 360 degrees, and 0 degrees means pointing to the right // angle: 0 / / the moving direction of the particle points to 0 degrees, that is, it moves to the right // angleVariation: 15 / / the angle change of particles is + / - 15 degrees // Magnet: 100 / / particles move 100 pixels per second // magnitudeVariation: 50 / / particles move between + / - 50 pixels per second // } // Velocity: / / use the point direction as the velocity // PointDirection // { // x: 100 // y: 0 // xVariation: 0 // yVariation: 100/6 // } velocity: TargetDirection //The target direction as velocity particles flow to this target position { targetX: 100 targetY: 0 targetVariation: 100/6 magnitude: 100 } //Acceleration is the acceleration vector (magnitude direction) of each particle // acceleration: // AngleDirection // { // //Setting these two values makes the particle's trajectory an arc // angle: 90 // magnitude: 25 // } /* Used to display the geometry of the emitter. This visualization shows the particles emitted in the emitter rectangle, However, the rendering effect is not limited to the rectangle of the emitter. The render position depends on the lifespan and orientation of the particles. */ } // ItemParticle / / a particle item can emit a QML element item as a particle // { // system: particles // delegate: Rectangle // { // id: rect // width: 10 // height: 10 // color: "red" // radius: 10 // } // } //You can also use particle brushes instead of particle items ImageParticle { source: "qrc:/img/star.png" system: particles color: '#FFD700 '/ / particles are initialized with gold colorVariation: 0.2//The color variation range of different particles is + / - 20% rotation: 15//Particle initial angle rotationVariation: 45//Different particles vary between + / - 45 degrees rotationVelocity: 15//Each example will continue to rotate at 15 degrees per second rotationVelocityVariation: 15//The rotational speed of each particle varies between + / - 15 degrees entryEffect: ImageParticle.Scale//Effect when particles are generated: scaling } } Age { anchors.horizontalCenter: parent.horizontalCenter width: 140; height: 620 x:200 system: particles advancePosition: true lifeLeft: 1500 once: true Rectangle { //The particle life set here is 9000ms. When the particle passes through this area, the particle life becomes 1500ms //If advancePosition is set to true, the particles will appear at the position expected when the particle life is 1500ms anchors.fill: parent color: 'transparent' border.color: 'green' border.width: 2 opacity: 0.8 } } }
Attractor controller
Attracts particles to a specified point positioned using pointX and pointY, whose coordinates are relative to the Attractor. The strength property specifies the strength of the attraction.
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 controller
It will reduce the speed of particles by a certain proportion. Particles slow down at a factor of 0.8 until they drop to 25 pixels per second:
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 controller
Add an acceleration to the particles, and all particles entering the range of the influencer will add an acceleration.
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 } }
Turbonce controller
Add a force vector for each particle. The random force vector obtained by each particle is random, and the strength attribute defines how strong the vector acting on the particle is. Once in the range of the influencer, the particles go around like crazy, rather than maintaining an approximate trajectory from left to right.
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 } }
Wonder controller
- affectedParameter Property specifies which property (speed, position, acceleration, etc.) wonder can control
- The pace property specifies the maximum value that the property changes per second
- xVariance and yVariance Specifies the floating interval for the x and y coordinates of the particle track
In the following example, the influencer acts on the position attribute of the particle track, and the track position will vibrate randomly in the x direction at a frequency of 200 times per second:
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 } }