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 
propertyintangle:0//翻转角度 
propertyboolflipped: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和状态与动画 下篇的内容介绍完了，希望本章内容对你有所帮助，更多内容请参考编辑推荐。