QML：僅當鼠標進入圖像時動畫

我想在鼠標移過圖像時製作動畫，但不在鼠標離開圖像時製作動畫。QML：僅當鼠標進入圖像時動畫

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

}

上面的代碼還使得動畫，當鼠標離開圖像。

有人可以幫忙嗎？

來源

2015-04-27 Vladimír

你能否澄清你想實現的行爲？這有點令人困惑，因爲您將比例設置爲0.8或1.0，但是您在NumberAnimation中重寫了這些值。 – MrEricSir

當鼠標移過圖像時，我想對圖像做一些反彈動畫。這段代碼就是這樣做的，但是當鼠標離開圖像區域時，我不想要那個反彈動畫。沒有線路比例：im1MouseArea.containsMouse？ 0.8：1.0將不會有動畫。不管有多少數字。我也可以使用scale：im1MouseArea.containsMouse？ 1.0：1.0。結果是一樣的。真奇怪。 –

設置比例，然後觸發一個改變比例的動畫看起來像一個奇怪的方法。如果我是你，我會把它分解成各個狀態，並設置動畫以適當的轉換觸發。

這裏有一個如何可以這樣做的例子：

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

來源

2015-04-28 00:39:53 MrEricSir

完美。謝謝。由於名譽低下，我無法贊成，但是當我達到這一點時，我會做。 –

QML：僅當鼠標進入圖像時動畫

回答

相關問題