blob: f5c6bf6216a63262ba630e98918b57e770e7a13c (
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
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
137
138
139
140
141
|
import Qt 4.7
Row {
//![property-anim-1]
Rectangle {
id: rect
width: 120; height: 200
Image {
id: img
source: "pics/qt.png"
x: 60 - img.width/2
y: 0
SequentialAnimation on y {
loops: Animation.Infinite
NumberAnimation { to: 200 - img.height; easing.type: Easing.OutBounce; duration: 2000 }
PauseAnimation { duration: 1000 }
NumberAnimation { to: 0; easing.type: Easing.OutQuad; duration: 1000 }
}
}
}
//![property-anim-1]
//![property-anim-2]
Rectangle {
width: 200; height: 200
Rectangle {
color: "red"
width: 50; height: 50
NumberAnimation on x { to: 50 }
}
}
//![property-anim-2]
Item {
//![property-anim-3]
PropertyAnimation {
id: animation
target: image
property: "scale"
from: 1; to: 0.5
}
Image {
id: image
source: "pics/qt.png"
MouseArea {
anchors.fill: parent
onPressed: animation.start()
}
}
//![property-anim-3]
}
//![transitions-1]
transitions: [
Transition {
NumberAnimation {
properties: "x,y"
easing.type: Easing.OutBounce
duration: 200
}
}
]
//![transitions-1]
//![transitions-2]
Transition {
from: "*"
to: "MyState"
reversible: true
SequentialAnimation {
NumberAnimation {
duration: 1000
easing.type: Easing.OutBounce
// animate myItem's x and y if they have changed in the state
target: myItem
properties: "x,y"
}
NumberAnimation {
duration: 1000
// animate myItem2's y to 200, regardless of what happens in the state
target: myItem2
property: "y"
to: 200
}
}
}
//![transitions-2]
//![transitions-3]
Transition {
from: "*"
to: "MyState"
reversible: true
SequentialAnimation {
ColorAnimation { duration: 1000 }
PauseAnimation { duration: 1000 }
ParallelAnimation {
NumberAnimation {
duration: 1000
easing.type: Easing.OutBounce
targets: box1
properties: "x,y"
}
NumberAnimation {
duration: 1000
targets: box2
properties: "x,y"
}
}
}
}
//![transitions-3]
//![behavior]
Rectangle {
id: redRect
color: "red"
width: 100; height: 100
Behavior on x {
NumberAnimation { duration: 300; easing.type: Easing.InOutQuad }
}
}
//![behavior]
}
|
