在鼠标单击QML时重复状态

Question

Within the code I have a State , a Transition and a RotationAnimation defined.

After the property change takes place, ie after the rotation is set to 360 , the onClicked handler is rendered mute and the animation will never be played again after subsequent MouseArea clicks.

Here is my current code:

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 s are a way to represent different property configurations for a given Item . Each State has its unique set of values for the properties defined inside the specific Item .

Transition s are a way to add animations to an Item when the current State changes to another State . They can be applied in a "restricted way", ie only when the Item changes from a particular State to another (see from and to properties), or they can be applied "globally" for each State change. In any case a change is needed .

In your code the state is set to rotated and after that the very same State is reassigned so that no further changes occur. Hence, there is no room for another Transition , either to rotated state or the default empty-named State .

Anyhow, there are various ways to apply animations including, but not limited to, Behavior s , Transition s, using predefined targets and direct property animation . It seems to me the latter is the way to go for this specific case. Here is a revisited version of your code with the animation triggered on mouse click:

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