小白学qml 6



  • 状态与过渡( States and Transitions)

    除了Animation还有一种方法可以做出动画效果,那就是状态+过渡

    状态( States)

    在QML中, 使⽤State元素来定义状态, 需要与基础元素对象( Item) 的states序列属性连接。 状态通过它的状态名来鉴别, 由组成它的⼀系列简单的属性来改变元素。

    例子中,点击鼠标,可以切换状态,不同状态控制不同的属性值

    //状态与过渡
        Item{
            id: itemState
            anchors.fill: parent
    
            Image{
                id: imgState1
                source: "qrc:/meng.png"
            }
    
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    //切换状态
                    if(itemState.state == "go"){
                        itemState.state = "back"
                    }
                    else{
                        itemState.state = "go"
                    }
                }
            }
    
            //初始化
            state: "back"
    
            states: [
                //状态-go
                State {
                    name: "go"
                    PropertyChanges {target: imgState1; x: 300; }
                },
                //状态-back
                State {
                    name: "back"
                    PropertyChanges {target: imgState1; x: 0; }
                }
            ]
        }
    

    0_1527650315878_20180530_111751.gif

    过渡( Transitions)

    只有状态的切换,画面只有闪现效果,要想有动画效果,需要加过渡

    例子中,根据迁移的状态不同,添加了不同的过渡时间

    transitions: [
                Transition {
                    from: "back"; to: "go"
                    NumberAnimation { target: imgState1; property: "x"; duration: 2000}
                },
                Transition {
                    to: "back"
                    NumberAnimation { target: imgState1; property: "x"; duration: 300}
                }
            ]
    

    0_1527650734088_20180530_112505.gif

    源代码

    Fork me on Gitee


 

最近的回复

  • 很棒!求软件,我要摆在我的桌面上。

    阅读更多
  • 这个很有意思 ^_^

    阅读更多
  • 思路:
    1.把官方时钟demo改了,加了秒针,加了壁纸,加了小萝莉
    2.QWindow窗口嵌入到桌面

    0_1533891238039_20180810_164211.gif

    改版

    去掉秒针,把小萝莉正过来,沿着表盘走

    0_1533893719543_20180810_173309.gif

    源代码

    Fork me on Gitee

    阅读更多

关注我们

微博
QQ群











召唤伊斯特瓦尔