版权声明：本文为博主原创文章，遵循

 

 

编译结果

 

 

 

现在开始讲一下源码吧

 

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

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

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

 

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

 

 

Rectangle

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

复制代码
Rectangle {     id: loadTip     width: parent.width     height: -root.contentY     color: Qt.lighter("green")     z: -2     clip: true      Text {         anchors.top: loadImage.bottom         anchors.horizontalCenter: parent.horizontalCenter         text: qsTr("loading")         font.pointSize: 10         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: -100;         duration: 1     }      SequentialAnimation {         RotationAnimation {             target: loadImage             from: 0             to: 360             duration: loadDuration         }         NumberAnimation {             target: root             property: "contentY"             to: 0             duration: 100         }     }      onStopped: {root.load(); isDropDown = false; } }
复制代码

 

 

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