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动画可见属性更改

回答

相关问题