Qt/QML学习-动画元素

QML学习

• 动画元素例程
• 视频讲解
• 代码

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        id: rect
        width: 50
        height: 50
        color: "red"
    }

    SequentialAnimation {
        running: true
        ParallelAnimation {
            ColorAnimation {
                target: rect
                property: "color"
                from: "red"
                to: "blue"
                duration: 500
            }

            NumberAnimation {
                target: rect
                property: "x"
                from: 0
                to: 200
                duration: 500
            }
        }

        PropertyAction {
            target: rect
            property: "x"
            value: 0
        }

        PauseAnimation {
            duration: 500
        }

        ScriptAction {
            script: myScript()
        }

        PropertyAnimation {
            target: rect
            property: "width"
            from: 50
            to: 200
            duration: 500
        }
    }

    Text {
        id: text
        anchors.top: rect.bottom
        font.pointSize: 30
        text: "点赞+关注"
    }

    function myScript() {
        text.text = "执行ScriptAction"
    }
}
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

演示

• 视频讲解