Clever Geek Handbook

QML: animation only when mouse enters an image

I want to animate when the mouse enters the image, but NOT when the mouse leaves the image.

Item{
width: 800
height:800
Rectangle{
    id: blueRec
    width: 100; height: 100; color: "blue"
    MouseArea{
        anchors.fill: parent
        onClicked: {
            im1.visible = true
            im1.source = "1.png"
        }
    }
}
Image {
    id: im1
    scale: im1MouseArea.containsMouse ? 0.8 : 1.0
    Behavior on scale {
        NumberAnimation{
            id: anim
            from: 0.95
            to: 1
            duration: 400
            easing.type: Easing.OutBounce
        }
    }
    MouseArea{
        id: im1MouseArea
        hoverEnabled: true
        anchors.fill: parent
    }
}

}

The above code also makes an animation when the mouse leaves the image.

Can anyone please help?

+3


source to share


1 answer


Adjusting the scale and then starting the animation that changes the scale seems odd. If I were you, I would break this down into states and set the animation to the appropriate transition.

Here's an example of how this can be done:



Image {
    id: im1

    states: [ "mouseIn", "mouseOut" ]
    state: "mouseOut"

    transitions: [
        Transition {
            from: "*"
            to: "mouseIn"
            NumberAnimation {
                target: im1
                properties: "scale"
                from: 0.95
                to: 1
                duration: 400
                easing.type: Easing.OutBounce
            }
        }
    ]

    MouseArea{
        id: im1MouseArea
        hoverEnabled: true
        anchors.fill: parent

        onContainsMouseChanged: {
            im1.state = containsMouse ? "mouseIn" : "mouseOut"
        }
    }
}
+2


source






More articles:


All Articles