Qt Quick 开发案例（二）：触摸版游戏开发之如何构造动画背景对象

用Qt编写GUI的另一种方法是使用QtQuick模块。使用QtQuick的GUI是用QML编写的。QML是一种声明性的对象描述语言，它集成了Javascript进行程序化编程。QtQuick为使用QML开发GUI提供了必要的模块。可以只用QML编写整个应用程序，但通常只有GUI是用QML编写的，应用程序的后台是用C++实现的（参见整合QML和C++）。

Qt最新试用版

上文我们讲述了如何为游戏添画面以及构造背景

动画背景对象

我们使用NumberAnimation在屏幕上以相反的方向水平移动波浪，使用SequentialAnimation与NumberAnimation上下移动波浪。

我们将Number动画应用于wave的x属性作为属性值源，将x值从当前值到-(wave.width)，经过16秒的时间进行动画。我们将循环属性设置为Animation.Infinite，以无限次重复动画。

 NumberAnimation on x { from: 0; to: -(wave.width); duration: 16000; loops: Animation.Infinite }
我们将图像的y属性作为属性值源，应用顺序动画对y值进行动画处理。我们使用一个数字动画将图像从y值下方的两个位置动画到其上方的两个位置，时间超过1600毫秒。随后我们使用另一个数字动画对图像进行相反方向的动画，时间同样为1600毫秒。该动画无限次重复。

 SequentialAnimation on y {                    loops: Animation.Infinite                    NumberAnimation { from: y - 2; to: y + 2; duration: 1600; easing.type: Easing.InOutQuad }                    NumberAnimation { from: y + 2; to: y - 2; duration: 1600; easing.type: Easing.InOutQuad }                }
我们将这种类型的缓动曲线Easing.InOutQuad用于五次（t ^ 5）函数，以将运动加速到一半，然后将其减速。
我们使用顺序动画和数字动画来制作wave2类似于的动画wave，但方向相反：
 SequentialAnimation on y {                    loops: Animation.Infinite                    NumberAnimation { from: y + 2; to: y - 2; duration: 1600; easing.type: Easing.InOutQuad }                    NumberAnimation { from: y - 2; to: y + 2; duration: 1600; easing.type: Easing.InOutQuad }                }
我们使用连续动画，旋转，顺时针方向绕原点，我们设置为阳光度光线Item.Top的transformOrigin特性。动画无限期重复：
transformOrigin: Item.Top                SequentialAnimation on rotation {                    loops: Animation.Infinite                    NumberAnimation { from: -10; to: 10; duration: 8000; easing.type: Easing.InOutSine }                    NumberAnimation { from: 10; to: -10; duration: 8000; easing.type: Easing.InOutSine }                }
我们使用一个数字动画在8秒内将图像从-10度10旋转10到-10度，然后在相同的持续时间内将图像从度旋转到度。
Easing.InOutSine对于正弦函数（sin（t）），我们使用该类型的缓动曲线将运动加速到一半，然后将其减速。
我们使用顺序动画和数字动画以相似的方式为另一张sunlight.png图像设置动画，但方向相反：
  transformOrigin:  Item.Top                SequentialAnimation on SequentialAnimation on rotation {                    {                    loops:  Animation.Infinite                    NumberAnimation { { from:  10;  to: - -10;  duration:  8000;  easing.type: type: Easing.InOutSine }                    }                    NumberAnimation { { from: - -10;  to:  10;  duration:  8000;  easing.type: type: Easing.InOutSine }}                }}
有关在和属性以及和属性上使用SequentialAnimation和NumberAnimation的示例。
Qt常用组件：

• QtitanRibbon| 下载试用: 遵循Microsoft Ribbon UI Paradigm for Qt技术的Ribbon UI组件，致力于为Windows、Linux和Mac OS X提供功能完整的Ribbon组件。
• QtitanChart | 下载试用 :是一个C ++库，代表一组控件，这些控件使您可以快速地为应用程序提供漂亮而丰富的图表。并且支持所有主要的桌面操作系统。
• QtitanDataGrid | 下载试用 :这个Qt数据 格组件使用纯C++创建，运行速度极快，处理大数据和超大数据集的效果突出。QtitanDataGrid完全集成了QtDesigner，因而极易适应其他相似的开发环境，保证100%兼容Qt GUI。

标签：