Qt移动应用开发：使用动画框架

Qt移动应用开发：使用动画框架

          上一篇博客介绍了如何使用Qt的QML来对屏幕分辨率大小进行适应，事实上，不同分辨率的适应是一个非常棘手的问题，除了分辨率不同外，宽高比（aspect ratio）也不尽相同。有些平板在硬件上做得和IPad一样是Retina屏（2048×1536），有些低端的手机分辨率只有320×480，这样宽高比又不一样了，所以在设计App的过程一定要对内容布局有所规划。采用锚布局的方法可以帮我们解决一定的问题，同时也要善用Screen类的成员来获得系统分辨率的更多信息。

         这篇文章主要介绍的是QtQuick的动画框架。Qt Quick动画框架自从Qt4的时代就有了，当时也有很多的demo给我们眼前一亮。脱胎于C++的动画框架，Qt Quick的动画框架绚丽并且易用，非常值得学习。

原创文章，反对未声明的引用。原博客地址：http://blog.csdn.net/gamesdev/article/details/32730079

         首先介绍一下与动画框架相关的几个类:

Animation是这些类的基类，它具有这几个属性：

[css] view plaincopy

1. alwaysRunToEnd : bool  
2. loops : int  
3. paused : bool  
4. running : bool  

后三个属性非常好理解，第一个解释一下，如果设为true，那么无论动画是否结束，他都会让动画完成最后一轮播放。设为false，那么一旦动画结束，那么动画立即结束。

Animation有很多子类，包括AnchorAnimation、ParallelAnimation、ParentAnimation、PathAnimation、PauseAnimation、PropertyAction、PropertyAnimation、ScriptAction、和 SequentialAnimation。我们在实际应用中，一般单个动画会使用PropertyAnimation的子类ColorAnimation、NumberAnimation、RotationAnimation和Vector3dAnimation，下面是一个简单的例子：

[css] view plaincopy

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

如上面例子所示，PropertyAnimation下面的子类灵活多样，有多种语法存在形式，常常和介词on以及短语Behavior on连用。上面的例子表示介词on左边的动画类型一定要和右边的属性类型对应。如果要对一个vector3d的变量应用介词on，那么应该这么写：

[css] view plaincopy

1. Vector3dAnimation on position { from: Qt.vector3d( 0, 0, 0 ); to Qt.vector3d( 1, 1, 1 ); duration: 1000 }  

Behavior on和on的区别在于Behavioron是提供了默认的动画操作，即Behavior里面可以描述默认的动画：

[css] view plaincopy

1. Behavior on width  
2. {  
3.         NumberAnimation { duration: 1000 }  
4. }  

但可能是Qt Quick动画这一块不完善吧，有的时候在不同的平台上表现会有所不同，有时Behavior不工作，有时却又是好的（问题描述）。

当Behavior遇到了状态转换（transition）时，Behavior会被覆盖。详情请参阅Qt的相关文档。

大家看到我制作的游戏三个细菌和胶囊是一直从左往右移动的，并且是循环的，这里展示一下代码：

[css] view plaincopy

1. Image  
2. {  
3.          id:animateCapsule  
4.          height:parent.width / 10  
5.          width:height / 2  
6.          propertyint xFrom: parent.width + height * 8  
7.          propertyint xTo: -height * 2  
8.          x:xFrom  
9.          y:parent.height * 0.45  
10.          source:"../../images/capsule.png"  
11.    
12.          RotationAnimation on rotation  
13.          {  
14.                    from:0  
15.                    to:360  
16.                    loops:Animation.Infinite  
17.                    duration:2000  
18.          }  
19.    
20.          //@桌面：请注意使用这一段代码  
21.          Behavioron x  
22.          {  
23.                    NumberAnimation  
24.                    {  
25.                             from:animateCapsule.xFrom  
26.                             to:animateCapsule.xTo  
27.                             loops:Animation.Infinite  
28.                             duration:2000  
29.                    }  
30.          }  
31. }