qt - 在过渡动画完成后更改状态

Question

我想在过渡动画完成后更改状态。我有以下代码可以实现此目的，尽管它看起来有点老套:

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

Rectangle {
    id: root
    width: 400
    height: 400

    Rectangle {
        id: rect
        color: "blue"
        width: 50
        height: 50
        anchors.centerIn: parent

        MouseArea {
            anchors.fill: parent
            onClicked: rect.state = "animating"
        }

        states: [
            State {
                name: "animating"

                PropertyChanges {
                    target: rect
                    rotation: 360
                }
            },
            State {
                name: "shrinking"

                PropertyChanges {
                    target: rect
                    scale: 0
                }
            }
        ]

        transitions: [
            Transition {
                from: ""
                to: "animating"

                SequentialAnimation {
                    RotationAnimation {
                        duration: 500
                    }
                    ScriptAction {
                        script: rect.state = "shrinking"
                    }
                }
            },
            Transition {
                from: "animating"
                to: "shrinking"

                NumberAnimation {
                    property: "scale"
                    duration: 500
                }
            }
        ]
    }
}

有没有更好的方法可以不使用 ScriptAction 来做到这一点？请注意，我需要第二个状态，我不想将缩放动画合并到 animating 转换的 SequentialAnimation 中。

Answer 1

正确的方法是在转换的 runningChanged 处理程序中更改状态，当运行传递到 false 时动画完成。 为此，您有两种解决方案:

解决方案 1. 使用 connections(您将收到关于不可通知​​属性的警告，请忽略它)

Connections{
            target:rect.transitions[0]

            onRunningChanged:{
                if( rect.transitions[0].running === false)
                {
                    rect.state = "shrinking"
                }
            }
        }

代码将是:

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

Rectangle {
    id: root
    width: 400
    height: 400

    Rectangle {
        id: rect
        color: "blue"
        width: 50
        height: 50
        anchors.centerIn: parent

        MouseArea {
            anchors.fill: parent
            onClicked: rect.state = "animating"
        }

        states: [
            State {
                name: "animating"

                PropertyChanges {
                    target: rect
                    rotation: 360
                }
            },
            State {
                name: "shrinking"

                PropertyChanges {
                    target: rect
                    scale: 0
                }
            }
        ]
        Connections{
            target:rect.transitions[0]

            onRunningChanged:{
                if( rect.transitions[0].running === false)
                {
                    rect.state = "shrinking"
                }
            }
        }
        transitions: [
            Transition {
                from: ""
                to: "animating"
                    RotationAnimation {
                        duration: 500
                    }
            },
            Transition {
                from: "animating"
                to: "shrinking"

                NumberAnimation {
                    property: "scale"
                    duration: 500
                }
            }
        ]
    }
}

解决方案 2: 直接在转换中的 runningchanged 处理程序中更改状态:

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

Rectangle {
    id: root
    width: 400
    height: 400

    Rectangle {
        id: rect
        color: "blue"
        width: 50
        height: 50
        anchors.centerIn: parent

        MouseArea {
            anchors.fill: parent
            onClicked: rect.state = "animating"
        }

        states: [
            State {
                name: "animating"

                PropertyChanges {
                    target: rect
                    rotation: 360
                }
            },
            State {
                name: "shrinking"

                PropertyChanges {
                    target: rect
                    scale: 0
                }
            }
        ]

        transitions: [
            Transition {
                from: ""
                to: "animating"

                    RotationAnimation {
                        duration: 500
                    }
                    onRunningChanged:{
                        if( running === false)
                        {
                            rect.state = "shrinking"
                        }
                    }
            },
            Transition {
                from: "animating"
                to: "shrinking"

                NumberAnimation {
                    property: "scale"
                    duration: 500
                }
            }
        ]
    }
}

我更喜欢第一个解决方案 (Connections) 因为它更通用