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上面下载源代码,同时也指正下我存在的问题,大家共同进步
Qt-QML-给我的导航条写一个动画-State-Transition的更多相关文章
- 使用QML自绘页面导航条
使用QML自绘页面导航条 近期使用QML制作项目,依照要求.须要制作成分页的插件.遗憾的是,QML的控件库Qt Quick都没有现成的控件,于是我尝试着自己实现自绘页面导航条. 原创文章,反对未声明的 ...
- Qt qml 模拟iphone slide to unlock 的聚光动画文字效果
模拟iphone slide to unlock 的聚光动画文字效果 /底层放淡文字 /前景放高亮文字+半透明遮罩 /动画移动遮罩 Author: surfsky.cnblogs.c ...
- qt qml中PropertyAnimation的几种使用方法
qml文章 qt qml中PropertyAnimation的几种使用方法 动画应用场景有以下几种: 首先如果一个Rectangle.动画是要改变它的x和y值 1,Rectangle一旦被创建,就要移 ...
- android开发(1):底部导航条的实现 | navigation tab | activity的创建
底部导航条,在iOS中叫tabbar,在android中叫bottombar或bottom navigation,是一个常用的切换页面的导航条. 同样,如果有良好的第三方库,我们应该优先考虑,能用好别 ...
- Qt编写自定义控件71-圆弧进度条
一.前言 现在web形式的图表框架非常流行,国产代表就是echart,本人用过几次,三个字屌爆了来形容,非常强大,而且易用性也非常棒,还是开源免费的,使用起来不要太爽,内置的各种图表和仪表盘等非常丰富 ...
- Qt编写自定义控件32-等待进度条控件
一.前言 在各种各样的执行任务界面,有时候需要比较多的时间,需要给出一个直观的等待进度条表示当前正在执行的进度,而不至于懵逼在那里,用户不会觉得程序死了还是干嘛了. 等待进度条有好几种办法,比如直接叫 ...
- Qt编写自定义控件72-提示进度条
一.前言 我们在很多的安装包中,在安装过程中,经常可以在底部看到一个漂亮的进度条,上面悬浮着显示对应的进度,然后底部进度多种颜色渐变展示,Qt自带的进度条或者操作系统的进度条样式,不够炫,这次索性直接 ...
- Qt编写自定义控件46-树状导航栏
一.前言 树状导航栏控件是所有控件中最牛逼最经典最厉害的一个,在很多购买者中,使用频率也是最高,因为该导航控件集合了非常多的展示效果,比如左侧图标+右侧箭头+元素前面的图标设置+各种颜色设置等,全部涵 ...
- Qt编写自定义控件40-导航进度条
一.前言 导航进度条控件,其实就是支付宝.京东.淘宝订单页面的进度控件,提示当前第几步,总共有几步,然后当前进度特殊颜色显示,每个进度带有时间文字等信息,本控件特意将三种样式风格都集成进去了,京东订单 ...
随机推荐
- form表单上传文件
一.formData()直接获取form表单数据 例子:获取form表单的id给formData(),然后传给后台. 要求: 传入值的name值必须与后台接受的name相对应. form表单不能嵌套, ...
- 【绝迹篇】RSA加密算法(私钥加签公钥验签)
对于上上篇博客中我讲的一个故事,本文引用: https://www.cnblogs.com/ButterflyEffect/p/9851403.html 故事中提到的关于加密会出现,私钥加密,公钥解密 ...
- [转] 各种Json解析工具比较 - json-lib/Jackson/Gson/FastJson
JSON技术的调研报告 一 .各个JSON技术的简介和优劣1.json-libjson-lib最开始的也是应用最广泛的json解析工具,json-lib 不好的地方确实是依赖于很多第三方包,包括com ...
- iOS应用启动原理图解 及ARC强弱引用
iOS应用启动原理图解(红色箭头表示strong强引用,绿色箭头代表weak若引用) 只要将UI控件拖到Storyboard里控制器的大view上,Xcode会自动将这些控件以强引用的形式加入到sel ...
- 【AngularJS学习笔记】开发时候的建议目录结构,基本开发步骤
项目目录结构划分 Debug Node.JS的生成目录 Node_modules Node.Js的依赖项 Src 项目源文件 ----|framework 项目框架 --------|app --- ...
- write函数过程解析
write函数作为用户向终端或者文件进行写数据的重要函数,有着重要的作用. |------| |---------| |---------| |----------| | wri ...
- asp.net mvc5 step by step(二)——Data Annotations(data 注释)
以下使用在Entity Framework Code First Entity Framework Code First 利用一种被称为约定(Conventions)优于配置(Configura ...
- Jmeter的实例应用
目标: 获取城市的天气数据: 第一步: 发送request 获取城市的城市代号http://toy1.weather.com.cn/search?cityname=上海 从这个请求的response ...
- 分布式缓存 Redis(二)
代码实例 namespace RedisTest { class Program { static void Main(string[] args) { Student stu = RedisOper ...
- 网站用户行为分析——Linux的安装
Linux的选择 在Linux系统各个发行版中,CentOS系统和Ubuntu系统在服务端和桌面端使用占比最高,网络上资料最是齐全,所以建议使用CentOS系统或Ubuntu. 一般来说,如果要做服务 ...