如何从main.qml控制Screen01.ui.qml中元素的动画启停？

1. 修复拼写错误 #

先修正Screen01.ui.qml里的笔误：将running: flase改为running: false，否则动画无法正常启停。

2. 在Screen01.ui.qml中暴露动画控制接口 #

QML内部组件默认对外不可访问，需在根元素（Rectangle）上添加属性别名或控制函数，把动画状态暴露给外部：

方法一：属性别名（推荐） #

直接将动画的running属性通过别名暴露：

Rectangle {
    width: Constants.width
    height: Constants.height
    color: "#1b1b1b"

    // 把动画的running属性暴露给外部组件
    property alias blinkerRunning: blinkerAnimation.running

    Image {
        id: starImage
        anchors.horizontalCenter: parent.horizontalCenter
        x: 350
        y: 190
        width: 100
        height: 100
        source: "images/R.png"
        fillMode: Image.PreserveAspectFit

        PropertyAnimation {
            id: blinkerAnimation
            target: starImage
            property: "opacity"
            from: 1
            to: 0
            duration: 700
            running: false
            loops: Animation.Infinite
            easing.type: Easing.InOutQuad // 可选：让闪烁过渡更自然
        }
    }
}

方法二：控制函数 #

如果需要更复杂的逻辑，可添加启停函数：

Rectangle {
    width: Constants.width
    height: Constants.height
    color: "#1b1b1b"

    function startBlinking() {
        blinkerAnimation.running = true
    }

    function stopBlinking() {
        blinkerAnimation.running = false
    }

    Image {
        // 其余代码不变
    }
}

3. 在main.qml中控制动画 #

通过Screen01的实例直接操作暴露的接口：

使用属性别名的方式 #

Item {
    width: Constants.width
    height: Constants.height

    Screen01 {
        id : screen
        // 组件加载完成后自动启动动画
        Component.onCompleted: screen.blinkerRunning = true
    }

    // 示例：添加按钮手动切换启停状态
    Button {
        text: screen.blinkerRunning ? "停止闪烁" : "开始闪烁"
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        onClicked: screen.blinkerRunning = !screen.blinkerRunning
    }
}

使用控制函数的方式 #

Item {
    width: Constants.width
    height: Constants.height

    Screen01 {
        id : screen
        Component.onCompleted: screen.startBlinking()
    }

    Button {
        text: "切换闪烁状态"
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        onClicked: {
            screen.blinkerAnimation.running ? screen.stopBlinking() : screen.startBlinking()
        }
    }
}

内容的提问来源于stack exchange，提问作者Rishabh Kumar