转换动画完成后更改状态

时间:2014-09-27 07:43:18

标签: qt animation qml state transitions

我希望在转换动画完成后更改状态。我有以下代码实现了这一点,虽然它似乎有点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

2 个答案:

答案 0 :(得分:-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对此处使用这些州的评估。

答案 1 :(得分:-1)

正确的方法是在运行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),因为它更通用