酷！用Qt Quick实现Metro风格的进度条

啦啦啦，放假了就是好，随时都可以研究研究自己喜欢的东西。这次我要用Qt Quick打造一套Metro风格的UI，目前已经实现的是Metro的进度条和Metro开始菜单的3d质感按钮。

本文就介绍一下如何去实现一个Metro ProgressBar，额，这个效果相信玩过win8的童鞋应该都知道吧，我就不录屏了，太累，但是我们最终的效果还是要秀一下滴！

 

好了，废话不多说，我们一起来看看这个效果是怎么实现的吧！

先说一下核心要素：

1.     SequentialAnimation和ParallelAnimation（这个不是重点）的应用

2.     Repeater的使用（主要作用是批量生成点点。。。）

 

下面一步一步来做：

一．     准备资源

1.     画一个“点”，这个。。额，由于Qt Quick并不提供现成的“点”元素，只有一个Rectangle是有形状的（这不科学啊），所以我们手动画一个点。

2.     打开AI，新建一个画布，如图

3.     用椭圆工具画一个大大的圆形

4.     打开对齐面板，将这个椭圆以画布为参照物中心对齐即可输出，看一下费尽周折做出来的“萌点”：

二．     创建单个点的动画

我们分析一下一个点整个动画的过程：

首先缓慢进入，然后冲刺！最后缓慢离开，其实很简单。

这样我们就可以写出一个Timeline：

Time	x
0~400ms	0   ->    width / 4（也就是进入屏幕总长的1/4）
400~2400ms	width / 4   ->   3 * (width / 4)
2400~2800ms	离开

这里就要借助到Qt Quick中的SequentialAnimation了，它是一个异步动画组，也就是它的子动画将会一个接一个地去运行。下面看一下代码：

SequentialAnimation {
                id: anim
                running: true
                loops: Animation.Infinite

                PauseAnimation { duration: 150 * index }

                ParallelAnimation {
                    NumberAnimation { target: dot; property: "opacity"; from: 0; to: 1; duration: 400 }
                    NumberAnimation { target: dot; property: "x"; from: 0; to: root.width / 4.0; duration: 400 }
                }
                NumberAnimation { target: dot; property: "x"; to: (root.width / 4.0) * 3.0; duration: 2000 }
                ParallelAnimation {
                    NumberAnimation { target: dot; property: "opacity"; from: 1; to: 0; duration: 400 }
                    NumberAnimation { target: dot; property: "x"; to: root.width; duration: 400 }
                }

                PauseAnimation { duration: (repeater.count - index - 1) * 150 }
            }

这里着重讲一下PauseAnimation的作用，它主要用于点与点之间的错时，那它的时长就要依赖于这个点的index值。为了好看，我在慢速阶段用了ParallelAnimation并行动画组来附加一个透明度的变化。最后还会有一个PauseAnimation，那这个的作用又是什么呢？由于一次完整的动画执行完毕之后，下一轮动画会马上开始，那么点与点之间的错时会由于第一个PauseAnimation而越来越大。所以在最后再放一个暂停，让先完成的点等待一下后面还没走完的点，这样每轮动画就像刚开始一样井然有序。

三．     批量创建一系列点

一个点完成了，我们该让Repeater排上用场了！它可以帮我们一次性创建多个上面写好的“点”元素。

Repeater {
        id: repeater
        model: 5
        ...
}

 

好了，我们的Metro ProgressBar就完成了，是不是很简单呢？

在下一节中我将讲述如何实现Metro开始界面的按钮效果，敬请期待！（源代码在下节中一并上传）