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 }

           }

       ]

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

喜欢的也可以去我的GitHub上面下载源代码，同时也指正下我存在的问题，大家共同进步