QML: анимация только при входе мыши в изображение

Question

Я хотел бы сделать анимацию, когда мышь попадает на изображение, но НЕ, когда мышь покидает изображение.

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

}

Код выше делает также анимацию, когда мышь покидает изображение.

Может кто-нибудь помочь?

Answer 1

Установка масштаба, а затем запуск анимации, изменяющей масштаб, кажется нечетным. Если бы я был вами, я бы разбил это на состояния и настроил анимацию на соответствующий переход.

Вот пример того, как это можно сделать:

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