首页 > 代码库 > Qt5官方demo解析集13——Qt Quick Particles Examples - Image Particles

Qt5官方demo解析集13——Qt Quick Particles Examples - Image Particles

2024-07-10 01:57:52   223人阅读

本系列所有文章可以在这里查看http://blog.csdn.net/cloud_castle/article/category/2123873

接上文 Qt5官方demo解析集12——Qt Quick Particles Examples - CustomParticles


先唠下嗑，在上文CustomParticles中我们接触了强大的ShaderEffect，笔者对其产生了极大的兴趣，于是去找了找有没有更多相关的例程，于是就发现了一个QML Video Shader Effects Example，确实效果华丽，下面放个图，回头再看看这个demo~


这个demo可以处理图片、视频以及摄像头数据，算是非常强大的功能了。不过在手机上运行时布局似乎有些问题。



好了，不扯远了，这次的demo又回归了ImageParticle，相信大家都不陌生了。这个demo应该比上一个要轻松，我们来看看吧：

依旧是熟悉的选择框：



（1）All at once

这个例子演示了一群旋转的小熊。下面有一行话，“QML这么叼你敢信吗...”



确实是五彩缤纷哈，怎么来形成多彩的效果呢？可能你马上会想到ImageParticle中的colorVariation这个属性，将这个值设高不就能形成多彩的效果吗？确实不错，但是如果我们要求这个小熊只在几种颜色之间变化呢？例如橘红，红色，青色，绿色，和黄色？或者再多一点，连随机数取值也不好做？那么ImageParticle为我们提供了一个属性colorTable，这个属性使得我们可以在一个一维纹理中取出颜色值赋予图像。我们通过自定义一个合适的一维图像就可以决定小熊的颜色了。

这里我将colorVariation设置为1，可以看下对比效果：


可以看到颜色确实更加丰富，但由于本身的一维图像是带有透明度的，想要模仿原例的效果，我们还需要设置透明度：

这里将alpha设置为0.5：



好了，代码很简单，说了这么多，就不讲了哈。allatonce.qml:

import QtQuick 2.0
import QtQuick.Particles 2.0

Rectangle {
    color: "white"
    width: 640
    height: 480
    ParticleSystem {
        id: sys
    }

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

    Friction {
        factor: 0.1
        system: sys
    }

    Emitter {
        system: sys
        anchors.centerIn: parent
        id: particles
        emitRate: 200
        lifeSpan: 6000
        velocity: AngleDirection {angleVariation: 360; magnitude: 80; magnitudeVariation: 40}
        size: 60
        endSize: 120
    }

    Text {
        x: 16
        y: 16
        text: "QML..."
        style: Text.Outline; styleColor: "#AAAAAA"
        font.pixelSize: 32
    }
    Text {
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        anchors.margins: 16
        text: "... can you be trusted with the power?"
        style: Text.Outline; styleColor: "#AAAAAA"
        font.pixelSize: width > 400 ? 32 : 16
    }
}


我将colortable的图贴在下面：

“”  < - 就在这里。它纵向只有一个像素，很窄。


（2）Colored

这个例子展示了两种星星的效果。



colored.qml:

import QtQuick 2.0
import QtQuick.Particles 2.0

Rectangle {
    width: 360
    height: 540
    color: "black"
    ParticleSystem {
        anchors.fill: parent
        ImageParticle {                                 // 背景星星
            groups: ["stars"]
            anchors.fill: parent
            source: "qrc:///particleresources/star.png"
        }
        Emitter {
            group: "stars"
            emitRate: 800
            lifeSpan: 2400
            size: 24
            sizeVariation: 8
            anchors.fill: parent                       // 布满父对象的背景星星
        }

        // ![0]
        ImageParticle {                               // 没有定义的group默认为""
            anchors.fill: parent
            source: "qrc:///particleresources/star.png"
            alpha: 0
            alphaVariation: 0.2                        // 多彩与透明效果
            colorVariation: 1.0
        }
        // ![0]

        Emitter {                                     // 默认发射group名为""的粒子
            anchors.centerIn: parent
            emitRate: 400
            lifeSpan: 2400
            size: 48
            sizeVariation: 8
            velocity: AngleDirection {angleVariation: 180; magnitude: 60} // 180的变化度，即是(-180,180)
        }

        Turbulence {                                    // 最后添加一些气流效果
            anchors.fill: parent
            strength: 2
        }
    }
}



（3）Color Table

从名字可以知道这里例子着重介绍了colorTable这个属性。



可以看到3个光束以类似∞的轨迹运行，colortable.qml:

Rectangle {
    id: root
    width: 360
    height: 540
    color: "black"

    ParticleSystem { id: particles }

    ImageParticle {
        system: particles
        colorVariation: 0.5
        alpha: 0

        //! [0]
        source: "qrc:///particleresources/glowdot.png"
        colorTable: "qrc:/images/colortable.png"      // 这个与例子一相同
        sizeTable: "qrc:/images/colortable.png"      // 有意思的是，我们可以使用这个一维图像的透明度来决定粒子的尺寸，根据Manual所说，这个属性将在之后被移除，取而代之的是使用自定义的缓和曲线
        //! [0]
    }

    Emitter {
        system: particles
        emitRate: 500
        lifeSpan: 2000

        y: root.height / 2 + Math.sin(t * 2) * root.height * 0.3 // 定义了一个类似∞的轨迹，删掉t中的2，它将变成一个椭圆
        x: root.width / 2 + Math.cos(t) * root.width * 0.3
        property real t;

        NumberAnimation on t {
            from: 0; to: Math.PI * 2; duration: 10000; loops: Animation.Infinite
        }

        velocityFromMovement: 20

        velocity: PointDirection { xVariation: 5; yVariation: 5;}     // 有一定的四周消散能力
        acceleration: PointDirection { xVariation: 5; yVariation: 5;}

        size: 16
        //endSize: 8
        //sizeVariation: 8
    }
}
关于为什么会形成3个光束：这里的粒子实际上是按轨迹不断生成的，新的粒子产生，旧的粒子还未消散，形成了一条光束。而这些粒子随着生命周期的变化，其颜色、透明度以及尺寸都是与这个colortable一维图像相关的，这个图像我在上面贴出来了，其中间几段有很明显的透明区域，当粒子达到与之相对应的生命周期，我们也就看不到了，随着生命周期的推进，它们又以其他的颜色展现出来。



（4）Deformation

这一节主要介绍了ImageParticle的变形，主要是旋转以及伸缩。上面两排海星星在旋转，下面的海星星被压缩。



deformation.qml:

import QtQuick 2.0
import QtQuick.Particles 2.0

Rectangle {
    color: "goldenrod"
    width: 400
    height: 400
    ParticleSystem {id:sys}

    //! [spin]
    ImageParticle {
        system: sys
        groups: ["goingLeft", "goingRight"]
        source: "qrc:/images/starfish_4.png"
        rotation: 90                          // (顺时针)旋转90度
        rotationVelocity: 90                  // 旋转速度
        autoRotation: true
    }
    //! [spin]
    //! [deform]
    ImageParticle {
        system: sys
        groups: ["goingDown"]
        source: "qrc:/images/starfish_0.png"      // 换了一张图，这个星星不开心些
        rotation: 180                            // 旋转180度，倒过来了
        yVector: PointDirection { y: 0.5; yVariation: 0.25; xVariation: 0.25; } // yVector参数是一个矢量，也就是说我们不仅可以压缩这个图像，还能使它任意拉伸（想象我们拉住一个四边形的两个角任意拉扯的效果）。
    }
    //! [deform]

    Timer {
        running: true                       // 几个定时器用来发射粒子
        repeat: false
        interval: 100
        onTriggered: emitA.enabled = true;
    }
    Timer {
        running: true
        repeat: false
        interval: 4200
        onTriggered: emitB.enabled = true;
    }
    Timer {
        running: true
        repeat: false
        interval: 8400
        onTriggered: emitC.enabled = true;
    }

    Emitter {                                 //　发射器，如果不清楚可以参考前面的博文
        id: emitA
        x: 0
        y: 120
        system: sys
        enabled: false
        group: "goingRight"
        velocity: PointDirection { x: 100 }
        lifeSpan: 4000
        emitRate: 1
        size: 128
    }
    Emitter {
        id: emitB
        x: 400
        y: 240
        system: sys
        enabled: false
        group: "goingLeft"
        velocity: PointDirection { x: -100 }
        lifeSpan: 4000
        emitRate: 1
        size: 128
    }
    Emitter {
        id: emitC
        x: 0
        y: 360
        system: sys
        enabled: false
        group: "goingDown"
        velocity: PointDirection { x: 100 }
        lifeSpan: 4000
        emitRate: 1
        size: 128
    }
}



（4）Rotation

待更新


联系
我们