Qt移动应用开发(二):使用动画框架

Qt移动应用开发(二):使用动画框架css

 

         上一篇博客介绍了怎样使用Qt的QML来对屏幕分辨率大小进行适应,其实,不一样分辨率的适应是一个很棘手的问题,除了分辨率不一样外,宽高比(aspect ratio)也不尽一样。html

有些平板在硬件上作得和IPad同样是Retina屏(2048×1536),有些低端的手机分辨率仅仅有320×480。这样宽高比又不同了。因此在设计App的过程必定要对内容布局有所规划。採用锚布局的方法可以帮咱们解决必定的问题,同一时候也要善用Screen类的成员来得到系统分辨率的不少其它信息。框架

         这篇文章主要介绍的是QtQuick的动画框架。oop

Qt Quick动画框架自从Qt4的时代就有了,当时也有很是多的demo给咱们眼前一亮。布局

脱胎于C++的动画框架。Qt Quick的动画框架绚丽并且易用。很是值得学习。post

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

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

Animation是这些类的基类。它具备这几个属性:ui

alwaysRunToEnd : bool
loops : int
paused : bool
running : bool

后三个属性很好理解。第一个解释一下,假设设为true,那么无论动画是否结束,他都会让动画完毕最后一轮播放。设为false,那么一旦动画结束。那么动画立刻结束。spa

Animation有很是多子类。包含AnchorAnimation、ParallelAnimation、ParentAnimation、PathAnimation、PauseAnimation、PropertyAction、PropertyAnimation、ScriptAction、和 SequentialAnimation。咱们在实际应用中。通常单个动画会使用PropertyAnimation的子类ColorAnimation、NumberAnimation、RotationAnimation和Vector3dAnimation,如下是一个简单的样例:

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

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

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

Behavior on和on的差异在于Behavioron是提供了默认的动画操做。即Behavior里面可以描写叙述默认的动画:

Behavior on width
{
        NumberAnimation { duration: 1000 }
}

但多是Qt Quick动画这一块不无缺吧,有的时候在不一样的平台上表现会有所不一样,有时Behavior不工做。有时却又是好的(问题描写叙述)。

当Behavior遇到了状态转换(transition)时,Behavior会被覆盖。详情请參阅Qt的相关文档。

你们看到我制做的游戏三个细菌和胶囊是一直从左往右移动的,并且是循环的,这里展现一下代码:

Image
{
         id:animateCapsule
         height:parent.width / 10
         width:height / 2
         propertyint xFrom: parent.width + height * 8
         propertyint xTo: -height * 2
         x:xFrom
         y:parent.height * 0.45
         source:"../../images/capsule.png"
 
         RotationAnimation on rotation
         {
                   from:0
                   to:360
                   loops:Animation.Infinite
                   duration:2000
         }
 
         //@桌面:请注意使用这一段代码
         Behavioron x
         {
                   NumberAnimation
                   {
                            from:animateCapsule.xFrom
                            to:animateCapsule.xTo
                            loops:Animation.Infinite
                            duration:2000
                   }
         }
}

本文參加了CSDN博文大赛。请你们支持我,为我投一票!

相关文章
相关标签/搜索