趁着放假又拾起了很久不动的Qt了,本想在假期写点什么程序,但是到现在一点想法也没有,也就算了。今天写这个Coverflow效果纯属无聊的Play,没有太多技术含量,重要的是没用到数学和几何知识。程序用了Qt 5.2 + QtQuick 2.0架构,纯qml语言,有兴趣的童鞋可以试着完善它,我已经将源代码提交到Github上了。
好了我们切入主题:
为了写这个效果,我非常仔细的研究了Finder中的Coverflow效果,发现它是这样的:
我认为写出Finder中的那种效果应该还需要一定的数学知识,毕竟它是实时变化的,也就是画面的布局是随窗口大小而动态调整的。于是我设计了一个一屏只有三页的Coverflow效果:
还是非常的小清新嘛- -
来讲一下实现原理吧。
准备工作:
首先需要创建一个Rectangle元素,在里面放一个Text元素:
为了方便定位,我使用了anchors属性:
anchors.centerIn:parent
然后一个比较重要的属性transform我给它赋了Rotation和Translate两种变换,我们一会要用到它:
为了实现动画效果,可以看到我在变换对象中直接用了Behavior动画,这样比较方便。
状态的定义:
然后我们来看一下这个效果整体应该怎么实现。
首先一个元素拥有五种状态,分别是:在最左边(消失)、在左边、在中间、在右边、在最右边(消失)。也就是能够看到的只有三个状态。然后我们定义一下五种状态:
1. 透明度:0,角度:55,x轴变换: -180
2. 透明度:1,角度:50,x轴变换: -150
3. 透明度:1,角度:0,x轴变换:0
4. 透明度:1,角度:-50,x轴变换:150
5. 透明度:0,角度:-55,x轴变换:180
那么我们就可以定义一个元素的状态了:
注意一个细节,为了使最中间的元素在最前端,我还设置了z值,它决定了元素的排列顺序,最中间的z值为1,其他为0,这样中间的元素就不会被遮挡了。
然后我们再用Repeater组件来批量生成20个Rectangle对象,并为这个Repeater定义一个property来指示当前在中间的元素的index:
代码实现:
好了,准备工作就绪了,我们来实现初始化操作,首先响应onCompleted事件:
上面的代码为Rectangle设置了颜色,并给它们设置了各自的状态,从左边依次状态数递增1,其中有效的状态数是1~5,所以只有1~5的状态被应用到Rectangle的状态机中,其余的我们然他的状态为5,也就是先在最右面藏着。
然后我们建一个Next按钮,响应它的onClicked事件:
这样,Coverflow的雏形就完成了,而且基本没用到什么算法,就是对列表的一个简单的应用!是不是比较简单呢?