Question

我想要一个对象，需要它来复杂的路径并作为动画移动。路径包括直线和曲线。就像火车一样。

两个解决方案：1。PathAnimation或2. states多动画

解决方案1的问题：火车可能在一个随机的时间点停下来（暂停动画），然后反向回到起始位置（反向播放动画）。

所以我想知道以何种方式反向玩PathAnimation？

Answer 1

我认为QML没有这个功能。

您可以在需要新路径时设置新路径。即，当你的动画结束时。

这里有一个例子：

import QtQuick 2.3
import QtQuick.Controls 1.1

ApplicationWindow {
    visible: true
    width: 350
    height: 300

    Rectangle {
        id: window
        width: 350
        height: 300

        Canvas {
            id: canvas
            anchors.fill: parent
            antialiasing: true

            onPaint: {
                var context = canvas.getContext("2d")
                context.clearRect(0, 0, width, height)
                context.strokeStyle = "black"
                context.path = pathAnim.path
                context.stroke()
            }
        }

        SequentialAnimation {
            id: mySeqAnim
            running: true

            PauseAnimation { duration: 1000 }

            PathAnimation {
                id: pathAnim

                duration: 2000
                easing.type: Easing.InQuad

                target: box
                orientation: PathAnimation.RightFirst
                anchorPoint: Qt.point(box.width/2, box.height/2)
                path: myPath1
            }

            onStopped: {
                console.log("test")

                pathAnim.path = myPath2;

                mySeqAnim.start();
            }
        }

        Path {
            id: myPath1
            startX: 50; startY: 100

            PathLine { x: 300; y: 100 }

            onChanged: canvas.requestPaint()
        }

        Path {
            id: myPath2
            startX: 300; startY: 100

            PathLine { x: 50; y: 100 }

            onChanged: canvas.requestPaint()
        }

        Rectangle {
            id: box

            x: 25; y: 75
            width: 50; height: 50
            border.width: 1
            antialiasing: true

            Text {
                anchors.centerIn: parent
            }
        }
    }
}

QML如何反向播放动画

1 个答案: