QML animation 占用太多CPU

Question

我在 QML 中制作了這個簡單的降雪 animation，它看起來很不錯，只是我注意到它占用了太多 CPU。 它經常占用我的 Ubuntu 筆記本電腦 CPU 的大約 9%，在我的 imx8mm 嵌入式設備上大約占用 34%。 為什么占用這么多 CPU，我該如何降低 CPU 使用率？

import QtQuick 2.15
import QtQuick.Window 2.2
import QtQuick.Controls 2.15
import QtQuick.Particles 2.0

Window {
    id: root

    width: 1024
    height: 600
    visible: true

    Rectangle {
        anchors.fill: parent
        color: "black"
    }

    Rectangle {
        id: snowfallEmittorArea
        anchors.top: parent.top
        width: parent.width
        color: "black"
        z:2

        ParticleSystem {
            id: particleSystem
        }

        Emitter {
            id: emitter
            anchors.fill: parent
            system: particleSystem
            emitRate: 10
            lifeSpan: 4000
            sizeVariation: 5
            lifeSpanVariation: 500
            velocity: AngleDirection {
                angle: 90
                angleVariation: 10
                magnitude: 100
                magnitudeVariation: 50
            }
        }

        ItemParticle {
            system: particleSystem
            delegate: Rectangle {
                height: 8
                width: 8
                radius: 5
                color: "white"
            }
        }
    }
}

我願意探索其他 CPU 密集度較低的方法來實現此 animation。

Answer 1

我認為ImageParticle是一個很好的建議，特別是如果您將它與 SVG 混合使用。這使 QML 有機會編譯和緩存 SVG 圖像以供重用，而對於ItemParticle ，我認為存在動態創建Item的負擔。

我還做了一個小重構，將 UI Rectangle / Item和 Emitter 放在頂部，將非 UI 聲明ParticleSystem和ItemParticle放在底部。

import QtQuick
import QtQuick.Controls
import QtQuick.Particles

Page {
    background: Rectangle { color: "black" }
    
    Item {
        anchors.top: parent.top
        width: parent.width
        
        Emitter {
            id: emitter
            anchors.fill: parent
            system: particleSystem
            emitRate: 10
            lifeSpan: 4000
            sizeVariation: 5
            lifeSpanVariation: 500
            velocity: AngleDirection {
                angle: 90
                angleVariation: 10
                magnitude: 100
                magnitudeVariation: 50
            }
        }
    }
    
    ParticleSystem {
        id: particleSystem
    }
        
    ImageParticle {
        system: particleSystem
        source: "Particle.qml"
    }
}

// Particle.qml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8">
<circle cx="4" cy="4" r="4" stroke="none" fill="white"/>
</svg>

您可以在線試用！