Qt-QML-给我的导航条写一个动画-State-Transition

上篇中，我已经写出一个导航条的，虽然太丑了，不过功能是有了，这次我将要给我的导航条加一个动画，先看下演示效果

 

 

 

这次我是用的是一个状态动画，大致原理就是写出一个空间的几个状态，完了再加一个过度动画，这里只有简单的属性动画，和持续周期

 

是我的错误用法

 

开的是时候，我把状态卸载了DLNavigation的模块里面，虽然可以实现，但是里面DLButton控件是没有动的，所以我把这个状态动画移动了上一层中，等于是操作我的整个导航条的空间，这里还是有问题的，不过后期再将卸载这里的问题。

先吧代码截图位置写上来

这里第一部分是控制按钮

第二部分是动画实现部分

 

DLButton
    {
        width: 100
        height: 100
        x:parent.width-width
        y:0
        onClicked:
        {
            if(navigation.state === "state1")
            {
                navigation.state = "state2"
                console.log("切换至状态2")
            }
            else
            {
                navigation.state = "state1"
                console.log("切换至状态1")
            }
            console.log(navigation.width+"   "+navigation.height)

        }
    }

利用一个按钮的点击事件来控制导航条的显示和隐藏，也就是导航条的两种状态的切换

 

 

 

states:
            [
            State {
                name: "state1"
                PropertyChanges {
                    target: navigation
                    y:parent.height
                }
            },
            State {
                name: "state2"
                PropertyChanges {
                    target: navigation
                    y:parent.height-navigation.height
                }
            }
        ]

        transitions:
            [
            Transition {
                from: "*"
                to: "*"
                PropertyAnimation {
                    properties: "y"; duration: 1000 }
            }
        ]

上面的代码就是状态以及切换动画，两个状态之间记得要加都好哦。