使用文本更改的旋转卡 - > 查找顺序动作/动画的 QML 逻辑

Question

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

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

到目前为止，我已经为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()

文本改变，但只执行第二个动画。

I tried

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，这意味着翻转效果