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中所提供的示例

  • 设置基础粒子
javascript 复制代码
    // 火箭粒子
    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
    }
  • 为火箭粒子设置发射器
JavaScript 复制代码
        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
            }
        }
  • 再为发射的火箭设置烟雾
    模拟现实生活中的烟花后面的星光或者烟雾
JavaScript 复制代码
// 烟雾轨迹
    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
        }
    }
  • 再添加部分影响器,模拟现实中的物理运动
JavaScript 复制代码
// 顶部摩擦效果
    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
    }
  • 烟花爆炸-重头戏
    当火箭上升到某个高度时,触发爆炸效果
JavaScript 复制代码
   // 爆炸粒子组
    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
相关推荐
im_AMBER15 小时前
Leetcode 38
笔记·学习·算法·leetcode
正经教主17 小时前
【Trae+AI】和Trae学习搭建App_01(附加可略过):测试Trae的后端功能
学习·app
桃子不吃李子18 小时前
axios的二次封装
前端·学习·axios
明明真系叻18 小时前
最优传输理论学习(1)+PINN文献阅读
深度学习·学习
笨鸟笃行19 小时前
百日挑战之单词篇(第三天)
学习
im_AMBER19 小时前
Leetcode 31
学习·算法·leetcode
雨田嘟嘟20 小时前
QML ChartView 崩溃
qt
Miqiuha20 小时前
观察者模式学习
学习·观察者模式
百锦再20 小时前
破茧成蝶:全方位解析Java学习难点与征服之路
java·python·学习·struts·kafka·maven·intellij-idea
雨奔20 小时前
Django 学习路线图
学习·django·sqlite