使用文本更改转动卡片 -> 寻找顺序的 QML 逻辑 Actions/Animations

Question

我想创建某种词汇训练器。

我有一个 Card QML 文件，应该代表某种记录卡，您可以在其中看到词汇表。当您回答后，卡片应该旋转 180°，并且上面应该可以看到一个新的 Word/Text。

到目前为止，我已经为 Card 创建了一个 Rectangle，为 Rotation 创建了一个 Transformation，分为两个 PropertyAnimation。

为了简单起见，我只想在单击 Card 时播放动画。然后卡片从 0 度旋转到 90 度。之后应更改文本。最后 Card 应该从 -90 度变成 0 度。所以我正在寻找一种逻辑，允许我执行动画，立即更改属性（文本）并按顺序执行另一个动画。

到目前为止，这是我的代码：

import QtQuick 2.2
import QtGraphicalEffects 1.0

Item {

    Rectangle {
        id: card
        anchors.fill: parent
        border.width: 1
        border.color: "grey"
        antialiasing: true

        Text {
            id: question
            text: "test test test"
            anchors.centerIn: card
        }

        transform: Rotation {
            id: rotation
            origin.x: (card.width / 2)
            origin.y: (card.height / 2)
            axis {
                x: 0
                y: 1
                z: 0
            }
            angle: 0
        }

        MouseArea {
            anchors.fill: card
            onClicked: {
                // Code for Turning Card arround
                rotate_away.start()
                question.text = "abcabcabc"
                rotate_new.start()
            }
        }

        PropertyAnimation {
            id: rotate_away
            target: rotation
            properties: "angle"
            from: 0
            to: 90
            duration: 1000
        }

        PropertyAnimation {
            id: rotate_new
            target: rotation
            properties: "angle"
            from: -90
            to: 0
            duration: 1000
        }
    }
}

所以问题出在这部分：

        rotate_away.start()
        question.text = "abcabcabc"
        rotate_new.start()

文本发生变化，但只会执行第二个动画。

我试过了

while (rotate_away.running) {}

等待第一个动画，但随后应用程序卡住了。

Answer 1

我认为动画应该使用SequentialAnimation顺序播放。请按如下方式重新访问您的代码：

        MouseArea {
            anchors.fill: card
            onClicked: {
                // Code for Turning Card around
//                rotate_away.start()
//                question.text = "abcabcabc"
//                rotate_new.start()
                fullRotate.start();
            }
        }

        SequentialAnimation {
            id: fullRotate

            PropertyAnimation {
                id: rotate_away
                target: rotation
                properties: "angle"
                from: 0
                to: 90
                duration: 1000
            }

            PropertyAction {
                target: question
                property: "text"
                value: "abcabcabc"
            }

            PropertyAnimation {
                id: rotate_new
                target: rotation
                properties: "angle"
                from: -90
                to: 0
                duration: 1000
            }
        }

此外，我推荐 Flipable 用于翻转效果。

使用文本更改转动卡片 -> 寻找顺序的 QML 逻辑 Actions/Animations

Turning Card with Text change -> Looking for QML Logic for Sequential Actions/Animations

qt

qml

qtquick2