i make animation when mouse comes on image, not when mouse leaves 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 animation, when mouse leaving image.
can help?
setting scale , triggering animation alters scale seems odd approach. if you, i'd break out states , set animation trigger on appropriate transition.
here's example of how 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" } } } 