QML - 为什么动画会发生冲突?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了QML - 为什么动画会发生冲突?相关的知识,希望对你有一定的参考价值。

Qml - Flipable的例子:

import QtQuick 2.0

Flipable {
    id: flipable
    width: 240
    height: 240

    property bool flipped: false

    front: Rectangle { width: 200; height: 200; color: 'red'; anchors.centerIn: parent }
    back: Rectangle { width: 200; height: 200; color: 'blue'; anchors.centerIn: parent }

    transform: Rotation {
        id: rotation
        origin.x: flipable.width/2
        origin.y: flipable.height/2
        axis.x: 0; axis.y: 1; axis.z: 0     // set axis.y to 1 to rotate around y-axis
        angle: 0    // the default angle
    }

    states: State {
        name: "back"
        PropertyChanges { target: rotation; angle: 180 }
        when: flipable.flipped
    }

    transitions: Transition {
        NumberAnimation { target: rotation; property: "angle"; duration: 4000 }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: flipable.flipped = !flipable.flipped
    }
}

这个例子运行良好但是,如果我使用这个代码,Flipable不会运行:

MouseArea {
  anchors.fill: parent
  onClicked: {
    flipable.flipped = true;
    flipable.flipped = false;
  }
}

我认为动画冲突时,我第一次使flipped属性是true然后false。而我希望flipable打开然后关闭。

答案

问题是你在翻转动画开始之前将属性flipped设置回false

如果你想要完整的打开/关闭动画,你必须等待“开放”动画完成才能开始“关闭”动画:

transitions: Transition {
    id: transition
    onRunningChanged: {
        if (!running && flipable.flipped) {
            flipable.flipped = false;
        }
    }
    NumberAnimation { target: rotation; property: "angle"; duration: 4000 }
}

MouseArea {
    anchors.fill: parent
    onClicked: {
        if (!transition.running) {
            flipable.flipped = true;
        }
    }
}

以上是关于QML - 为什么动画会发生冲突?的主要内容,如果未能解决你的问题,请参考以下文章

为啥当objective-c 有冲突返回类型时会发生这种情况?

FAB 的片段布局与 CoordinatorLayout 冲突

git分支合并为啥会发生冲突

26.Qt Quick QML-RotationAnimationPathAnimationSmoothedAnimationBehaviorPauseAnimationSequential(代码片段

onClicked 和 onDoubleClicked 都发生在 QML

动画未按照编写代码的顺序运行