鼠标单击 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

States 是一种表示给定Item 的不同属性配置的方法。每个State 都有其独特的一组值，用于在特定Item 中定义的属性。

Transitions 是一种在当前State 更改 到另一个State 时向Item 添加动画的方法。它们可以以“受限制的方式”应用，即仅当 Item 从特定的 State 更改为另一个时（参见 from 和 to 属性），或者它们可以“全局”应用于每个 @ 987654338@更改。在任何情况下，需要进行更改。

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

无论如何，应用动画的方法有很多种，包括但不限于Behaviors、Transitions、using predefined targets 和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
            }
        }
    }
}