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

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

动态logo

前言

我本人是不怎么玩游戏的，从同事那听到最近艾尔登法环比较火，刚好又在掘金上看到了一篇文章是关于艾尔登法环的Three.js 火焰效果实现艾尔登法环动态logo 🔥 - 掘金 (juejin.cn)，这位大佬用Three.js火焰效果实现艾尔登法环动态logo。

由于我对Three.js一窍不通，没法复刻一波。不过恰好最近在研究QML的粒子系统，也是可以做出类似的火焰效果，本节就使用QML粒子系统来尝试实现一下。使用到的两个图片素材也都是从大佬的文章中得到的，一张背景图和一张logo圆环的图片。下面是我用QML粒子系统实现的火焰环的效果图，大家可以先看看效果。

另外，有对QML粒子系统感兴趣的小伙伴可以看看之前的文章，希望可以让你对粒子系统有所了解。

实现

设计思路

从大佬已经实现的效果上可以看到，整个效果可以分为两大部分：

火焰环
上下移动火焰环

火焰环的实现

第一步先将logo实现出火焰环的效果，主要使用到的是QML粒子系统。

构建粒子系统 粒子系统的构建非常简单，其作用主要是创建出渲染器和发射器的基础环境。

    ParticleSystem {
        id: particles
        anchors.fill: parent
    }

构建火焰渲染器 火焰渲染器为发射器作渲染，包含火焰发射器的粒子组。渲染器选用图片渲染器ImageParticle，用小粒子图片作为火焰形态。颜色变化值为0.1。火焰渲染器使发射器发射出的粒子呈火焰形态。

        ImageParticle {
            id: flame
            anchors.fill: parent
            system: particles
            groups: ["B"]
            source: "qrc:///particleresources/glowdot.png"
            colorVariation: 0.1
            color: "#00ff400f"
        }

构建烟雾渲染器 烟雾渲染器与火焰渲染器类似，只不过烟雾渲染器的粒子组为烟雾伴随发射器。烟雾渲染器使发射器发射出的粒子呈白色烟雾形态。

        ImageParticle {
            id: smoke
            system: particles
            anchors.fill: parent
            groups: ["A"]
            source: "qrc:///particleresources/glowdot.png"
            colorVariation: 0
            color: "#00111111"
        }

构建火焰发射器 火焰环的logo设计成燃烧状态，在此处就使用发射器Emitter的shape遮罩属性。将logo图片设置成火焰发射器的遮罩，于是火焰粒子就只会从logo图形的地方发射，形成火焰环的效果。将粒子发射的方向设置为向上发射，并且将发射速度设置为缓慢移动，于是就形成火焰向上燃烧的效果。

        Emitter {
            id: fire
            system: particles
            group: "B"

            emitRate: 1000
            lifeSpan: 2000

            acceleration: PointDirection { y: -3; xVariation: 3 }
            velocity: PointDirection {xVariation: 3}

            size: 24
            sizeVariation: 8
            endSize: 4

            //! [0]
            anchors.fill: parent
            shape: MaskShape {
                source: "qrc:/ring.png"
            }
            //! [0]
        }

构建烟雾伴随发射器 烟雾效果是从火焰中产生的。烟雾粒子伴随火焰燃烧时的火焰粒子产生，使用TrailEmitter伴随发射器来发射烟雾粒子。伴随发射器与火焰发射器类似，需要将follow设置为火焰发射器的粒子组"B"。

        TrailEmitter {
            id: fireSmoke
            group: "A"
            system: particles
            follow: "B"
            width: root.width
            height: root.height - 68

            emitRatePerParticle: 1
            lifeSpan: 2000

            velocity: PointDirection {y:-6; yVariation: -3; xVariation: 3}
            acceleration: PointDirection {xVariation: 3}

            size: 36
            sizeVariation: 8
            endSize: 16
        }

火焰环的移动实现

处理好了火焰环，下一步则是实现火焰环缓慢地上下移动效果。移动效果使用QML动画模块实现，主要将火焰环的粒子系统的y坐标进行上下调整，火焰环也会跟着上下移动。

        SequentialAnimation {
            running: true
            loops: Animation.Infinite
            NumberAnimation { target: sys; property: "y"; from: root.height/10; to: root.height/10+10; duration: 1000 }
            NumberAnimation { target: sys; property: "y"; from: root.height/10+10; to: root.height/10; duration: 1000 }
        }

效果展示

火焰环的效果实现以后，就可以将背景图加上，再将火焰环的粒子系统设置为动态移动的效果以后，本次的动态logo就大概完成了。以下是动态logo的效果图。

小伙伴可以持续关注我，本人会持续对QML进行探索。

感谢❤️💛💚💙💜💗

QML粒子系统实现艾尔登法环动态logo完整代码

QML粒子系统，点燃🔥 艾尔登法环

动态logo

前言

实现

设计思路

火焰环的实现

火焰环的移动实现

效果展示