一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第 1 天,点击查看活动详情。
📒博客首页:何名取 的个人主页 - 文章 - 掘金 (juejin.cn)
🎉欢迎关注🔎点赞👍收藏⭐️留言📝
❤️ 期待一起交流!
🙏作者水平很有限,如果发现错误,求告知,多谢!
🌺有问题可私信交流!!!
🌵前言
《没有星星的夜晚》
黑色朦胧的夜晚
找不到一颗星星
星星
是唯一在夜里引导我的光芒
可现在连这都找不到了
我静静祈祷着
祈祷着我能再一次遇见那指引我的星星
没有星星的夜晚
让它慢慢消失
总有一天
光芒能再一次照在我身上
最近在用Qt的QML,其中的粒子系统值得深挖。在看不到星星的夜里,让我来用QML的粒子效果来为你制造一片星空。
🎄所需素材
- 背景图
- 星星图
我们需要一张背景图,或者你也可以不使用背景图而是把背景颜色设置为黑色。
另外需要作为星星的小图片。我使用的这个图片非常的小,在文章中可能体现的不是很清晰,文章后面我会把这两张图片放在网盘中。
🌿设计思路
-
使用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
}
}
}
复制代码
🌱效果展示
☘️资源下载
希望大家多点赞关注,本章先暂时提供素材图片的下载,下章将会详细写写粒子系统的细节并且将程序打包成安卓应用和Windows桌面应用给大家玩耍。
链接:pan.baidu.com/s/1n2vJtIKF… 提取码:f7v6
感谢❤️💛💚💙💜💗