QML如何停止过渡动画？

debugcn 发表于 Dev

JustWe

样例代码：

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，所以还是要控制动画吗？

真皮

如果要强制将其移动到结束位置，请尝试：

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

如果要将其重置为原始位置，请尝试：

onClicked: {
       rect.state = ''
   }

如果您希望它停留在原处，请尝试：

添加属性eG tempX：x
添加带有状态更改的状态eG暂停{target：rect; x：tempX}
onXChanged：tempX = x

切换到“暂停”状态

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。