QML Flipable、Flickable和状态与动画

QML Flipable、Flickable和状态动画是本文要介绍的内容,在接触QML的时候,在前面的例子中我们已经多次提到过状态State了,在这一节中我们再次讲解一下QML状态动画的知识,然后讲解两个特效:Flipable翻转效果和Flickable弹动效果。我们先新建一个Qt QML Application工程,命名为“myAnimation”。本文分为上下篇为大家介绍。

一、状态与动画

在QML中提供了多个实用的动画元素。其列表如下。

QML Flipable、Flickable和状态与动画 上篇

下面我们进行简单的讲解。

1.PropertyAnimation 属性动画。

列表中的NumberAnimation 数值动画,ColorAnimation颜色动画和RotationAnimation旋转动画都继承自PropertyAnimation。

例如将程序代码更改如下:

 
 
  1. import Qt 4.6  
  2. Rectangle {  
  3. width: 300;height: 200  
  4. Rectangle{  
  5. id:page; width:50; height:50  
  6. x:0; y:100; color:”red”  
  7. PropertyAnimation on x{ to:100; duration:1000 }  
  8. }  

其中的属性动画的代码可以用数值动画来代替:

 
 
  1. NumberAnimation on x{ to:100; duration:1000} 

顾名思义,数值动画,就是只能对类型为real的属性进行动画设置。例如上面对x属性,使其在1000ms即一秒的时间里由以前的 0 变为100。效果如下:

QML Flipable、Flickable和状态与动画 上篇

我们再将属性动画改为:

 
 
  1. PropertyAnimation on color{ to:”blue”; duration:1000} 

它可以用颜色动画来代替,相当于:

 
 
  1. ColorAnimation on color{ to:”blue”; duration:1000} 

颜色动画只能用于类型是 color的属性。效果如下:

QML Flipable、Flickable和状态与动画 上篇

2、缓冲曲线

我们很多时候不想让动画只是线性的变化,例如实现一些皮球落地,刹车等特殊动画效果,我们就可以在动画中使用缓冲曲线。

例如:

 
 
  1. NumberAnimation on x{ to:100; duration:1000  
  2. easing.type: “InOutElastic”} 

这里的曲线类型有很多种,我们可以查看QML PropertyAnimation Element Reference 关键字,在这个帮助文件中列出了所有的曲线类型。

QML Flipable、Flickable和状态与动画 上篇

3、状态过渡动画

我们将程序代码更改如下:

 
 
  1. Rectangle {  
  2. width: 300;height: 200  
  3. Rectangle{  
  4. id:page; width:50; height:50  
  5. x:0; y:100; color:”red”  
  6. MouseArea{id:mouseArea; anchors.fill:parent}  
  7. states: State {name: “state1″  
  8. when:mouseArea.pressed  
  9. PropertyChanges {target: page  
  10. x:100;color:”blue”  
  11. }  
  12. }  
  13. transitions: Transition {  
  14. from: “”; to: “state1″  
  15. NumberAnimation{property:”x”;duration:500}  
  16. ColorAnimation{duration:500}  
  17. }  
  18. }  

这里我们设置了一个新的状态“state1”,当鼠标在小矩形上按下时进入该状态。这种状态之间的改变我们前面已经讲过。但是我们想让两个状态之间进行变化时成为连续的,具有动画效果,那么就要使用上面的transitions状态过渡。

可以看到,在transitions中我们使用了Transition{}元素,然后从”" 到”state1″ 即从默认状态进入“state1”状态。下面我们分别使用了数值动画和颜色动画,这样当从默认状态过渡到新建状态时,就会变为连续的动画。注意:这里颜色动画元素中省去了指定颜色属性。

运行程序,效果如下:

QML Flipable、Flickable和状态与动画 上篇

4、并行动画

在上面的例子里我们看到,数值动画和颜色动画是并行执行的,其实我们也可以明确指出,让它们并行执行。那就是ParallelAnimation并行动画。上面的代码可以更改为:

 
 
  1. ParallelAnimation{  
  2. NumberAnimation{property:”x”;duration:500}  
  3. ColorAnimation{duration:500}  

5、序列动画

与上面的并行动画相对应的是序列动画SequentialAnimation,使用它我们可以使两个动画按顺序执行,也就是一个执行完了,另一个才执行。

 
 
  1. SequentialAnimation{  
  2. NumberAnimation{property:”x”;duration:500}  
  3. ColorAnimation{duration:500}  

这样当红色方块完成移动后再变为蓝色。

6、属性默认动画。

有时我们不希望设置固定的状态,而是想当一个属性改变时,它就能执行默认的动画。那么我们就可以使用Behavior{}元素。我们将程序代码更改如下:

 
 
  1. Rectangle {  
  2. width: 300;height: 200  
  3. Rectangle{  
  4. id:page; width:50; height:50; y:100; color:”red”  
  5. x:mouseArea.pressed?100:0;  
  6. MouseArea{id:mouseArea; anchors.fill:parent}  
  7. Behavior on x { NumberAnimation{ duration:500} }  
  8. }  

这里使鼠标按下时属性x为100,并设置了x的默认动画,这样只要x发生了变化,它就会执行默认的动画。

7、其他动画元素。

在开始的动画元素列表中还有其他一些动画元素没有讲到,我们会在后面的应用中使用到它们。你也可以先查看一下它们的帮助文档。


在这一节中我们再次讲解一下QML状态动画的知识,然后讲解两个特效:Flipable翻转效果和Flickable弹动效果。

二、Flipable翻转效果

在QML中提供了一种可以将图片翻转的特效Flipable,它具有强烈的3D视觉效果。

我们更改代码如下:

 
 
  1. Rectangle{  
  2.     width:300; height:250  
  3.     Flipable{  
  4.         id:flipable; width:back.width; height:back.height  
  5.         property int angle : 0  //翻转角度  
  6.         property bool flipped : false //用来标志是否翻转  
  7.         front: Image {source:”front.png”}  //指定前面的图片  
  8.         back: Image {source:”back.png”}    //指定背面的图片  
  9.         transform:Rotation{ //指定原点  
  10.             origin.x:flipable.width/2; origin.y:flipable.height/2  
  11.             axis.x:0; axis.y:1; axis.z:0 //指定按y轴旋转  
  12.             angle:flipable.angle  
  13.         }  
  14.         states:State{  
  15.             name:”back”  //背面的状态  
  16.             PropertyChanges {target:flipable; angle:180}  
  17.             when:flipable.flipped  
  18.         }  
  19.         transitions: Transition {  
  20.             NumberAnimation{property:”angle”;duration:1000}  
  21.         }  
  22.         MouseArea{  
  23.             anchors.fill:parent  
  24.             onClicked:flipable.flipped =!flipable.flipped  
  25.             //当鼠标按下时翻转  
  26.         }  
  27.     }  

运行效果如下:

QML Flipable、Flickable和状态与动画 下篇

我们可以看到,使用Flipable时,我们需要设置其前面和后面的图片,并设置背面的状态,然后设置旋转,并为状态改变设置动画就可以了。

通过改变转轴和角度,我们可以使用Flipable设计出很多其他特效。

三、Flickable弹动效果

所谓Flickable效果就是你可以拖动它,它会根据你鼠标拖动的速度不同而移动不同的距离,并且这个移动好像有惯性一样,就像你推一下平面上的玩具汽车一样。我们看一个例子。

将程序代码更改如下:

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

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

QML Flipable、Flickable和状态与动画 下篇

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

QML Flipable、Flickable和状态与动画 下篇

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

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

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

对于Flickable效果我们在下一节中还会继续接触到,到时候我们可以看一下它更强的的功能。

这一节中我们讲述了动画效果和两个特效,其实这一节的内容就是整个QML的核心内容。因为QML设计的Declarative界面主要内容就是其动画效果。我们也看到了,其实像翻转效果和弹动效果等都是为手机的触屏而设计的,所以要感受到它的真实效果,最好能在一个触屏手机上测试程序。

本文章原创于 www.yafeilinux.com




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值