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

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

http://doc.qt.io/qt-5/qtquick-statesanimations-topic.html

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

PropertyAnimation（常用）

AnchorAnimation

ColorAnimation

NumberAnimation

ParentAnimation

PathAnimation

RotationAnimation

Vector3dAnimation

SequentialAnimation

ParalleAnimation

PauseAnimation

SmoothedAnimation

SpringAnimation

PropertyAction（无动画效果）

ScriptAction

Behavior（设置默认动画）

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

1、使用State和Transition

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

1. import QtQuick 2.2
2. Item {
3. id: container
4. width: 360
5. height: 360
6. Rectangle {
7. id: rect
8. width: 100
9. height: 100
10. color: "blue"
11. MouseArea {
12. anchors.fill: parent
13. // state属性值为空字符串时（''）即默认状态
14. onClicked: container.state == 'right' ? container.state = '' : container.state = 'right'
15. }
16. }
17. states: State {
18. name: "right"
19. // rect水平移动
20. PropertyChanges {
21. target: rect
22. x: 260
23. }
24. }
25. transitions: Transition {
26. // 数字（x坐标）动画，设置了easing的回弹效果和动画时间
27. NumberAnimation {
28. property: "x"
29. easing.type: Easing.InOutBounce
30. duration: 500
31. }
32. }
33. }

2、使用Behavior

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

1. import QtQuick 2.2
2. Item {
3. id: container
4. width: 360
5. height: 360
6. Rectangle {
7. id: rect
8. width: 100
9. height: 100
10. color: "blue"
11. // 看这里
12. Behavior on x {
13. NumberAnimation {
14. easing.type: Easing.InOutBounce
15. duration: 500
16. }
17. }
18. MouseArea {
19. anchors.fill: parent
20. // 改变rect的x坐标
21. onClicked: rect.x = (rect.x == 0 ? 260 : 0)
22. }
23. }
24. }

3、其它

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

1. import QtQuick 2.2
2. Item {
3. id: container
4. width: 360
5. height: 360
6. Rectangle {
7. id: rect
8. width: 100
9. height: 100
10. color: "blue"
11. // rect水平右移
12. NumberAnimation on x {
13. id: right
14. running: false // false
15. to: 260
16. easing.type: Easing.InOutBounce
17. duration: 500
18. }
19. // rect水平左移
20. NumberAnimation on x {
21. id: left
22. running: false // false
23. to: 0
24. easing.type: Easing.OutInBounce // 换个easing动画效果
25. duration: 500
26. }
27. MouseArea {
28. anchors.fill: parent
29. // 判断移动方向
30. onClicked: rect.x == 0 ? right.running = true : left.running = true
31. }
32. }
33. }

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

1. import QtQuick 2.2
2. Item {
3. id: container
4. width: 360
5. height: 360
6. Rectangle {
7. id: up
8. width: 100
9. height: 100
10. color: "blue"
11. // 并行动画，水平移动和颜色变化同时进行
12. ParallelAnimation {
13. id: parallel
14. running: false
15. PropertyAnimation {
16. target: up
17. property: "x"
18. to: 260
19. duration: 500
20. }
21. PropertyAnimation {
22. target: up
23. property: "color"
24. to: "red"
25. duration: 500
26. }
27. }
28. MouseArea {
29. anchors.fill: parent
30. onClicked: parallel.running = true
31. }
32. }
33. Rectangle {
34. id: down
35. width: 100
36. height: 100
37. color: "red"
38. anchors.top: up.bottom
39. // 串行动画，先进行水平移动，后进行颜色变化
40. SequentialAnimation {
41. id: sequential
42. running: false
43. PropertyAnimation {
44. target: down
45. property: "x"
46. to: 260
47. duration: 500
48. }
49. PropertyAnimation {
50. target: down
51. property: "color"
52. to: "blue"
53. duration: 500
54. }
55. }
56. MouseArea {
57. anchors.fill: parent
58. onClicked: sequential.running = true
59. }
60. }
61. }

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

http://doc.qt.io/qt-5/qtquick-usecase-animations.html

http://doc.qt.io/qt-5/qtquick-statesanimations-animations.html

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