彩票走势图

Qt Quick 开发案例(二):触摸版游戏开发之如何构造动画背景对象

转帖|使用教程|编辑:鲍佳佳|2021-01-04 14:27:51.590|阅读 229 次

概述:上文我们讲述了如何为游戏添画面以及构造背景,本文讲动画对象的构成以及相应的代码。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

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。


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP