QML Flipable、Flickable和状态与动画 下篇是本节要介绍的内容，QML Flipable、Flickable和状态与动画 上篇，在这一节中我们再次讲解一下QML中状态和动画的知识，然后讲解两个特效：Flipable翻转效果和Flickable弹动效果。
二、Flipable翻转效果
在QML中提供了一种可以将图片翻转的特效Flipable，它具有强烈的3D视觉效果。
我们更改代码如下：
- Rectangle{
- width:300; height:250
- Flipable{
- id:flipable; width:back.width; height:back.height
- property int angle : 0 //翻转角度
- property bool flipped : false //用来标志是否翻转
- front: Image {source:”front.png”} //指定前面的图片
- back: Image {source:”back.png”} //指定背面的图片
- transform:Rotation{ //指定原点
- origin.x:flipable.width/2; origin.y:flipable.height/2
- axis.x:0; axis.y:1; axis.z:0 //指定按y轴旋转
- angle:flipable.angle
- }
- states:State{
- name:”back” //背面的状态
- PropertyChanges {target:flipable; angle:180}
- when:flipable.flipped
- }
- transitions: Transition {
- NumberAnimation{property:”angle”;duration:1000}
- }
- MouseArea{
- anchors.fill:parent
- onClicked:flipable.flipped =!flipable.flipped
- //当鼠标按下时翻转
- }
- }
- }
运行效果如下：
我们可以看到，使用Flipable时，我们需要设置其前面和后面的图片，并设置背面的状态，然后设置旋转，并为状态改变设置动画就可以了。
通过改变转轴和角度，我们可以使用Flipable设计出很多其他特效。
三、Flickable弹动效果
所谓Flickable效果就是你可以拖动它，它会根据你鼠标拖动的速度不同而移动不同的距离，并且这个移动好像有惯性一样，就像你推一下平面上的玩具汽车一样。我们看一个例子。
将程序代码更改如下：
- Rectangle{
- width:200; height:200
- Flickable{
- width:200;height:200
- Image{id: picture; source:”01.jpg”}
- contentWidth:picture.width
- contentHeight:picture.height
- }
- }
这时运行程序，我们拖动整个图片，更改拖动的速度，这种感觉很爽！
我们拖动图片的角落，它会自动弹回去
对于这样一个较大的图片，我们可以使用Flickable效果来查看整张图片。其实到底是否可以移动整个图片，取决于contentWidth和contentHeight的大小。
我们如果将代码改为：contentWidth:100;contentHeight:100
那么图片就无法通过拖动显示全部内容了。
对于Flickable效果我们在下一节中还会继续接触到，到时候我们可以看一下它更强的的功能。
这一节中我们讲述了动画效果和两个特效，其实这一节的内容就是整个QML的核心内容。因为QML设计的Declarative界面主要内容就是其动画效果。我们也看到了，其实像翻转效果和弹动效果等都是为手机的触屏而设计的，所以要感受到它的真实效果，***能在一个触屏手机上测试程序。
本文章原创于 www.yafeilinux.com
小结：QML Flipable、Flickable和状态与动画 下篇的内容介绍完了，希望本章内容对你有所帮助，更多内容请参考编辑推荐。
