版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。

本文链接:https://www.cnblogs.com/lihuidashen/p/11588939.html

由于编译器不可以上传视频,想要视频效果,可以访问以下链接。

https://mp.weixin.qq.com/s/gS9DYF18z966kp1m-QNnbA

软件架构

编译结果

现在开始讲一下源码

首先可以参考一下,会有一些收获的。

Qt 纯属娱乐-绘制一个模拟时钟

Qt 纯属娱乐-模拟一个导航定位系统

看到上拉下拉出现的缓慢旋转的小圈圈了吗,其实使用的一个图片,不过看着还是有动态的效果,bingo.

Rectangle

QML的Rectangle组件,顾名思义就是描绘一个矩形,一个可视化的对象。外加设置属性来达到我们想要的效果。常用的有矩形的颜色,边框颜色,圆角等设置。

Rectangle {
id: loadTip
width: parent.width
height: -root.contentY
color: Qt.lighter("green")
z: -
clip: true Text {
anchors.top: loadImage.bottom
anchors.horizontalCenter: parent.horizontalCenter
text: qsTr("loading")
font.pointSize:
color: Qt.lighter("white")
} Image {
id: loadImage
source: "qrc:/images/loading.ico"
anchors.centerIn: parent
}
}

ParallelAnimation

组合动画有两种,这个只是其中一种而已,ParallelAnimation自己并不会产生动画,而是把其它的动画放进来。另外呢,在ParallelAnimation里面的动画也都是同时执行的。当然,别的方法也能实现,但是在大部分时候ParallelAnimation的方法是比其它方式更好的。

 

SequentialAnimation

SequentialAnimation和ParallelAnimation这两个类型允许多个动画定义在一起。定义在SequentialAnimation中的动画,一个接一个运行。定义在ParallelAnimation在同一时间一起运行

PropertyAnimation

PropertyAnimation提供了一种对属性值的更改进行动画处理的方法。它可以通过多种方式用于定义动画

RotationAnimation

RotationAnimation是一种特殊的PropertyAnimation,它可以控制动画期间的旋转方向。默认情况下,它会沿数值变化的方向旋转。从0到240的旋转将顺时针旋转240度,而从240到0的旋转将逆时针旋转240度。可以设置direction属性以指定旋转发生的方向。

 

NumberAnimation

NumberAnimation是一种特殊的PropertyAnimation,它定义在数值更改时要应用的动画。

ParallelAnimation {
id: dropDownAnimation
NumberAnimation {
target: root
property: "contentY"
to: -;
duration:
} SequentialAnimation {
RotationAnimation {
target: loadImage
from:
to:
duration: loadDuration
}
NumberAnimation {
target: root
property: "contentY"
to:
duration:
}
} onStopped: {root.load(); isDropDown = false; }
}

对于上拉更新,下拉加载,删除一系列的动作,代码如下

onIsPullOnChanged: {
if(root.isPullOn)
pullOnAnimation.restart();
}
onContentYChanged: {
if( (root.height - Math.abs(contentY - contentHeight)) < 1.5
&& (root.height - Math.abs(contentY - contentHeight) ) > -1.5)
root.bottomContentY = contentY;
}
onIsDropDownChanged: {
if(isDropDown && !dropDownAnimation.running && (-contentY > 100.0))
dropDownAnimation.restart();
}
onFlickingChanged: {
if(!isDropDown && (-contentY > 100.0))
isDropDown = true; if(!isPullOn && ((height - Math.abs(contentY - contentHeight)) > 65.0)) {
isPullOn = true;
}
}

总结

qt 真是个好东西,这个还有很多功能可以增加,比如置顶某人,编辑备注,设置为未读状态,这些都是很好的锻炼自己的例子,抛砖引玉一番。

推荐阅读

(点击标题可跳转阅读)

Qt 学习笔记-强势入门

Qt 学习笔记-Qt中添加背景图片的方法

Qt 学习笔记-处理鼠标响应事件

Qt 纯属娱乐-绘制一个模拟时钟

Qt 学习笔记-中秋节,QPainter画一颗小心心送给你

Qt 纯属娱乐-模拟一个导航定位系统

Qt 做一个类似微信滑动聊天界面的demo的更多相关文章

  1. 使用plupload做一个类似qq邮箱附件上传的效果

    公司项目中使用的框架是springmvc+hibernate+spring,目前需要做一个类似qq邮箱附件上传的功能,暂时只是上传小类型的附件 处理过程和解决方案都需要添加附件,处理过程和解决方案都可 ...

  2. UnityEditorWindow做一个TimeLine的滑动块

    UnityEditorWindow做一个TimeLine的滑动块 最近在做一个基于TimeLine的动画编辑器,在制作TineLine滑动条时遇到问题,网上查了好久,试了好多GUI组件都不满意.最后在 ...

  3. 如何用 js 实现一个类似微信红包的随机算法

    如何用 js 实现一个类似微信红包的随机算法 js, 微信红包, 随机算法 "use strict"; /** * * @author xgqfrms * @license MIT ...

  4. iOS tableViewCell 在cell赋值、网络加载照片位置偏移大小错乱,做一个类似qq列表的tableview 更新3

    更新3: 问题 加载慢!(一时间给的处理负载过大,要分散)在下载图片,判断状态后 对每个cell对图片灰置图片处理保存,影响了主线程的操作 :上拉加载时,无法上下滑动tableview 无法点击cel ...

  5. 一个模仿微信群聊的H5页面

    开始 上半年小米Max发布的时候,做了一个在朋友圈传播的模仿微信的群聊界面H5页面:一群公司的大咖在群里聊小米Max,用户可以向大咖们提问,以此了解产品. 页面的主体是群聊对话,同时在对话中包含了很多 ...

  6. 小程序做一个能够左右滑动切换的多tab页面

    主要原理:使用 <swiper> 和 <scroll-view> 组件 代码片段: https://developers.weixin.qq.com/s/mLx4FWmF757 ...

  7. [js高手之路]html5 canvas动画教程 - 自己动手做一个类似windows的画图软件

    这个绘图工具,我还没有做完,不过已经实现了总架构,以及常见的简易图形绘制功能: 1,可以绘制直线,圆,矩形,正多边形[已完成] 2,填充颜色和描边颜色的选择[已完成] 3,描边和填充功能的选择[已完成 ...

  8. windows下创建做一个类似与linux 的SFTP

    在项目中经常需要做通过ftp上传文件到ftp上,如果服务器是windows版的服务器又该如何做呢,下面就给大家介绍一个软件:freeSSHd 软件地址    http://www.freesshd.c ...

  9. 做一个类似JQuery获取DOM对象的$()

    在dom操作时,有时根据id获取单个对象.有时根据className获取多个对象.平常可能我们用两个函数来实现这两个功能.不过我将它们整合了一下,目前使用情况良好,函数如下: view source ...

随机推荐

  1. Unity 自定义Inspector面板时的数据持久化问题

    自定义Inspector面板的步骤: Unity内创建自定义的Inspector需要在Asset的任意文件夹下创建一个名字是Editor的文件夹,随后这个文件夹内的cs文件就会被放在vstu生成的Ed ...

  2. 基于python的mysql复制工具

    一简介 python-mysql-replication 是由python实现的 MySQL复制协议工具,我们可以用它来解析binlog 获取日志的insert,update,delete等事件 ,并 ...

  3. NanoPi NEO2 学习笔记 1:安装系统、首次开机和一些设置

    初识NEO2 前几天搞到了一块NanoPi NEO2,A53的核心,512M内存,一个千兆网口,非常小的体积,质量也不错,非常满意,140元的价格可以买到这样一块ARM开发板也是非常划算了,非常适合低 ...

  4. python 19 包

    目录 1. 包 2. logging 日志 2.1 日志级别 2.2 配置日志格式: 2.3 logger 对象配置 1. 包 文件夹下具有__init__.py文件就是一个包 from bake.c ...

  5. ‎CocosBuilder 学习笔记(2) .ccbi 文件结构分析

    ccbi总体结构 CCBReader按字节读取.ccbi内容,每个字节8位二进制. .ccbi总体结构分为4个部分: Header 第0-3字节:ibcc .ccbi文件的标志.readHeader方 ...

  6. C#使用iTextSharp给PDF文件加水印

    给PDF添加水印,可以用iTextSharp. 步骤1:下载iTextSharp 步骤2:在项目中添加引用itextsharp.dll 步骤3:在程序中使用iTextSharp.text.pdf us ...

  7. VS2019没有.net core3.0模板的解决办法

    今天装好了,net core sdk 3.0之后,打开Visual Studio2019后,新建项目时发现尽然没有.net core3.0的模板. 搜了下其他博主的文章,按照文章里做了如下设置:   ...

  8. Linux系统简介以及基本操作(一)

    Linux简介(操作系统) Linux发展史(了解) Linux出现于1991年,是由芬兰赫尔辛基大学学生李纳斯·托瓦兹(Linus Torvalds)偶然发现的,他当时是为了方便下载学校网站的一些视 ...

  9. Dart语法学习

    Dart语法学习 目录 参考资料 语言特性 关键字 变量与常量 数据类型 运算符 operators 控制流程语句 异常 Exceptions 函数 Function 类 Class 类-方法 类-抽 ...

  10. 小米 OJ 编程比赛 02 月常规赛 3 Logic Gatekeeper CDQ分治

    link:https://code.mi.com/problem/list/view?id=139 题意: 有一个1e6 * 1e6 大的格子,现在有两种操作:1,给一个子矩阵中的每个格子加上k.2, ...