summaryrefslogtreecommitdiffstats
path: root/examples/declarative/animation/animation.qml
blob: 5cb471e24baa35b78bfc571d20fc0a07d0bc1e8d (plain)
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
Rect {
    width: 400
    height: 200
    color: "white"
    Rect {
        width: 40
        height: 40
        y: 80
        color: "#FF0000"
        radius: 10
        // Animate the x property.  Setting repeat to true makes the
        // animation repeat indefinitely, otherwise it would only run once.
        x: SequentialAnimation {
            running: true
            repeat: true
            // Move from 0 to 360 in 500ms, using the easeInOutQuad easing function
            NumericAnimation {
                from: 0
                to: 360
                easing: "easeInOutQuad"
                duration: 500
            }
            // Then pause for 200ms
            PauseAnimation {
                duration: 200
            }
            // Then move back to 0 in 2 seconds, using the easeInOutElastic easing function
            NumericAnimation {
                from: 360
                to: 0
                easing: "easeInOutElastic"
                duration: 2000
            }
        }
        // Alternate color between red and green
        color: SequentialAnimation {
            running: true
            repeat: true
            ColorAnimation {
                from: "#FF0000"
                to: "#00FF00"
                duration: 5000
            }
            ColorAnimation {
                from: "#00FF00"
                to: "#FF0000"
                duration: 5000
            }
        }
    }
}