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

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

ParticlePainters粒子渲染器

前言

前面的几篇文章都是讲解QML粒子系统的，主要对其中的ParticleSystem粒子系统和Emitters发射器进行了深度探究。在对这两个模块里面的各种属性和函数进行分析时也进行了实战使用，用代码实现了一些例子。

QML粒子系统中还有ParticlePainters渲染器和Affectors影响器尚未进行探索，不过在之前的举例中已经使用过ParticlePainters渲染器下的ImageParticle图片粒子渲染器了，只是当时的重点放在Emitters发射器上，所以并未对ImageParticle图片粒子渲染器进行深究。

本节将使用ImageParticle图片粒子渲染器来实现一个好玩的小狗奔跑的效果，并以此对ImageParticle图片粒子渲染器稍加讲解，希望小伙伴们可以对ImageParticle图片粒子渲染器有更多的理解。以下是实现的效果。

效果预览

这是一群快乐的哈士奇，尽情的在阳光下奔跑。

设计思路

放置背景图片

首先可以先将背景图片在应用程序的界面中放置出来。背景图片我选用的是一张卡通的草地图片，本节的完整代码和素材都会上传到gitee仓库，小伙伴们可以自行去下载尝试。

    Image {
        id: bg
        source: "qrc:/bg3.png"
        anchors.fill: parent
        fillMode: Image.PreserveAspectCrop
    }

代码中的这一句source: "qrc:/bg3.png" 中的bg3.png就是我上述所说的背景图。anchors.fill: parent设置图片充满窗口。fillMode: Image.PreserveAspectCrop图片的放置模式设置为自行裁剪以适应窗口的大小。

构建ImageParticle图片粒子渲染器

这是本节的重点，我们需要将运动的小狗图片在ImageParticle图片粒子渲染器中构建出来，以供给发射器来使用。在构建ImageParticle图片粒子渲染器时可以选用sprite图片来产生运动效果。下面展示一下我使用的 sprite图片。

可以看到图片是一只哈士奇向前奔跑的动作分解图，在QML中有相应的处理类型Sprite，这个类型正好也是ImageParticle图片粒子渲染器的属性sprites的值类型，因此我们可以使用sprites属性来构建一只奔跑的小狗。

        ImageParticle {
            sprites: Sprite {
                    name: "dog"
                    source: "qrc:/sp2.png"
                    frameCount: 10
                    frameDuration: 80
                    frameWidth: 117; frameHeight: 84
                }

frameCount: 10表示图片的帧数总共有10帧，frameWidth: 117; frameHeight: 84表示每帧的小狗图片的大小，frameDuration: 80表示每帧图片所播放的时间，这个值设置的越大，小狗的动作越慢；值越小，小狗的动作越快。

构建Emitters发射器

构建Emitters发射器主要是将发射器的位置和发射的方向设置好。将发射器固定在窗口的右边，发射方向朝窗口的左边发射，就可以实现小狗从右边界跑出，向着屏幕左侧跑去。

        Emitter {
            emitRate: 1; lifeSpan: 9000
            velocity: PointDirection { x:-80; xVariation: 80; }
            acceleration: PointDirection { x: -40; xVariation: 40; }
            size: 120; sizeVariation: 10
            height: parent.height-400
            anchors.right: parent.right
            y: 300
            maximumEmitted: 5
        }

另外要注意的是发射速率要设置的小一些，不然会出现非常多的小狗，这样不美观。emitRate: 1; lifeSpan: 9000表示每次出现一只小狗，小狗存在9秒钟。

总结

以上步骤就完成了本次的小狗奔跑效果，小伙伴们可以自行动手尝试。下一节将会对ImageParticle图片粒子渲染器进行详细介绍，并且对其属性进行实战使用，有兴趣的小伙伴可以持续关注。

感谢❤️💛💚💙💜💗

QML粒子系统，发射一群欢乐的哈士奇🐶