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 = ''
   }

如果您希望它保持原样，请尝试：

添加属性e.G. 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}
        }
    ]
}

QML如何停止过渡动画？

1 个答案: