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