Animation only when mouse enters image
-
I would like to make an animation when mouse comes over the image, but NOT when 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 code above makes also animation, when mouse is leaving image.
Can someone help?
-
I would like to make an animation when mouse comes over the image, but NOT when 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 code above makes also animation, when mouse is leaving image.
Can someone help?
Hi @vladinko0,
You can use onEntered handler to trigger the animation.