Question

我希望在转换动画完成后更改状态。我有以下代码实现了这一点，虽然它似乎有点hackish：

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的情况下执行此操作？请注意，我需要第二个状态，我不想只将缩放动画合并到SequentialAnimation转换的animating。

Answer 1

稍微不同的方法是将shrinking状态设置为animating状态，并使用PropertyAction强制状态更改在转换结束时发生：

        State {
            name: "animating"

            PropertyChanges {
                target: rect
                rotation: 360
            }
            PropertyChanges {
                target: rect
                state: "shrinking"
            }

和

        Transition {
            SequentialAnimation {
                RotationAnimation {
                    duration: 500
                }
                PropertyAction {
                    target: rect
                    property: "state"
                }
            }
        }

请注意，我同意jturcotte对此处使用这些州的评估。

Answer 2

正确的方法是在运行pass到false而不是动画结束时更改转换的runningChanged处理程序中的状态。要做到这一点，你有两个解决方案：

Sol 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），因为它更通用

转换动画完成后更改状态

2 个答案: