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

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

是我的错误用法

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

先吧代码截图位置写上来

这里第一部分是控制按钮

第二部分是动画实现部分

  1. DLButton
  2. {
  3. width: 100
  4. height: 100
  5. x:parent.width-width
  6. y:0
  7. onClicked:
  8. {
  9. if(navigation.state === "state1")
  10. {
  11. navigation.state = "state2"
  12. console.log("切换至状态2")
  13. }
  14. else
  15. {
  16. navigation.state = "state1"
  17. console.log("切换至状态1")
  18. }
  19. console.log(navigation.width+" "+navigation.height)
  20.  
  21. }
  22. }

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

  1. states:
  2. [
  3. State {
  4. name: "state1"
  5. PropertyChanges {
  6. target: navigation
  7. y:parent.height
  8. }
  9. },
  10. State {
  11. name: "state2"
  12. PropertyChanges {
  13. target: navigation
  14. y:parent.height-navigation.height
  15. }
  16. }
  17. ]
  18.  
  19. transitions:
  20. [
  21. Transition {
  22. from: "*"
  23. to: "*"
  24. PropertyAnimation {
  25. properties: "y"; duration: 1000 }
  26. }
  27. ]

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

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

Qt-QML-给我的导航条写一个动画-State-Transition的更多相关文章

  1. 使用QML自绘页面导航条

    使用QML自绘页面导航条 近期使用QML制作项目,依照要求.须要制作成分页的插件.遗憾的是,QML的控件库Qt Quick都没有现成的控件,于是我尝试着自己实现自绘页面导航条. 原创文章,反对未声明的 ...

  2. Qt qml 模拟iphone slide to unlock 的聚光动画文字效果

    模拟iphone slide to unlock 的聚光动画文字效果    /底层放淡文字    /前景放高亮文字+半透明遮罩    /动画移动遮罩 Author: surfsky.cnblogs.c ...

  3. qt qml中PropertyAnimation的几种使用方法

    qml文章 qt qml中PropertyAnimation的几种使用方法 动画应用场景有以下几种: 首先如果一个Rectangle.动画是要改变它的x和y值 1,Rectangle一旦被创建,就要移 ...

  4. android开发(1):底部导航条的实现 | navigation tab | activity的创建

    底部导航条,在iOS中叫tabbar,在android中叫bottombar或bottom navigation,是一个常用的切换页面的导航条. 同样,如果有良好的第三方库,我们应该优先考虑,能用好别 ...

  5. Qt编写自定义控件71-圆弧进度条

    一.前言 现在web形式的图表框架非常流行,国产代表就是echart,本人用过几次,三个字屌爆了来形容,非常强大,而且易用性也非常棒,还是开源免费的,使用起来不要太爽,内置的各种图表和仪表盘等非常丰富 ...

  6. Qt编写自定义控件32-等待进度条控件

    一.前言 在各种各样的执行任务界面,有时候需要比较多的时间,需要给出一个直观的等待进度条表示当前正在执行的进度,而不至于懵逼在那里,用户不会觉得程序死了还是干嘛了. 等待进度条有好几种办法,比如直接叫 ...

  7. Qt编写自定义控件72-提示进度条

    一.前言 我们在很多的安装包中,在安装过程中,经常可以在底部看到一个漂亮的进度条,上面悬浮着显示对应的进度,然后底部进度多种颜色渐变展示,Qt自带的进度条或者操作系统的进度条样式,不够炫,这次索性直接 ...

  8. Qt编写自定义控件46-树状导航栏

    一.前言 树状导航栏控件是所有控件中最牛逼最经典最厉害的一个,在很多购买者中,使用频率也是最高,因为该导航控件集合了非常多的展示效果,比如左侧图标+右侧箭头+元素前面的图标设置+各种颜色设置等,全部涵 ...

  9. Qt编写自定义控件40-导航进度条

    一.前言 导航进度条控件,其实就是支付宝.京东.淘宝订单页面的进度控件,提示当前第几步,总共有几步,然后当前进度特殊颜色显示,每个进度带有时间文字等信息,本控件特意将三种样式风格都集成进去了,京东订单 ...

随机推荐

  1. form表单上传文件

    一.formData()直接获取form表单数据 例子:获取form表单的id给formData(),然后传给后台. 要求: 传入值的name值必须与后台接受的name相对应. form表单不能嵌套, ...

  2. 【绝迹篇】RSA加密算法(私钥加签公钥验签)

    对于上上篇博客中我讲的一个故事,本文引用: https://www.cnblogs.com/ButterflyEffect/p/9851403.html 故事中提到的关于加密会出现,私钥加密,公钥解密 ...

  3. [转] 各种Json解析工具比较 - json-lib/Jackson/Gson/FastJson

    JSON技术的调研报告 一 .各个JSON技术的简介和优劣1.json-libjson-lib最开始的也是应用最广泛的json解析工具,json-lib 不好的地方确实是依赖于很多第三方包,包括com ...

  4. iOS应用启动原理图解 及ARC强弱引用

    iOS应用启动原理图解(红色箭头表示strong强引用,绿色箭头代表weak若引用) 只要将UI控件拖到Storyboard里控制器的大view上,Xcode会自动将这些控件以强引用的形式加入到sel ...

  5. 【AngularJS学习笔记】开发时候的建议目录结构,基本开发步骤

    项目目录结构划分 Debug Node.JS的生成目录 Node_modules Node.Js的依赖项 Src 项目源文件 ----|framework  项目框架 --------|app --- ...

  6. write函数过程解析

    write函数作为用户向终端或者文件进行写数据的重要函数,有着重要的作用. |------|          |---------|   |---------| |----------| | wri ...

  7. asp.net mvc5 step by step(二)——Data Annotations(data 注释)

       以下使用在Entity Framework Code First Entity Framework Code First 利用一种被称为约定(Conventions)优于配置(Configura ...

  8. Jmeter的实例应用

    目标: 获取城市的天气数据: 第一步: 发送request 获取城市的城市代号http://toy1.weather.com.cn/search?cityname=上海 从这个请求的response ...

  9. 分布式缓存 Redis(二)

    代码实例 namespace RedisTest { class Program { static void Main(string[] args) { Student stu = RedisOper ...

  10. 网站用户行为分析——Linux的安装

    Linux的选择 在Linux系统各个发行版中,CentOS系统和Ubuntu系统在服务端和桌面端使用占比最高,网络上资料最是齐全,所以建议使用CentOS系统或Ubuntu. 一般来说,如果要做服务 ...