zoukankan      html  css  js  c++  java
  • Qt-QML-给我的导航条写一个动画-State-Transition

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

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

    是我的错误用法

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

    先吧代码截图位置写上来

    这里第一部分是控制按钮

    第二部分是动画实现部分

    DLButton
        {
             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上面下载源代码,同时也指正下我存在的问题,大家共同进步

  • 相关阅读:
    线程join
    java线程 WaitAndNotify
    java线程死锁
    多线程并发的3个特性
    常用字符串搜索算法介绍
    [原创]ASP.NET网站中获取当前虚拟目录的应用程序目录的方法
    [原创]字符串多模匹配算法之AC自动机理解心得
    客户端javascript访问服务器控件的方法
    [总结]C++实现一个限制对象实例个数的类
    [原创]我的北大ACM POJ1001解答
  • 原文地址:https://www.cnblogs.com/DreamDog/p/9160030.html
Copyright © 2011-2022 走看看