QML效果--Glow、Emitter、

1.Glow

glow可以做一个外边框的微光效果

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.12

import QtGraphicalEffects 1.12

Window {

    visible: true
    width: 640
    height: 480
    title: qsTr("特效")
    color: "gray"

    Text{
        id: txt
        text: "Waitting"
        font.pixelSize: 70
        anchors.centerIn: parent

    }

    Glow {//做一个外边框的一个微光效果
        id:glow
        anchors.fill: txt
        radius: 15//微光的效果程度
        samples: 17 //有多少点数
        color: "white"
        source:txt

        SequentialAnimation{ //队列的动画效果
            running: true
            loops: Animation.Infinite  //无限的运行当前的动画效果
            NumberAnimation{
                target: glow
                property: "spread"
                to:0
                duration: 1000
            }
            NumberAnimation{
                target: glow
                property: "spread"
                to:0.5
                duration: 1000
            }
        }
    }

}
 

 

2.用一个圆形的图片做一个粒子发射效果

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.12

import QtQuick.Particles 2.12
import QtGraphicalEffects 1.12

Window {

    visible: true
    width: 640
    height: 480
    title: qsTr("特效")
    color: "gray"

    ParticleSystem
    {
        id:particleSystem
    }

    Emitter{
          id:emitter
          anchors.centerIn: parent
          width:300
          height: 300
          system: particleSystem //粒子效果
          emitRate: 10  //发射粒子的速度
          lifeSpan: 600  //每个粒子生命周期 0.6秒
          lifeSpanVariation: 400   //创建粒子的间隔
          size: 20  //大小
          velocity: PointDirection{  控制了粒子移动的方向 如何移动
              x:-30  //向左偏移
              xVariation: 0
              yVariation: 100/6 //稍微向上偏移一点点
          }
    }

   ImageParticle{
       id:img
       source : "/hh.jpg"
       system: particleSystem
       color: Qt.rgba(153/255,217/255,234/255,1.0) //颜色
       colorVariation: 0.3 //根据color随机修改
   }

   ///当鼠标向粒子靠近时 粒子就会被弹飞
   MouseArea{
       id: mouse
       anchors.fill: parent
       hoverEnabled: true
   }

   Attractor{
       anchors.fill: parent
       enabled: true
       system: particleSystem
       //鼠标当前的位置
       pointX: mouse.mouseX
       pointY: mouse.mouseY

       strength: -10000000  //控制当前的粒子对这个鼠标的吸引力有多大
       affectedParameter: Attractor.Acceleration
       proportionalToDistance: Attractor.InverseQuadratic

   }

   //加载界面  爱的魔力转圈圈

   BusyIndicator{
        width: 100
        height: 100
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottomMargin: 20
   }

}