QML之动画的使用（含源码+注释）_qml加载动画

一、动画效果示例图

下图演示四组动画效果分别包含数值动画（单个方块、多个方块），顺序动画，并行动画等效果

二、个人理解

1. NumberAnimation：改变控件属性值的动画效果，可针对坐标位置（x，y）、大小（width、height）、透明度等参数改变动画。
2. SequentialAnimation：顺序动画，作用域包含的多个动画从上到下依次运行动画效果。
3. ParallelAnimation：并行动画，作用域包含的多个动画同时运行。
4. 其他动画：QML还包含PropertyAnimation、RotationAnimation、ColorAnimation等动画效果，可根据实际需求使用具体效果。

三、源码

import QtQuick 2.0
import QtQuick.Controls 2.12

Item {

        Button {
            id: btnNumForSingle
            text: "属性动画(单个)"
            onClicked: {
                rect1.resetPos() // 重置方块位置
                numAnimForSingle.start() // 动画启动
            }
        }

        Button {
            id: btnNumForMuilt
            text: "属性动画(多个)"
            anchors.left: btnNumForSingle.right
            onClicked: {
                numAnimForMulti.resetPos() // 重置方块位置
                numAnimForMulti.start() // 动画启动
            }
        }

        Button {
            id: btnNumForSequen
            text: "顺序动画"
            anchors.left: btnNumForMuilt.right
            onClicked: {
                rect1.resetPos() // 重置方块位置
                sequentialAnim.start() // 动画启动
            }
        }

        Button {
            id: btnNumForParallel
            text: "并行动画"
            anchors.left: btnNumForSequen.right
            onClicked: {
                rect1.resetPos() // 重置方块位置
                parallelAnim.start() // 动画启动
            }
        }

        Rectangle {
            id: rect1
            x: 20
            y: 300
            width: 50
            height: 50
            visible: true
            color: "skyblue"
            function resetPos() {
                x = 20
                y = 300
            }
        }



        Rectangle {
            id: rect2
            x: 20
            y: 370
            width: 50
            height: 50
            visible: true
            color: "lightgreen"
            function resetPos() {
                x = 20
                y = 370
            }
        }

    // 单元素动画
    NumberAnimation {
        id: numAnimForSingle
        target: rect1
        property: "x"
        duration: 2000
        to: 500
        easing.type: Easing.InOutQuad   // 动画效果
    }

    // 多元素对象动画
    NumberAnimation {
        id: numAnimForMulti
        targets: [rect1, rect2]
        properties: "x,y"
        duration: 2000
        to:350
        function resetPos() {
            rect1.resetPos()
            rect2.resetPos()
        }
    }

    //! 多动画组合
    // 顺序动画
    SequentialAnimation {
        id:sequentialAnim
        NumberAnimation {
            target: rect1
            property: "x"
            duration: 2000
            to: 500
        }

        NumberAnimation {
            target: rect1
            property: "y"
            duration: 2000
            to: 200
        }

    }

    // 并行动画
    ParallelAnimation {
        id:parallelAnim
        NumberAnimation {
            target: rect1
            property: "x"
            duration: 2000
            to: 500
        }

        NumberAnimation {
            target: rect1
            property: "y"
            duration: 2000
            to: 200
        }
    }
}

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
129
130
131
132
133
134
135
136

总结

记录一下简易的QML动画效果使用，包含的动画效果考研根据需求使用，可能会有意想不到的收获。

友情提示——哪里看不懂可私哦，让我们一起互相进步吧
（创作不易，请留下一个免费的赞叭 谢谢 o/)

注：文章为作者编程过程中所遇到的问题和总结，内容仅供参考，若有错误欢迎指出。
注：如有侵权，请联系作者删除