Плавный переход движения

Question

Считайте, что транспортное средство движется к цели с постоянной скоростью. В определенный момент он видит цель и должен замедляться, чтобы полностью остановиться. Как это можно достичь с помощью анимаций в Qt Quick, имея в виду, что момент, когда он останавливается, неизвестен и будет выпущен некоторой системой AI?

При запуске приложения ниже, которая является попыткой решить эту проблему (хотя и упрощенный, так как известны условия для stopping состояния), переход от состояния к movingstopping не является гладким. Как я могу облегчить переход 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

Это может быть достигнуто с помощью единого государства, ИМО, как,

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 
        } 
       } 
      ] 
     } 
    } 

Модифицированный вам исходный код немного. Возможно, вы можете попробовать изменить продолжительность и/или облегчить тип для более плавного опыта.