Изменение состояния после завершения анимации перехода

Question

Я хочу изменить состояние после того, как анимация перехода завершена. У меня есть следующий код, который достигает эту цель, хотя, кажется, своего рода хак:

import QtQuick 2.3 
import QtQuick.Controls 1.2 
import QtQuick.Controls.Styles 1.2 

Rectangle { 
    id: root 
    width: 400 
    height: 400 

    Rectangle { 
     id: rect 
     color: "blue" 
     width: 50 
     height: 50 
     anchors.centerIn: parent 

     MouseArea { 
      anchors.fill: parent 
      onClicked: rect.state = "animating" 
     } 

     states: [ 
      State { 
       name: "animating" 

       PropertyChanges { 
        target: rect 
        rotation: 360 
       } 
      }, 
      State { 
       name: "shrinking" 

       PropertyChanges { 
        target: rect 
        scale: 0 
       } 
      } 
     ] 

     transitions: [ 
      Transition { 
       from: "" 
       to: "animating" 

       SequentialAnimation { 
        RotationAnimation { 
         duration: 500 
        } 
        ScriptAction { 
         script: rect.state = "shrinking" 
        } 
       } 
      }, 
      Transition { 
       from: "animating" 
       to: "shrinking" 

       NumberAnimation { 
        property: "scale" 
        duration: 500 
       } 
      } 
     ] 
    } 
} 

Есть ли лучше способ сделать это без использования ScriptAction? Обратите внимание, что мне нужно второе состояние, и я не хочу просто консолидировать анимацию масштаба в SequentialAnimation перехода animating.

Answer 1

несколько иной подход, чтобы установить shrinking состояние в animating состоянии, и использовать PropertyAction, чтобы заставить изменение состояния должно произойти в конце перехода:

 State { 
      name: "animating" 

      PropertyChanges { 
       target: rect 
       rotation: 360 
      } 
      PropertyChanges { 
       target: rect 
       state: "shrinking" 
      } 

и

 Transition { 
      SequentialAnimation { 
       RotationAnimation { 
        duration: 500 
       } 
       PropertyAction { 
        target: rect 
        property: "state" 
       } 
      } 
     } 

Обратите внимание, что я согласен с jturcotte на его оценке использования этих состояний здесь.

Answer 2

Правильный способ заключается в изменении состояния в обработчике runningChanged перехода при прохождении к ложному, чем завершение анимации. сделать что у вас есть два решения:

Sol 1. Использование connections (вы получите предупреждение о доли не уведомляемом собственности, игнорировать его)

Connections{ 
      target:rect.transitions[0] 

      onRunningChanged:{ 
       if(rect.transitions[0].running === false) 
       { 
        rect.state = "shrinking" 
       } 
      } 
     } 

код будет:

import QtQuick 2.3 
import QtQuick.Controls 1.2 
import QtQuick.Controls.Styles 1.2 

Rectangle { 
    id: root 
    width: 400 
    height: 400 

    Rectangle { 
     id: rect 
     color: "blue" 
     width: 50 
     height: 50 
     anchors.centerIn: parent 

     MouseArea { 
      anchors.fill: parent 
      onClicked: rect.state = "animating" 
     } 

     states: [ 
      State { 
       name: "animating" 

       PropertyChanges { 
        target: rect 
        rotation: 360 
       } 
      }, 
      State { 
       name: "shrinking" 

       PropertyChanges { 
        target: rect 
        scale: 0 
       } 
      } 
     ] 
     Connections{ 
      target:rect.transitions[0] 

      onRunningChanged:{ 
       if(rect.transitions[0].running === false) 
       { 
        rect.state = "shrinking" 
       } 
      } 
     } 
     transitions: [ 
      Transition { 
       from: "" 
       to: "animating" 
        RotationAnimation { 
         duration: 500 
        } 
      }, 
      Transition { 
       from: "animating" 
       to: "shrinking" 

       NumberAnimation { 
        property: "scale" 
        duration: 500 
       } 
      } 
     ] 
    } 
} 

раствор 2: изменить состояние, в runningchanged обработчика при переходе непосредственно:

import QtQuick 2.3 
import QtQuick.Controls 1.2 
import QtQuick.Controls.Styles 1.2 

Rectangle { 
    id: root 
    width: 400 
    height: 400 

    Rectangle { 
     id: rect 
     color: "blue" 
     width: 50 
     height: 50 
     anchors.centerIn: parent 

     MouseArea { 
      anchors.fill: parent 
      onClicked: rect.state = "animating" 
     } 

     states: [ 
      State { 
       name: "animating" 

       PropertyChanges { 
        target: rect 
        rotation: 360 
       } 
      }, 
      State { 
       name: "shrinking" 

       PropertyChanges { 
        target: rect 
        scale: 0 
       } 
      } 
     ] 

     transitions: [ 
      Transition { 
       from: "" 
       to: "animating" 

        RotationAnimation { 
         duration: 500 
        } 
        onRunningChanged:{ 
         if(running === false) 
         { 
          rect.state = "shrinking" 
         } 
        } 
      }, 
      Transition { 
       from: "animating" 
       to: "shrinking" 

       NumberAnimation { 
        property: "scale" 
        duration: 500 
       } 
      } 
     ] 
    } 
} 

Я предпочитаю первое решение (Connections) потому что это более общий