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