QML中如何在NumberAnimation完成后触发一次重置动作

修改思路 #

你的核心问题是原代码中Timer会提前触发reset，且Timer的逐帧更新和Behavior动画冲突，导致动画未完成就重置。正确的做法是移除Timer，直接利用Behavior的NumberAnimation完成进度条动画，并监听动画完成信号调用reset。

修改后完整代码 #

Button {
    id: button1

    onPressAndHold: {
        rectangle.visible = true
        // 直接设置目标宽度，触发Behavior的动画
        rectangle.width = img.sourceSize.width
    }
}

Item {
    id: rectangle
    // 初始状态：隐藏、宽度为0
    visible: false
    width: 0
    // 其他布局属性（比如height、anchors等根据需求补充）

    Behavior on width {
        NumberAnimation {
            duration: 1000
            easing.type: Easing.InOutCubic
            // 动画完成后调用reset
            onFinished: reset()
        }
    }

    Image {
        id: img
        source: "somesource"
        fillMode: Image.PreserveAspectCrop
    }
}

// 重置函数，根据你的需求补充具体逻辑
function reset() {
    rectangle.width = 0
    rectangle.visible = false
    // 这里可以添加其他需要重置的操作，比如传入values的逻辑
}

关键修改点 #

• 删掉了原有的Timer：手动逐帧更新width会打断Behavior的动画，直接设置目标宽度让动画自动过渡更合理。
• 给NumberAnimation添加onFinished信号：动画完成后自动触发reset函数，完全符合你的需求。
• 调整rectangle初始状态：默认隐藏且宽度为0，确保长按后从0开始展示进度动画。
• 明确reset函数的实现：重置进度条到初始状态，可根据实际需求补充更多逻辑。

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