blob: 0b97e6368a0da358cb30bf1ae6181f9f6064893d (
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
|
/*!
\page tutorial3.html
\title Tutorial 3 - States
\target tutorial3
In this chapter, we make this example a little bit more dynamic by introducing states.
We want our text to jump at the bottom of the screen and become red when clicked.
\image declarative-tutorial3_animation.gif
Here is the QML code:
\code
Rect {
id: Page
width: 480
height: 200
color: "LightGrey"
Text {
id: HelloText
text: "Hello world!"
font.size: 24
font.bold: true
y: 30
anchors.horizontalCenter: Page.horizontalCenter
states: [
State {
name: "down"
when: MouseRegion.pressed == true
SetProperty {
target: HelloText
property: "y"
value: 160
}
SetProperty {
target: HelloText
property: "color"
value: "red"
}
}
]
transitions: [
Transition {
fromState: "*"
toState: "down"
reversible: true
ParallelAnimation {
NumericAnimation {
properties: "y"
duration: 500
easing: "easeOutBounce"
}
ColorAnimation { duration: 500 }
}
}
]
}
MouseRegion { id: MouseRegion; anchors.fill: HelloText }
GridLayout {
id: ColorPicker
x: 0
anchors.bottom: Page.bottom
width: 120; height: 50
rows: 2; columns: 3
Cell { color: "#ff0000" }
Cell { color: "#00ff00" }
Cell { color: "#0000ff" }
Cell { color: "#ffff00" }
Cell { color: "#00ffff" }
Cell { color: "#ff00ff" }
}
}
\endcode
\section1 Walkthrough
\code
states: [
State {
name: "down"
when: MouseRegion.pressed == true
SetProperty {
target: HelloText
property: "y"
value: 160
}
SetProperty {
target: HelloText
property: "color"
value: "red"
}
}
]
\endcode
First, we create a new state \e down for our text element. This state will be activated when MouseRegion is pressed, and deactivated when it is released.
The \e down state includes a set of property changes from our implicit \e {default state} (the items as they were initially defined in the QML). Specifically, we set the \c y property of the text to 160 and the \c color to red.
\code
Transition {
fromState: "*"
toState: "down"
reversible: true
}
\endcode
Because we don't want the text to appear at the bottom instantly but rather move smoothly, we add a transition between our two states.
\c fromState and \c toState define the states between which the transition will run. In this case, we want a transition from any state to our \e down state.
Because we want the same transition to be run in reverse when changing back from the \e down state to the default state, we set \c reversible to \c true. This is equivalent to writing the two transitions separately.
\code
ParallelAnimation {
NumericAnimation {
properties: "y"
duration: 500
easing: "easeOutBounce"
}
ColorAnimation { duration: 500 }
}
\endcode
The \c ParallelAnimation element makes sure that the two animations (color and position) will start at the same time. We could also run them one after the other by using \c SequentialAnimation instead.
For more details on states and transitions, see \l {states-transitions}{States and Transitions}.
[Previous: \l tutorial2] [\l tutorial]
*/
|
