Question

考虑到车辆以恒定速度向目标移动。在某个时刻，它会看到一个目标并且应该减速以便完全停止。如何通过Qt Quick中的动画实现这一点，请记住它停止的时刻尚不清楚，并且会由某个人工智能系统发布？

当运行下面的应用程序时，这是尝试解决此问题（尽管已经简化，因为已知stopping状态的条件），从moving状态转换为{{1不顺利。如何通过以stopping状态下项目所用的相同速度启动stopping过渡来轻松进入moving转换？

import QtQuick 2.3
import QtQuick.Controls 1.2

ApplicationWindow {
    id: window
    color: "black"
    width: 150
    height: 600

    Timer {
        running: true
        interval: 1000
        onTriggered: {
            unit.state = "moving";
            unit.y = window.height - unit.height;
        }
    }

    Rectangle {
        id: unit
        width: 150
        height: 150
        radius: width
        color: "white"
        state: "stopped"

        readonly property bool shouldStop: unit.y >= 200

        onStateChanged: print(state)

        states: [
            State {
                name: "stopped"
            },
            State {
                name: "moving"
            },
            State {
                name: "stopping"
                when: unit.shouldStop
            }
        ]

        Behavior on y {
            enabled: unit.state == "moving"

            NumberAnimation {
                duration: 1000
            }
        }

        transitions: [
            Transition {
                from: "moving"
                to: "stopping"

                NumberAnimation {
                    target: unit
                    property: "y"
                    to: window.height - unit.height
                    duration: 2000
                    easing.type: Easing.OutQuad
                }
            }
        ]
    }
}

Answer 1

这可以使用单一国家，IMO as，

来实现

   ApplicationWindow {
        id: window
        visible: true
        color: "black"
        width: 150
        height: 600

        Timer {
            running: true
            interval: 1000
            repeat: false
            onTriggered: {
                unit.state = "moving";
            }
        }

        Rectangle {
            id: unit
            width: 150
            height: 150
            radius: width
            color: "white"
            state: "stopped"

            states: [
                State {
                    name: "moving"
                    PropertyChanges { target: unit; y: window.height - unit.height }
                }
            ]

            transitions: [
                Transition {
                    to: "moving"

                    NumberAnimation {
                        property: "y"
                        duration: 2000
                        easing.type: Easing.OutQuad
                    }
                }
            ]
        }
    }

稍微修改了原始代码。也许您可以尝试更改持续时间和/或缓和类型以获得更流畅的体验。

运动平稳过渡

1 个答案: