QT QML中的动画概念及实例_qt 5.9 qml 动画例子

QT QML动画中有比较多的概念，初看有点头大，我们先从三个基本概念说起：

1. 状态（state）：可视化组件的一组参数，决定可视化组件的显示方式
   每种状态的不同参数，有变化（change）来表示;
   状态是理解为一个QML对象，它是可以被继承的，形成一个新的状态；
   可以在QML指定，直接不同的状态；

2. 转换（transition): 定义从一个状态到另一个状态的变化过程，在这个过程中，可以施加动画，如果不施加动画，效果和直接指定状态的效果是一致的；

3. 动画（Animation）：QML可视化组件显示效果改变的平滑过程
   动画的运行方式：
   A：直接使用动画，动画 定义了可视化组件的某个显示参数的开始值，结束值，或仅有结束值，直接调用即可
   B: 通过转换使用动画
   C: 通过行为使用动画，将行为（behavior）定义在可视化组件的某个显示参数上（如位置X值），在行为中定义动画，只要这个参数改变，即发生动画；

4. 画家（Animator）：是另一种形式的动画，它是定义在QML的场景图中，具有更高的可靠性；

其他还有比较细节的概念，可参见课程《QT QML零基础动画教程》；有16节视频课，还有课程脑图笔记。

先来看一个例子：

import QtQuick 2.12
import QtQuick.Controls 2.12

ApplicationWindow{
    visible: true
    width: 640
    height: 480
    title: qsTr("A11 数值型动画")

    Rectangle{
        id: rect

        width: 100
        height: 100
        color: "red"

        state: "normal"

        // mode1，直接使用，注意如果running=true（缺省状态），直接执行，这里不需要有target参数

        //写法1
                NumberAnimation on x {
                    id: cmode1
                    running: false
                    from:200
                    to: 540
                    duration: 1000
                }

        // 写法2
//        PropertyAnimation on x {
//            id:cmode1
//            running: false
//            to: 540
//            duration: 1000
//        }

        // 写法3
//        PropertyAnimation {
//            id:cmode1
//            target: rect
//            running: false
//            properties: "x"
//            to: 540
//            duration: 1000
//        }

        // mode2,通过转换设置动画
        states:[
            State {
                name: "normal"
                PropertyChanges {
                    target: rect
                    x: 0
                }
            },
            State {
                name: "right"
                PropertyChanges {
                    target: rect
                    x: 540
                }
            }
        ]

        transitions: Transition {
            to: "right"
            NumberAnimation {
                target: rect
                properties: "x"
                duration: 1000
            }
        }

        // mode3, 通过Behavior使用
        Behavior on x {
            NumberAnimation {
                duration: 1000
            }
        }
    }


    Button{
        id: mode0
        text: "原始状态"
        x: 10; y: 150

        onClicked: {
            // 注意0的作用，在非转换动画中，代码不能识别可视化组件的状态
            rect.x = 0
            rect.state = "normal"
        }
    }

    Button{
        id: mode1
        y: 150

        anchors.left: mode0.right
        anchors.leftMargin: 10

        text: "直接使用动画"

        onClicked: cmode1.start()
    }

    Button{
        id:mode2
        y:150
        text: "转换中的动画"
        anchors.left: mode1.right
        anchors.leftMargin: 10

        onClicked: rect.state = "right"
    }

    Button{
        id:mode3
        y:150
        text: "行为动画"
        anchors.left: mode2.right
        anchors.leftMargin: 10

        onClicked: rect.x = 540
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

在直接使用动画中：

        //写法1
                NumberAnimation on x {
                    id: cmode1
                    running: false
                    from:200
                    to: 540
                    duration: 1000
                }

        // 写法2
//        PropertyAnimation on x {
//            id:cmode1
//            running: false
//            to: 540
//            duration: 1000
//        }

        // 写法3
//        PropertyAnimation {
//            id:cmode1
//            target: rect
//            running: false
//            properties: "x"
//            to: 540
//            duration: 1000
//        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

有三种不同的写法，前两种是动画直接定义在可视化显示属性上，注意，PropertyAnimation是NumberAnimation的父类，第三种写法，是在动画内部定义了可视化组件的属性。

需要说明的是，多个可视化组件的参数同时变化时，需要采用状态和转换的概念

看一下，状态的定义

        transitions: [
            Transition {
                from: "normal"
                to: "lightblue"
                PropertyAnimation{
                    properties: "color,width,height"
                    duration: 2000
                    easing.type: Easing.InOutQuad
                }
            }
        ]
1
2
3
4
5
6
7
8
9
10
11

整个代码

import QtQuick 2.12
import QtQuick.Controls 2.12

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("A08 属性动画，在例子A02的基础上修改")

    Rectangle{
        id:rect

        x:10;y:10
        width: 100
        height: 100

        state: "normal"

        states: [
            State {
                name: "normal"
                PropertyChanges {
                    target: rect
                    color:"red"
                }
            },
            State {
                name: "lightblue"
                // 方式一，采用数组
                //                changes: [
                //                    PropertyChanges {
                //                        target:rect
                //                        color:"lightblue"
                //                    },
                //                    PropertyChanges {
                //                        target: rect
                //                        width:200
                //                        height:50
                //                    }
                //                ]
                // 方式二，直接定义在Changes中
                PropertyChanges {
                    target: rect
                    color:"lightblue"
                    width:200
                    height:50

                }
            }
        ]

        transitions: [
            Transition {
                from: "normal"
                to: "lightblue"
                PropertyAnimation{
                    properties: "color,width,height"
                    duration: 2000
                    easing.type: Easing.InOutQuad
                }
            }
        ]
    }

    Button{
        id: b_changeState
        x: 10;y:200
        text: "变换状态"

        onClicked: rect.state = "lightblue"
    }

    Button{
        id: b_recover
        y:200
        anchors.left: b_changeState.right
        anchors.leftMargin: 10

        text: "恢复"

        onClicked: rect.state = "normal"
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

动画的开始状态

动画的结束状态

注意，宽度、高度、颜色均发生了变化，更多的例子，可参见课程《QT QML零基础动画教程》