本文介绍的是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效果就是你可以拖动它，它会根据你鼠标拖动的速度不同而移动不同的距离，并且这个移动好像有惯性一样，就像你推一下平面上的玩具汽车一样。我们看一个例子。
将程序代码更改如下：
- Rectangle{
- width:200; height:200
- Image{id: picture; source:”01.jpg”}
- contentWidth:picture.width
- contentHeight:picture.height
- }
- }
这时运行程序，我们拖动整个图片，更改拖动的速度，这种感觉很爽！
我们拖动图片的角落，它会自动弹回去
对于这样一个较大的图片，我们可以使用Flickable效果来查看整张图片。其实到底是否可以移动整个图片，取决于contentWidth和contentHeight的大小。
我们如果将代码改为：contentWidth:100;contentHeight:100
那么图片就无法通过拖动显示全部内容了。
对于QML的核心内容。因为QML Flipable、Flickable和状态与动画 下篇的内容介绍完了，希望本章内容对你有所帮助，更多内容请参考编辑推荐。
时间： 2024-11-07 21:03:21