首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >QML如何反转播放动画

QML如何反转播放动画
EN

Stack Overflow用户
提问于 2016-10-04 10:33:59
回答 1查看 2K关注 0票数 1

我想要一个物体,需要它来跟随复杂的路径,并像动画一样移动。路径由直线和曲线组成。就像火车一样。

两种解决方案: 1. PathAnimation或2.多动画states

解决方案1的问题:列车可能在任意时间点停止(暂停动画),然后反向回到开始位置(反向播放动画)。

所以我想知道有什么方法可以反向玩PathAnimation吗?

EN

回答 1

Stack Overflow用户

发布于 2016-10-04 17:06:44

我认为QML没有这个功能。

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

下面是一个示例:

代码语言:javascript
运行
复制
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
            }
        }
    }
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/39843303

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档