Qt Quick 粒子示例 - 图片粒子

这是使用 QML 粒子系统中的影响因子的一组示例。

这是关于在粒子系统中使用影响因子的一组简短的 QML 示例。每个示例都是一个简单的 QML 文件，强调某种特定类型或功能。

一次性展示 ImageParticle 的多个功能。

sprites: [
    Sprite {
        name: "bear"
        source: "images/bear_tiles.png"
        frameCount: 13
        frameDuration: 120
    }
]
colorVariation: 0.5
rotationVelocityVariation: 360
colorTable: "images/colortable.png"

彩色显示带有一些颜色变化的简单 ImageParticle。

ImageParticle {
    anchors.fill: parent
    source: "qrc:///particleresources/star.png"
    alpha: 0
    alphaVariation: 0.2
    colorVariation: 1.0
}

颜色表将颜色应用于粒子在生命周期中的显示，以提供固定彩虹效果。

source: "qrc:///particleresources/glowdot.png"
colorTable: "images/colortable.png"
sizeTable: "images/colortable.png"

变形旋转和挤压星鱼粒子。

ImageParticle {
    system: sys
    groups: ["goingLeft", "goingRight"]
    source: "images/starfish_4.png"
    rotation: 90
    rotationVelocity: 90
    autoRotation: true
}
ImageParticle {
    system: sys
    groups: ["goingDown"]
    source: "images/starfish_0.png"
    rotation: 180
    yVector: PointDirection { y: 0.5; yVariation: 0.25; xVariation: 0.25; }
}

旋转演示了 autoRotate 属性，使粒子在移动方向上旋转。

共享演示了当多个 ImageParticle 尝试渲染相同的粒子时会发生什么。以下 ImageParticle 在 ListView 中渲染粒子。

ImageParticle {
    anchors.fill: parent
    system: particles
    source: "images/flower.png"
    alpha: 0.1
    color: "white"
    rotationVariation: 180
    z: -1
}

以下 ImageParticle 放置在列表突出显示中，并渲染位于其他 ImageParticle 之上的粒子。

ImageParticle {
    anchors.fill: parent
    system: particles
    source: "images/flower.png"
    color: "red"
    clip: true
    alpha: 1.0
}

请注意，因为它在这个 ImageParticle 中设置了颜色和透明度，所以粒子以不同的颜色渲染。由于它没有指定任何关于旋转的内容，它与其他 ImageParticle 共享旋转，因此花朵在两种情况下都以相同的方式旋转。请注意，您可以在另一个 ImageParticle 中撤销旋转，只需明确设置 rotationVariation 为 0 就可以了。

精灵演示使用图像粒子渲染动画精灵，而不是为每个粒子使用静态图像。

示例项目 @ code.qt.io