看不到星星的夜里,我用QML送你一片星空

看不到星星的夜里,我用QML送你一片星空

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第 1 天,点击查看活动详情


📒博客首页:何名取 的个人主页 - 文章 - 掘金 (juejin.cn)
🎉欢迎关注🔎点赞👍收藏⭐️留言📝
❤️ 期待一起交流!
🙏作者水平很有限,如果发现错误,求告知,多谢!
🌺有问题可私信交流!!!


🌵前言

《没有星星的夜晚》

黑色朦胧的夜晚
找不到一颗星星
星星
是唯一在夜里引导我的光芒
可现在连这都找不到了
我静静祈祷着
祈祷着我能再一次遇见那指引我的星星
没有星星的夜晚
让它慢慢消失
总有一天
光芒能再一次照在我身上

最近在用Qt的QML,其中的粒子系统值得深挖。在看不到星星的夜里,让我来用QML的粒子效果来为你制造一片星空。

🎄所需素材

  • 背景图
  • 星星图

我们需要一张背景图,或者你也可以不使用背景图而是把背景颜色设置为黑色。

background.jpeg

另外需要作为星星的小图片。我使用的这个图片非常的小,在文章中可能体现的不是很清晰,文章后面我会把这两张图片放在网盘中。

star.png

🌿设计思路

  • 使用Image插入背景图。使用Image类型,将背景改变为上述图片背景。

  • 使用ParticleSystem创建粒子系统。这是使用粒子系统的基础,首先需要构建一个ParticleSystem。

  • 使用ImageParticle创建图片粒子。对粒子进行渲染,改变粒子的形状和颜色。

  • 设置Emitter粒子发射器。设置粒子的大小、发射位置、速度、加速度和方向等。

  • 设置Turbulence影响器。将发射出的粒子的运动附加随机性。

🌲Particle简介

粒子模拟是计算机图形技术的可视化图形效果。典型的效果有:落叶,火焰,爆炸,流星,云等等。

它不同于其它图形渲染,粒子是基于模糊来渲染。它的结果在基于像素下是不可预测的。粒子系统的参数描述了随机模拟的边界。传统的渲染技术实现粒子渲染效果很困难。有一个好消息是你可以使用QML元素与粒子系统交互。同时参数也可以看做是属性,这些参数可以使用传统的动画技术来实现动态效果。

简单来说就是利用粒子效果,可以很方便地实现出今天的星空效果。

🌳导入语句

新建一个QML工程后,导入以下语句:

import QtQuick.Particles 2.2
import QtQuick 2.2
复制代码

第一个导入的Particles 2.2就是我们今天要用到的粒子系统,第二个导入的是Image背景图所需的。

🌴代码实现

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("闪亮星空")

    Image {
        id: backgroundImage
        source: "background.jpeg"
    }

    ParticleSystem {
        anchors.fill: parent
        
        ImageParticle {
            groups: ["stars"]
            anchors.fill: parent
            source: "star.png"
        }

        Emitter {
            group: "stars"
            emitRate: 80
            lifeSpan: 2400
            size: 24
            sizeVariation: 8
            anchors.fill: parent

        }

        Turbulence {
            anchors.fill: parent
            strength: 2
        }
    }
}

复制代码

🌱效果展示

星空.gif

☘️资源下载

希望大家多点赞关注,本章先暂时提供素材图片的下载,下章将会详细写写粒子系统的细节并且将程序打包成安卓应用和Windows桌面应用给大家玩耍。

链接:pan.baidu.com/s/1n2vJtIKF… 提取码:f7v6

感谢❤️💛💚💙💜💗

分类:
前端