在QML中鼠标单击特殊效果实现示例

还是借鉴了Qt自带的扫雷示例中的代码！（Qt中的一些代码还是有非常好的借鉴意义的，值得学习一下，推荐像我们这种初学者去学习学习！）

首先是效果显示控件：

//Explosion.qml

import QtQuick 1.0

import Qt.labs.particles 1.0

Item {

    property bool explode : false

    Particles {

        id: particles

        width: 30

        height: 30

        lifeSpan: 800

        lifeSpanDeviation: 0

        source: "../Images/star.png"

        count: 0

        angle: 270

        angleDeviation: 360

        velocity: 100

        velocityDeviation: 20

        z: 100

    }

    states: State { name: "exploding"; when: explode

        StateChangeScript {script: particles.burst(200); }

    }

}

这段基本上就是扫雷应用程序中的照搬下来的！图片来源自己更改了相对路径。Particles声明了可以随机出现指定source的效果。

具体说，就是声明了图片（source）出现的声明周期（lifeSpan）以及不同声明周期之间的差距（lifeSpanDeviation），例如若lifeSpan为800，而lifeSpanDeviation为200，那么这些图片就会出现600至1000不等的时间。

角度angle属性的变化范围以及速度velocity属性的变化范围都依次类推。这个还可以好好再推敲一下。

上述qml的使用就是，放到某个大框（Item或Rectangle等等）里，然后通过制定出现的x和y为鼠标区域的mouse.x和mouse.y来实现在鼠标单击的时候出现类似于焰火的效果。简单的使用如下：

Explosion{

        id: expl

        x: parent.width / 2 - 15

        y: parent.height / 2 - 15

    }

我这里是不论鼠标在哪单击都从窗体的中心位置显示这个效果。这里的15是Explosion的长度的一半，意思是让Explosion的中心与父Item的中心重合。（就是一个纠正值！）

触发可以有很多种方式，这里的触发方式如下：

Rectangle{

        id: content

        MouseArea{

            anchors.fill: parent

            onClicked: {

                expl.explode = true

            }

            onReleased: {

                expl.explode = false

            }

        }

}

其它的代码都略去了，具体效果自己也可以多试试。

 

希望对你有帮助。

 

 

补充一句，这个particles出现的效果是随机的！我还曾经尝试用这个模拟过下雨，下雪效果，不错的控件！很炫。哈哈