QML中如何结合Behavior实现多属性动画顺序执行？

因为Behavior是属性变化时自动触发动画，当同时修改多个属性时，对应的Behavior会同时启动动画，导致并行执行。直接调用Behavior的start()方法无效，因为Behavior的动画是和属性绑定的，手动启动不会关联属性的实际更新逻辑。下面提供两种可行的实现方式：

方式一：使用SequentialAnimation手动控制动画序列 #

这种方式完全接管动画流程，不需要依赖Behavior的自动触发，直接按顺序执行每个属性的动画：

import QtQuick 
import QtQuick.Controls 

ApplicationWindow {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        id: root
        width:196
        height:196
        color:"lightgray"

        Rectangle {
            id: box
            width:48
            height:48
            x:10
            y:10
            color: "red"
            rotation:0
            
            MouseArea {
                id:d
                anchors.fill: parent
                onClicked: {
                    // 计算目标值
                    const targetX = box.x === 10 ? root.width - box.width -10 : 10;
                    const targetY = box.y === 10 ? root.height - box.height -10 : 10;
                    const targetRotation = box.rotation === 360 ? 0 : 360;
                    const targetColor = box.color === "#ff0000" ? "teal" : "red";

                    // 给动画设置目标值并启动序列
                    xAnimation.to = targetX;
                    yAnimation.to = targetY;
                    rotationAnimation.to = targetRotation;
                    colorAnimation.to = targetColor;
                    sequentialAnim.start();
                }
            }

            SequentialAnimation {
                id: sequentialAnim
                NumberAnimation { id: xAnimation; duration: 500 }
                NumberAnimation { id: yAnimation; duration: 500 }
                RotationAnimation { id: rotationAnimation; duration: 500 }
                ColorAnimation { id: colorAnimation; duration: 500 }
            }
        }
    }
}

方式二：利用Behavior+动画onFinished回调链式触发 #

保留原来的Behavior，通过逐个修改属性的方式，前一个动画结束后再修改下一个属性，触发对应的Behavior动画：

import QtQuick 
import QtQuick.Controls 

ApplicationWindow {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        id: root
        width:196
        height:196
        color:"lightgray"

        Rectangle {
            id: box
            width:48
            height:48
            x:10
            y:10
            color: "red"
            rotation:0
            
            MouseArea {
                id:d
                anchors.fill: parent
                onClicked: {
                    // 启动第一个动画
                    box.x = box.x === 10 ? root.width - box.width -10 : 10;
                }
            }

            Behavior on rotation {
                RotationAnimation {
                    duration: 500
                    onFinished: {
                        // 最后一个动画结束后修改颜色
                        box.color = box.color === "#ff0000" ? "teal" : "red";
                    }
                }
            }

            Behavior on x {
                NumberAnimation {
                    duration: 500
                    onFinished: {
                        // x动画结束后启动y动画
                        box.y = box.y === 10 ? root.height - box.height -10 : 10;
                    }
                }
            }
            Behavior on y {
                NumberAnimation {
                    duration: 500
                    onFinished: {
                        // y动画结束后启动旋转动画
                        box.rotation = box.rotation === 360 ? 0 : 360;
                    }
                }
            }
            Behavior on color {
                ColorAnimation{ duration:500 }
            }
        }
    }
}

关键说明 #

• 方式一适合需要严格控制动画顺序和流程的场景，完全脱离Behavior的自动触发，灵活性更高；
• 方式二适合希望保留Behavior逻辑，仅调整执行顺序的场景，通过链式的onFinished回调实现顺序触发；
• 不要直接调用Behavior的start()方法，因为Behavior的动画与属性绑定，手动启动不会同步属性的实际值变化，无法达到预期效果。

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