QML FlipableFlickable和状态与动画 下篇

Posted 2020-07-26 maxiongying

本文介绍的是Flickable和状态与动画，我们以前接触过QML相关的内容，那么本文介绍的内容就很明了了。先来看内容。

AD：

Flickable和状态与动画 下篇是本节要介绍的内容，Flickable和状态与动画 上篇，在这一节中我们再次讲解一下Flickable弹动效果。

二、Flipable翻转效果

在    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效果就是你可以拖动它，它会根据你鼠标拖动的速度不同而移动不同的距离，并且这个移动好像有惯性一样，就像你推一下平面上的玩具汽车一样。我们看一个例子。

将程序代码更改如下：

1. Rectangle{  
2. width:200; height:200  
3. Image{id: picture; source:”01.jpg”}  
4. contentWidth:picture.width  
5. contentHeight:picture.height  
6. }  
7. } 

这时运行程序，我们拖动整个图片，更改拖动的速度，这种感觉很爽！

我们拖动图片的角落，它会自动弹回去

对于这样一个较大的图片，我们可以使用Flickable效果来查看整张图片。其实到底是否可以移动整个图片，取决于contentWidth和contentHeight的大小。

我们如果将代码改为：contentWidth:100;contentHeight:100

那么图片就无法通过拖动显示全部内容了。

对于QML的核心内容。因为QML Flipable、Flickable和状态与动画 下篇的内容介绍完了，希望本章内容对你有所帮助，更多内容请参考编辑推荐。