一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第 11 天，点击查看活动详情。
📒博客首页：何名取 的个人主页 - 文章 - 掘金 (juejin.cn)
🎉欢迎关注🔎点赞👍收藏⭐️留言📝
❤️期待一起交流！
🙏作者水平很有限，如果发现错误，求告知，多谢！
🌺有问题可私信交流！！！
ImageParticle图片粒子渲染器
前言
前面的文章中也用过多次ImageParticle图片粒子渲染器了，并且制作了多个好玩的效果。在实际编程中用的最多的也是图像粒子渲染器，本节将对渲染器进行详细探究，以便我们在日后更好地使用它。
简介
ImageParticle图片粒子渲染器将逻辑粒子呈现为图像。图像可以是
- 彩色图
- 旋转图
- 变形图
- 基于精灵的动画
ImageParticles隐式共享粒子数据，如果多个ImageParticles正在绘制相同的逻辑粒子组。可以按照上面列出的四个功能进行分解。因此，如果一个ImageParticle定义了以其中一种功能渲染粒子的数据，而另一个没有，那么两者都会在自动绘制相同的粒子。当有一些随机变化的粒子，应该保持它时切换渲染器。如果两个ImageParticles都定义了它们应该如何渲染，就会产生随机的情况。
注意：图像粒子数上限为16383。
属性列表
| 属性 | 类型 | 描述 |
|---|---|---|
| alpha | real | 应用于图像的alpha。这个值乘以图像中的值和color属性中的值。粒子能够叠加混合，所以当多个粒子重叠时，单个粒子较低的alpha导致更强的效果。Alpha值从0.0到1.0。默认是1.0。 |
| alphaVariation | real | 粒子之间alpha通道的变化。Alpha值从0.0到1.0。默认是0.0。 |
| autoRotation | bool | 如果设置为true，那么一个旋转将被应用在粒子旋转的顶部，使它面向运动的方向。因此，如果要面向反方向，请将自动旋转设置为true，旋转设置为180。默认的是false。 |
| blueVariation | real | 粒子间蓝色通道的变化。取值范围从0.0到1.0。默认是0.0。 |
| color | color | 如果指定了颜色，则提供的图像将使用该颜色着色。默认为白色(无变化)。 |
| colorTable | url | 指定图像，其颜色将作为一维纹理来确定颜色。例如，当粒子处于其生命周期的一半时，它会拥有该图像指定的颜色的一半的值。指定的颜色会和color属性以及源图像中的颜色进行混合。 |
| colorVariation | real | 这个数字代表了应用于单个粒子的颜色变化。设置colorVariation将为redVariation、greenVariation和bluecvariation设置相同的数值。每个通道可以在粒子之间改变颜色，颜色变化值从0.0到1.0。默认是0.0。 |
| entryEffect | EntryEffect | 这种特性为粒子提供了基本的和简单的进出效果。细粒度控制参见sizeTable和opacityTable。可接受的值是 ImageParticle.None:粒子只是出现和消失。 ImageParticle.Fade:粒子的透明度从0开始逐渐淡入，并在结束时逐渐淡入0。 ImageParticle.Scale:粒子的大小在其生命之初为0，在生命结束时又回到0。 |
| greenVariation | real | 粒子之间绿色通道的变化。取值范围从0.0到1.0。默认是0.0。 |
| opacityTable | url | 指定图像，其不透明度将作为一维纹理来确定大小。这个属性预计很快就会被移除，以便自定义缓动曲线来确定生命周期的不透明度。 |
| redVariation | real | 粒子间红色通道的变化。取值范围从0.0到1.0。默认是0.0。 |
| rotation | real | 图像将在绘制之前旋转的角度。粒子坐标没有变换。 |
| rotationVariation | real | 单个粒子的旋转变化的程度。 |
| rotationVelocity | real | 粒子将以这个速度旋转，单位是度/秒。 |
| rotationVelocityVariation | real | 单个粒子的旋转速度变化的程度。 |
| sizeTable | url | 指定图像，其不透明度将作为一维纹理来确定大小。这个属性预计很快就会被移除，以便自定义缓动曲线来决定寿命的大小。 |
| source | url | 设置图像url。如果图像是精灵动画，则使用sprite属性。 |
| sprites | list<Sprite> | 用于绘制粒子的一个或多个精灵。注意，精灵图像将根据被渲染粒子的大小缩放为一个正方形。 |
| spritesInterpolate | bool | 如果设置为true，精灵粒子将在每个渲染帧之间插入精灵帧，使精灵看起来更平滑。默认是true。 |
| status | Status | 加载图像的状态。 |
| xVector | StochasticDirection | 在绘制粒子图像时变形。矩形图像将变形，使水平边的形状为这个向量，而不是(1,0)。 |
| yVector | StochasticDirection | 在绘制粒子图像时变形。矩形图像将变形，使垂直的边是这个向量的形状，而不是(0,1)。 |
实战使用
目标效果
上面已经列出了所有的属性，趁热打铁，我们创建一个工程来尽量将其中的一些属性来运用到实际中。上一篇文章中已经用到了精灵图，也就是sprite属性，本节就不再重复运用了，大家有兴趣可以自行使用。下图是本节将要完成的目标图，我会逐步分析如何做出这样的效果的。
设计思路
上图的效果拆分开来大概分为以下几部分：
- 背景图。背景图是一张月亮的笑脸，周围有几颗星星
- 小星星。小星星是使用一个粒子系统来完成的。
- 移动的五角星。这个是使用另外一个粒子系统来完成的。
放置背景
首先将背景图进行放置，这里可以使用Image元素来完成。
Image {
id: bg
anchors.fill: parent
fillMode: Image.PreserveAspectCrop
source: "qrc:/bg1.jpg"
}
anchors.fill: parent表示锚定父组件并且填充。fillMode: Image.PreserveAspectCrop将图片设置为自动填充，必要时可以进行剪切的模式。source: "qrc:/bg1.jpg"//背景图这里的图片就是我上述所说的月亮笑脸图。
五角星图片渲染器
五角星图片渲染器主要对五角星图片素材进行了颜色、旋转角度和旋转速度的设置。将源图片属性设置为五角星图片素材，发射器就会发射出一个个五角星。
ImageParticle {
anchors.fill: parent
system: particles
source: "qrc:/star.png"
alpha: 0.1
color: "white"
rotationVariation: 180
rotationVelocity: 30
z: 2
}
rotationVariation: 180设置旋转角度变化值最大为180°，表示不同的五角星之间的旋转角度最多相差180°。拿两个五角星来举例，意思就是这两个五角星一个可能转了50°，另一个可能转了130°，会有一些差异。rotationVelocity: 30设置旋转速度为30°/每秒。
五角星发射器
五角星发射器可以将五角星图片渲染器渲染过的粒子进行发射。发射器之前的文章中讲的比较详细，这里不再赘述。
Emitter {
system: particles
anchors.fill: parent
emitRate: 0
lifeSpan: 10000
size: 24
sizeVariation: 8
velocity: AngleDirection { angleVariation: 360; magnitude: 30 }
maximumEmitted: 10
startTime: 5000
Timer { running: true; interval: 10; onTriggered: parent.emitRate = 1; }
}
小星星渲染器
小星星渲染器比较简单，只需将图片导入到图片渲染器中即可。
ImageParticle {
groups: ["stars"]
anchors.fill: parent
source: "qrc:///particleresources/star.png"
}
小星星发射器
小星星发射器与五角星发射器比较类似，可以将小星星发射到窗口之上。
Emitter {
group: "stars"
emitRate: 40
lifeSpan: 2400
size: 24
sizeVariation: 8
anchors.fill: parent
velocity: AngleDirection { angleVariation: 360; magnitude: 3 }
}
总结
以上的就是实现本次目标效果的全部步骤了。到这里已经将ImageParticle图片粒子渲染器讲解的七七八八了，例子中也多次运用，产生了多个炫酷或可爱的效果。点击下面的链接可以获取完整的代码。有兴趣的小伙伴可以持续关注。
感谢❤️💛💚💙💜💗
