QML動畫可見屬性更改

我想畫的動畫時，元素變得可見（是應該順利出現，而不是整個的話）QML動畫可見屬性更改

我想這

states: State 
{ 
    name: "iconOff" 
    when: iconOnSwitch.checked == false 
    PropertyChanges { target: selectIconRow; visible: false } 
} 

transitions: Transition 
{ 
    reversible: true 
    from: "" 
    to: "iconOff" 
    PropertyAnimation 
    { 
     properties: "x,y,visible" 
     easing.type: Easing.InOutQuad 
     from: selectIconRow 
     property: "visible" 
    } 
}

但selectIconRow仍立即出現

我該如何使用這樣的動畫？

來源

2012-09-08 marmistrz

因爲它是布爾型的，所以visible屬性不能動畫。也許opacity可以做到這一點。

來源

2012-09-09 00:47:25 sergk

+10

小心不透明。如果透明度= 0.0時透明度完全透明，則與visible = false不同。例如，不可見項目中的嵌套MouseArea仍然可點擊。 –

的確如此。通常有兩種方法。對於簡單的情況'可見'可以綁定到'不透明！= 0'。在更復雜的情況下，狀態隨着轉變而變化是一條路。 – sergk

這裏是如何與opacity做到這一點：

Rectangle { 
    id: myRect 
    property bool stateVisible: true 
    ... 
    states: [ 
     State { when: stateVisible; 
      PropertyChanges { target: myRect; opacity: 1.0 } 
     }, 
     State { when: !stateVisible; 
      PropertyChanges { target: myRect; opacity: 0.0 } 
     } 
    ] 
    transitions: Transition { 
     NumberAnimation { property: "opacity"; duration: 500} 
    } 
}

記住瓦斯科里納爾多的意見。

來源

2015-01-10 12:56:09

這在我的系統上不太適用，請稍作更正，查看我的答案。無論如何感謝這段代碼。 –

我不得不修改UGA布嘎的回答略有使其工作，這裏就是我的了：

Rectangle { 
    id: myRect 
    property bool stateVisible: true 
      ... 
    states: [ 
     State { when: myRect.stateVisible; 
       PropertyChanges { target: myRect; opacity: 1.0 }}, 
     State { when: !myRect.stateVisible; 
       PropertyChanges { target: myRect; opacity: 0.0 }} 
    ] 
    transitions: [ Transition { NumberAnimation { property: "opacity"; duration: 500}} ] 
}

請注意，stateVisible通過項目ID引用，但它不是我的系統上沒有它的工作。也許API的一些變化導致了這一點。

我也transitions場加方括號作爲數組需要有（雖然QML語法似乎讓拼寫不帶括號）只是以備將來參考

來源

2015-08-23 23:29:48

，這裏是我的解決方案，它需要照顧也瓦斯科的警告。基本上，在不透明度發生變化後，我會爲組件的visible屬性設置動畫。它傷害看到一個布爾一個NumberAnimation，但它的工作：

states: [ 
    State{ 
     name: "Visible" 
     PropertyChanges{target: root; opacity: 1.0} 
     PropertyChanges{target: root; visible: true} 
    }, 
    State{ 
     name:"Invisible" 
     PropertyChanges{target: root; opacity: 0.0} 
     PropertyChanges{target: root; visible: false} 
    } 
] 

transitions: [ 
     Transition { 
      from: "Visible" 
      to: "Invisible" 

      SequentialAnimation{ 
       NumberAnimation { 
        target: root 
        property: "opacity" 
        duration: 500 
        easing.type: Easing.InOutQuad 
       } 
       NumberAnimation { 
        target: root 
        property: "visible" 
        duration: 0 
       } 
      } 
     }, 
     Transition { 
      from: "Invisible" 
      to: "Visible" 
      SequentialAnimation{ 
       NumberAnimation { 
        target: root 
        property: "visible" 
        duration: 0 
       } 
       NumberAnimation { 
        target: root 
        property: "opacity" 
        duration: 500 
        easing.type: Easing.InOutQuad 
       } 
      } 
     } 
    ]

這還引入組件時消失的過渡。

來源

2015-12-02 10:20:35

如果傷害太大，您可以改用「PropertyAnimation」。 – GrecKo

Item { 

scale: visible ? 1.0 : 0.1 
Behavior on scale { 
    NumberAnimation { duration: 500 ; easing.type: Easing.InOutBounce } 
    } 

}

對我有幫助。

來源

2017-11-07 19:50:00

隱藏物品時不會生成動畫。 – GrecKo

QML動畫可見屬性更改

回答

相關問題