Question

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

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

到目前为止，我已为Rectangle创建了Card，并为Transformation中的Rotation创建了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()

文字发生变化，但只会执行2'动画。

我试过

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用于翻转效果。

转换卡片改变文字 - ＆gt;寻找顺序动作/动画的QML逻辑

1 个答案: