行爲規模經常不起作用

Question

我想有一個應用程序，其中總是當新圖像加載時，它通過從0大小縮放到默認大小出現。此行爲通常不起作用。在這張圖片中，我還使用鼠標進入圖像時彈跳的動畫。這可能是因爲這兩個動畫不適合自己，那就是爲什麼擴大規模通常不起作用？

我使用Linux Mint的13，Qt的5.3

這裏是我的圖片元素：

所有的

Image { 
     id: pic1 
     width: appWindow.height*0.4 
     height: appWindow.height*0.4 
     smooth: { enabled = true 
      pic1MouseArea.containsMouse 
     } 
     states: [ "mouseIn", "mouseOut" ] 
     state: "mouseOut" 

     transitions: [ 
      Transition { 
       from: "*" 
       to: "mouseIn" 
       NumberAnimation { 
        target: pic1 
        properties: "scale" 
        from: 0.95 
        to: 1 
        duration: 400 
        easing.type: Easing.OutBounce 
       } 
      } 
     ] 
     scale: { 
      status === Image.Ready ? 1 : 0 
     } 
     Behavior on scale { 
      NumberAnimation{ 
       from: 0 
       to: 1 
       duration: 1000 
       easing.type: Easing.OutBounce 
      } 
     } 
     MouseArea{ 
      id: pic1MouseArea 
      hoverEnabled: true 
      anchors.fill: parent 
      onContainsMouseChanged: { 
       pic1.state = containsMouse ? "mouseIn" : "mouseOut" 
      } 
      onClicked: {  
        MyScript.getRandomFile() 
      } 
     } 
    } 

Answer 1

首先，請閱讀本doc。 states屬性必須定義爲list<State>，而不是字符串數組。另外，State元素定義了一些屬性或一組屬性從默認配置更改時的狀態。在你的榜樣中，什麼都沒有定義閱讀更多關於State類型。

最後，這裏是一個小例子來幫你好嗎：

import QtQuick 2.5 
import QtQuick.Controls 1.4 
import QtQuick.Window 2.2 

Window { 
    width: 600 
    height: 400 
    visible: true 
    Image { 
     id: img 
     source: "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" 
     anchors.centerIn: parent 
     opacity: 1 
     state: "mouseOut" 
     states: [ 
      State { 
       name: "mouseIn" 
       PropertyChanges { target: img; opacity: 0 } 
      }, 
      State { 
       name: "mouseOut" 
       PropertyChanges { target: img; opacity: 1 } 
      } 
     ] 
     transitions: Transition { 
      PropertyAnimation { 
       target: img 
       property: "opacity" 
       easing.type: Easing.InCirc 
       duration: 1000 
      } 
     } 

     MouseArea { 
      anchors.fill: parent 
      hoverEnabled: true 
      onEntered: img.state = "mouseIn" 
      onExited: img.state = "mouseOut" 
     } 
    } 
} 

當然，你可以用Behavior取代transitions，如果你需要的正是這種功能，如下圖所示：

Behavior on opacity { 
    PropertyAnimation { 
     duration: 1000 
     easing.type: Easing.InCirc 
    } 
}