QML如何停止過渡動畫？

Question

示例代碼：

Button{ 
    text: "stop" 
    onClicked: p1p2Aniamtion.stop(); 
} 
Rectangle { 
    id: rect 
    states: [ 
     State { 
      name: "p1" 
      PropertyChanges {target: rect; x: 0; y: 0} 
     }, 
     State { 
      name: "p2" 
      PropertyChanges {target: rect; x: 500; y: 0} 
     } 
    ] 
    transitions: [ 
     Transition { 
      from: "p1"; to: "p2"; reversible: true 
      NumberAnimation{ property: "x"; duration: 5000} 
     } 
    ] 
} 

在這裏，我有一個矩形，並使其從點p1移動到另一個點p2， 如果按鈕點擊，我想的過渡力動畫停止。

我試圖阻止NumberAnimation，但看起來NumberAnimation綁定Transition，所以無論如何控制動畫？

Answer 1

如果你想強迫它，移動到終點位置，嘗試：

onClicked: { 
     var s = rect.state 
     rect.state = '' 
     rect.state = s 
    } 

如果你想將它恢復到原來的位置嘗試：

onClicked: { 
     rect.state = '' 
    } 

如果你想讓它留在它的地方嘗試：

• 添加屬性eG tempX：x
• 添加狀態e.G.用propertyChange {target：rect; X：tempX}
• onXChanged：tempX = X

切換到狀態 '暫停' onClicked

Button{ 
    y: 400 
    text: "stop" 
    onClicked: { 
     var s = rect.state 
     rect.state = 'pause' 
     //rect.state = s 
    } 
} 

Button{ 
    y: 400 
    x: 100 
    text: "run" 
    onClicked: rect.state = (rect.state === 'p1' ? 'p2' : 'p1'); 
} 

Rectangle { 
    id: rect 
    width: 80 
    height: 80 
    property int tempX: x 
    onXChanged: tempX = x 

    states: [ 
     State { 
      name: "p1" 
      PropertyChanges {target: rect; x: 0; y: 0} 
     }, 
     State { 
      name: "p2" 
      PropertyChanges {target: rect; x: 500; y: 0} 
     }, 
     State { 
      name: 'pause' 
      PropertyChanges { target: rect; x: tempX } 
     } 
    ] 
    transitions: [ 
     Transition { 
      from: "p1"; to: "p2"; reversible: true 
      NumberAnimation{ property: "x"; duration: 5000} 
     } 
    ] 
}