0

Consider that there is a vehicle moving towards a target at a constant speed. At a certain point, it sees a target and should slow down in order to come to a complete stop. How can this be achieved with animations in Qt Quick, keeping in mind that the moment at which it stops is not known, and will be issued by some AI system?

When running the application below, which is an attempt at solving this problem (albeit simplified, as the conditions for the stopping state are known), the transition from the moving state to stopping is not smooth. How can I ease into the stopping transition by starting it at the same speed the item was travelling at in the moving state?

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
                }
            }
        ]
    }
}
Mitch
  • 23,716
  • 9
  • 83
  • 122
  • What is your aim ? Is it to move the Circle from top to bottom smoothly ? – astre Aug 22 '14 at 05:52
  • Yes. If you run the application, you'll notice that there is an instant change in speed when the stopping state is entered. I'd like the stopping state to animate the circle at the same speed the item was travelling at in the moving state, and then bring it to a stop. – Mitch Aug 22 '14 at 06:27
  • I've updated the question to be more specific. – Mitch Aug 22 '14 at 08:45

1 Answers1

0

This can be achieved using single State, 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
                    }
                }
            ]
        }
    }

Modified you original code a little. May be you can try changing duration and/or easing type for a more smoother experience.

astre
  • 798
  • 6
  • 14