如何在 qml 中将行为与顺序动画结合

Question

如果您有 4 个属性，并且每个属性都有一个Behavior 块（如果相应的属性发生更改，您可以制作动画）如果您更改 4 个属性，则默认情况下动画将是并行的，但是是否可以使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: {
                    parent.x= parent.x==10 ? root.width - parent.width -10 : 10
                    parent.y= parent.y==10 ? root.height - parent.height -10 : 10
                    parent.rotation= parent.rotation==360 ? 0 : 360
                    parent.color=parent.color=="#ff0000" ? "teal": "red"

                }
            }

            Behavior on rotation {
                id:d1
                RotationAnimation {
                    duration: 500
                }
            }

            Behavior on x {
                id:d2
                NumberAnimation {
                    duration: 500
                }
            }
            Behavior on y {
                id:d3
                NumberAnimation {
                    duration: 500
                }
            }
            Behavior on color {
                id:d4
                ColorAnimation{
                    duration:500
                        }

            }
        
    }

}
}

我尝试“onClicked：” ... d1.start() d2.start() ...

` 但这对于 Qml 来说没有意义

Answer 1

按照本指南（在状态中使用 Qt 快速行为），我使用了

State

和

Transition

而不是

Behavior

。您只需将

SequentialAnimation

替换为

ParallelAnimation

即可恢复原来的行为。

指南中的这一段建议使用

Transition

和

State

以避免不必要的行为。

通过快速、重复地将鼠标移入来测试示例 从彩色矩形中可以看出，彩色矩形将 随着时间的推移，颜色会变成绿色，再也不会变成全红色。这 不是我们想要的！出现这个问题是因为我们使用了 动画颜色变化的行为，以及我们的状态变化是 由鼠标进入或退出MouseArea触发，即 很容易被打断。

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

    Rectangle {
        id: box
        width: 48
        height: 48
        x: 10
        y: 10
        color: "red"
        rotation: 0

        property bool toggle: false

        MouseArea {
            id:d
            anchors.fill: parent
            onClicked: box.toggle = !box.toggle
        }

        states: [
            State {
                name: "topLeft"
                when: !box.toggle

                PropertyChanges {
                    target: box
                    color: "red"
                    x: 10
                    y: 10
                    rotation: 0
                }
            },
            State {
                name: "bottomRight"
                when: box.toggle

                PropertyChanges {
                    target: box
                    color: "teal"
                    x: root.width - box.width - 10
                    y: root.height - box.height - 10
                    rotation: 360
                }
            }
        ]

        transitions: Transition {
            SequentialAnimation {
                ColorAnimation { duration: 500 }
                RotationAnimation { duration: 500 }
                NumberAnimation { properties: "x"; duration: 500 }
                NumberAnimation { properties: "y"; duration: 500 }
                NumberAnimation { properties: "rotation"; duration: 500 }
            }
        }
    }
}

也可以组合

NumberAnimation

，同时移动

Rectangle

和

x

中的

y

。

NumberAnimation { properties: "x"; duration: 500 }
NumberAnimation { properties: "y"; duration: 500 }

到

NumberAnimation { properties: "x,y"; duration: 500 }

Answer 2

您是否知道可以将动画直接分配给事件？为了涵盖向前和向后的条件，我使用两个 MouseArea，如下所示。因为我们将其定义为一个事件，所以我们可以变得更有创造力，哪些方面是连续的，哪些方面是并行的：

import QtQuick
import QtQuick.Controls
Page {
    title: "Sequential Animation"
    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: forwards
                anchors.fill: parent
                enabled: box.x === 10
                onClicked: SequentialAnimation {
                    ParallelAnimation {
                        NumberAnimation { target: box; property: "x"; to: root.width - box.width - 10; duration: 500 }
                        NumberAnimation { target: box; property: "y"; to: root.height - box.height - 10; duration: 500 }
                    }
                    RotationAnimation { target: box; property: "rotation"; from: 0; to: 360; duration: 500 }
                    ColorAnimation { target: box; property: "color"; from: "teal"; to: "red"; duration: 500 }
                }
            }
            
            MouseArea {
                id: backwards
                anchors.fill: parent
                enabled: box.x !== 10
                onClicked: SequentialAnimation {
                    ParallelAnimation {
                        NumberAnimation { target: box; property: "x"; to: 10; duration: 500 }
                        NumberAnimation { target: box; property: "y"; to: 10; duration: 500 }
                    }
                    RotationAnimation { target: box; property: "rotation"; from: 360; to: 0; duration: 500 }
                    ColorAnimation { target: box; property: "color"; from: "teal"; to: "red"; duration: 500 }
                }
            } 
        }
    }
}

您可以在线尝试！