QML动画概述（几十篇相关博客）

QML提供了丰富的动画元素，说起动画，无非是给UI增光添彩罢了。在QML中，动画常常与State和Transition联系在一起，这几个概念（下面的例子中都用到了）都比较简单，相关介绍可查看Qt官方文档，网址如下：

下面先列举几个QML动画元素，动画效果可“忘文生意”：

PropertyAnimation（常用）

AnchorAnimation

ColorAnimation

NumberAnimation

ParentAnimation

PathAnimation

RotationAnimation

Vector3dAnimation

SequentialAnimation

ParalleAnimation

PauseAnimation

SmoothedAnimation

SpringAnimation

PropertyAction（无动画效果）

ScriptAction

Behavior（设置默认动画）

常见的QML动画有三种表示方式，下面一一说明。

1、使用State和Transition

State改变属性值，Transition实现动画，例子如下：

import QtQuick 2.2
Item {
id: container
width: 360
height: 360
Rectangle {
id: rect
width: 100
height: 100
color: "blue"
MouseArea {
anchors.fill: parent
// state属性值为空字符串时（''）即默认状态
onClicked: container.state == 'right' ? container.state = '' : container.state = 'right'
}
}
states: State {
name: "right"
// rect水平移动
PropertyChanges {
target: rect
x: 260
}
}
transitions: Transition {
// 数字（x坐标）动画，设置了easing的回弹效果和动画时间
NumberAnimation {
property: "x"
easing.type: Easing.InOutBounce
duration: 500
}
}
}

2、使用Behavior

直接修改上面的例子，实现同样的动画效果，结果如下：

3、其它

还是在上面例子的基础上修改以实现同样的效果，代码如下：

下面再来看一个有意思的例子，parallel和sequential动画：

关于QML动画，Qt官网文档也做了详细的介绍：

http://blog.csdn.net/ieearth/article/details/43986559

巴特西