Qt 国庆祝福

前言

本打算利用QML实现魔兽登录界面，结合之前的SRP-6协议简单模拟客户端和服务端的操作；但由于忙，而且QML目前我找了部分qml库，试着写了一点，还是达不到想要的效果，不如自己"造轮子"来得快一点

怀旧服界面如下图所示：

该界面具备以下元素:

1.视频背景

2.粒子特效-不多

3.输入框

4.图片现代按钮-具备一定的特效

5.文字按钮

6.Qt Socket，进行SRP-6协议认证模拟

不知不觉就到国庆了，为了庆祝祖国76周年华诞先写个界面祝福祖国，暂时先将WOW登录界面搁置

一、祝福界面

1.1、设计

1. 背景图片

2. 烟花粒子特效

3. 文字

4. 声音效果

   由于时间仓促，只能暂时实现这么多

1.2、粒子特效

这次不牵涉到着色器的内容，就使用Qt所支持的粒子系统(particle system)来进行编写；我看CSDN中关于粒子这些各种属性，方法讲解很多，就不在记录，基本就是看官方文档和CSDN中所提供的示例

• 设置基础粒子

    // 火箭粒子
    ImageParticle {
        system: particleSys
        groups: ["rocket"]
        source: "qrc:///particleresources/glowdot.png"
        color: "gold"
        colorVariation: 0.4
        entryEffect: ImageParticle.Fade
    }

    // 烟雾粒子
    ImageParticle {
        system: particleSys
        groups: ["smoke"]
        source: "qrc:///particleresources/star.png"
        color: "#80ffffff"
        colorVariation: 0.3
        alpha: 0.6
        rotation: 0
        rotationVariation: 180
        rotationVelocity: 45
        entryEffect: ImageParticle.Fade
    }

    // 爆炸粒子
    ImageParticle {
        system: particleSys
        groups: ["explode"]
        source: "qrc:///particleresources/star.png"
        color: Qt.hsla(Math.random(), 0.8, 0.6, 0.9)
        colorVariation: 0.8
        rotation: 0
        rotationVariation: 360
        rotationVelocity: 180
        entryEffect: ImageParticle.Scale
    }

• 为火箭粒子设置发射器

        Emitter {
            id: leftRocketEmitter
            system: particleSys
            group: "rocket"

            x: index * 150 + 100
            y: parent.height - 50
            width: 8
            height: 8

            emitRate: 1
            maximumEmitted: 2
            lifeSpan: 3000
            lifeSpanVariation: 500
            size: 32
            sizeVariation: 8
            endSize: 16

            velocity: AngleDirection {
                angle: 270
                magnitude: 350
                magnitudeVariation: 80
            }

            acceleration: AngleDirection {
                angle: 90
                magnitude: 60
            }
        }

• 再为发射的火箭设置烟雾
  模拟现实生活中的烟花后面的星光或者烟雾

// 烟雾轨迹
    TrailEmitter {
        id: smokeEmitter
        system: particleSys
        emitHeight: 2
        emitWidth: 6
        group: "smoke"
        follow: "rocket"
        emitRatePerParticle: 128
        lifeSpan: 800
        lifeSpanVariation: 200
        size: 20
        sizeVariation: 6
        endSize: 4

        velocity: AngleDirection {
            angle: 90
            angleVariation: 15
            magnitude: 80
        }
    }

• 再添加部分影响器，模拟现实中的物理运动

// 顶部摩擦效果
    Friction {
        groups: ["rocket"]
        anchors.top: parent.top
        width: parent.width
        height: parent.height / 2
        system: particleSys
        threshold: 5
        factor: 0.85
    }

    // 底部湍流效果
    Turbulence {
        groups: ["rocket"]
        anchors.bottom: parent.bottom
        width: parent.width
        height: parent.height / 3
        system: particleSys
        strength: 35
    }

    // 到达顶部时触发爆炸
    GroupGoal {
        id: explosionTrigger
        anchors.top: parent.top
        width: parent.width
        height: parent.height / 6
        system: particleSys
        groups: ["rocket"]
        goalState: "explosion"
        jump: true
    }

• 烟花爆炸-重头戏
  当火箭上升到某个高度时，触发爆炸效果

   // 爆炸粒子组
    ParticleGroup {
        name: "explosion"
        system: particleSys

        TrailEmitter {
            id: explosionEmitter
            group: "explode"
            follow: "rocket"
            lifeSpan: 1500
            lifeSpanVariation: 300
            emitRatePerParticle: 300
            size: 36
            sizeVariation: 12
            endSize: 8

            velocity: AngleDirection {
                angle: -90
                angleVariation: 360
                magnitude: 80
                magnitudeVariation: 50
            }

            acceleration: AngleDirection {
                angle: 90
                magnitude: 40
            }
        }
    }

• 1.3、最终成果展示
  
  
  Code