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
|
<Rect id="Page" width="300" height="300" color="white">
<!-- A target region. Clicking in here sets the state to '' - the default state -->
<Rect width="50" height="50" x="0" y="0" color="transparent" pen.color="black">
<MouseRegion anchors.fill="{parent}" onClicked="Page.state=''"/>
</Rect>
<!-- Another target region. Clicking in here sets the state to 'Position1' -->
<Rect width="50" height="50" x="150" y="50" color="transparent" pen.color="black">
<MouseRegion anchors.fill="{parent}" onClicked="Page.state='Position1'"/>
</Rect>
<!-- Another target region. Clicking in here sets the state to 'Position2' -->
<Rect width="50" height="50" x="0" y="200" color="transparent" pen.color="black">
<MouseRegion anchors.fill="{parent}" onClicked="Page.state='Position2'"/>
</Rect>
<!-- Rect which will be moved when my state changes -->
<Rect id="myrect" width="50" height="50" color="red"/>
<states>
<!-- In state 'Position1', change the 'myrect' item x, y to 150, 50. -->
<State name="Position1">
<SetProperty target="{myrect}" property="x" value="150"/>
<SetProperty target="{myrect}" property="y" value="50"/>
</State>
<!--
In state 'Position2', change y to 100. We do not specify 'x' here -
it will therefore be restored to its default value of 0, if it
had been changed.
-->
<State name="Position2">
<SetProperty target="{myrect}" property="y" value="200"/>
</State>
</states>
<!-- transitions define how the properties change. -->
<transitions>
<!--
When transitioning to 'Position1' move x,y over a duration of 1 second,
with easeOutBounce easing function.
-->
<Transition fromState="*" toState="Position1">
<NumericAnimation properties="x,y" easing="easeOutBounce" duration="1000" />
</Transition>
<!--
When transitioning to 'Position2' move x,y over a duration of 2 seconds,
with easeInOutQuad easing function.
-->
<Transition fromState="*" toState="Position2">
<NumericAnimation properties="x,y" easing="easeInOutQuad" duration="2000" />
</Transition>
<!--
For any other state changes move x,y linearly over duration of 200ms.
-->
<Transition>
<NumericAnimation properties="x,y" duration="200" />
</Transition>
</transitions>
</Rect>
|
