CocoDatasetDownloader/BlockLoader.qml at master · DarkShrill/CocoDatasetDownloader · GitHub

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
import QtQuick 2.7
import QtQuick.Controls 1.4
import QtQuick.Controls 2.0
import QtQuick.Controls.Material 2.0

/**
 * The design is taken from here: https://dribbble.com/shots/3250272-Animated-Loader-Principle-Freebie
 **/
Item {

    // ----- Public Properties ----- //

    property int spacing: 2
    property int horizontalBlockCount: 4
    property int verticalBlockCount: 3

    id: root

    Repeater {
        id: repeater
        model: root.horizontalBlockCount
        delegate: Component {
            Column {
                // ----- Private Properties ----- //
                property int _columnIndex: index

                id: column
                spacing: root.spacing
                x: root._getRectSize().width * index + ((index - 1) * root.spacing)

                Repeater {
                    // ----- Private Properties ----- //
                    property alias _columnIndex: column._columnIndex

                    id: blockRepeater
                    model: root.verticalBlockCount
                    delegate: Component {
                        Rectangle {
                            id: rect
                            width: root._getRectSize().width
                            height: root._getRectSize().height
                            radius: 2
                            smooth: true
                            transformOrigin: Item.BottomRight

                            SequentialAnimation {
                                id: rotationAnimation
                                loops: Animation.Infinite

                                RotationAnimation {
                                    target: rect
                                    duration: 1000
                                    from: 0
                                    to: 90
                                    easing.type: Easing.InOutQuint
                                }

                                PauseAnimation { duration: blockRepeater._columnIndex * 300 + 300 * blockRepeater._columnIndex }

                                RotationAnimation {
                                    target: rect
                                    duration: 1000
                                    from: 90
                                    to: 0
                                    easing.type: Easing.InOutQuint
                                }

                                PauseAnimation { duration: (blockRepeater.model - blockRepeater._columnIndex) * 300 + 300 * (blockRepeater.model - blockRepeater._columnIndex) }
                            }

                            function startAnimation() {
                                if (rotationAnimation.running === false) {
                                    rotationAnimation.start();
                                }
                            }

                            function stopAniamtion(){
                                if(rotationAnimation.running){
                                    rotationAnimation.stop();
                                }
                            }
                        }
                    }
                }

                // ----- Public Functions ----- //

                function startAnimation() {
                    var count = blockRepeater.model;
                    for (var index = 0; index < count; index++) {
                        blockRepeater.itemAt(index).startAnimation();
                    }
                }

                function stopAniamtion() {
                    var count = blockRepeater.model;
                    for (var index = 0; index < count; index++) {
                        blockRepeater.itemAt(index).stopAniamtion();
                    }
                }
            }
        }
    }

    Timer {
        // ----- Private Properties ----- //
        property int _blockIndex: root.horizontalBlockCount - 1
        id:animationTimer
        interval: 300
        repeat: true
        running: false
        onTriggered: {
            if (_blockIndex === -1) {
                stop();
            }
            else {
                repeater.itemAt(_blockIndex).startAnimation();
                _blockIndex--;
            }
        }
//        Component.onCompleted: start()
    }

    // ----- Private Functions ----- //

    function _getRectSize() {
        var w = root.width / root.horizontalBlockCount;
        return Qt.size(w, w);
    }

    function startAnimation(){
        animationTimer.start()
    }

}