鼠标单击 QML 上的重复状态

Question

在代码中，我定义了 State、Transition 和 RotationAnimation。

发生属性更改后，即在 rotation 设置为 360 后，onClicked 处理程序将呈现为静音并且永远不会播放动画在随后 MouseArea 次点击后再次点击。

这是我当前的代码：

Image{
    id: logo
    x: 29
    source: "LSFO-IngeniiSymbol.png"
    width: 70
    height: 70
    states: State {
        name: "rotated" ; when: area.pressed
        PropertyChanges {target: logo; rotation: 360 }

    }

    transitions: Transition {
        RotationAnimation { 
            id: rotateanimate
            duration: 1000
            direction: RotationAnimation.Clockwise
        }
    }

    MouseArea {
        id: area
        anchors.fill: parent 
        onClicked: {
            logo.state = "rotated"
           // pageloader.source = "HelpDoc.qml"
           // pageloader.source = ""
           // pageloader.source = "HelpDoc.qml"
        } 
    }
}

Answer 1

State 是一种表示给定 Item 的不同属性配置的方法。每个 State 都有其在特定 Item.

中定义的属性的唯一值集

Transition 是一种在当前 State 更改为另一个 State 时向 Item 添加动画的方法.它们可以在 "restricted way" 中应用，即仅当 Item 从特定的 State 更改为另一个（参见 from and to 属性）时，或者它们可以应用 "globally" 每次 State 更改。无论如何，需要.

进行更改

在您的代码中，state 设置为 rotated，然后重新分配相同的 State，以便不会发生进一步的更改。因此，没有空间容纳另一个 Transition，无论是 rotated state 还是默认的空名称 State.

总之，应用动画的方式多种多样，包括但不限于Behaviors, Transitions, using predefined targets and direct property animation。在我看来，后者是解决这个特定案例的方法。这是您的代码的重新访问版本，其中包含鼠标单击时触发的动画：

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.1

ApplicationWindow {
    width: 250
    height: 250
    visible: true

    Image{
        id: logo
        anchors.centerIn: parent
        source: "https://yt3.ggpht.com/-YiF6y9OXDQ8/AAAAAAAAAAI/AAAAAAAAAAA/oFNmJLmzqDA/s100-c-k-no/photo.jpg"
        width: 100
        height: 100

        RotationAnimation {
            id: rotate
            target:logo
            property: "rotation"
            from: 0
            to: 360
            duration: 1000
            direction: RotationAnimation.Clockwise
        }


        MouseArea {
            id: area
            anchors.fill: parent
            onClicked: {
                rotate.start()   // animation plays here!
                // your code
            }
        }
    }
}

鼠标单击 QML 上的重复状态

Repeat state on mouse click QML

qt

qml

qtquick2