blob: fe281057557ec4e4bba36daca099e7e87074b203 (
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
|
import Qt 4.6
Rectangle { width: 420; height: 420; id:page; color:"white"
Column { id: layout1; y:0; //width: 100; height:250;
move: Transition{ NumberAnimation {properties: "y"; easing: "easeOutBounce" }}
add: Transition{ NumberAnimation { properties: "y"; from: 500; duration:500; easing: "easeOutQuad"}}
remove: Transition { NumberAnimation { properties:"y"; to: 500; duration:500; easing: "easeInQuad"}}
Rectangle { color: "red"; width: 100; height: 50; border.color: "black"; radius: 15 }
Rectangle { id: blueV1; color: "lightsteelblue"; width: 100; height: 50; border.color: "black"; radius: 15
//opacity: Behavior{ NumberAnimation {}}
}
Rectangle { color: "green"; width: 100; height: 50; border.color: "black"; radius: 15 }
Rectangle { id: blueV2; color: "lightsteelblue"; width: 100; height: 50; border.color: "black"; radius: 15
//opacity: Behavior{ NumberAnimation {}}
}
Rectangle { color: "orange"; width: 100; height: 50; border.color: "black"; radius: 15 }
}
Row { id: layout2; y:300;
move: Transition{ NumberAnimation {properties: "x"; easing: "easeOutBounce" }}
add: Transition{ NumberAnimation { properties: "x"; from: 500; duration:500; easing: "easeOutQuad"}
NumberAnimation { properties: "opacity"; from: 0; duration: 500;}}
remove: Transition { NumberAnimation { properties: "x"; to: 500; duration:500; easing: "easeInQuad"}
NumberAnimation { properties: "opacity"; from: 1; duration: 500}}
Rectangle { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 }
Rectangle { id: blueH1; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15 }
Rectangle { color: "green"; width: 50; height: 100; border.color: "black"; radius: 15 }
Rectangle { id: blueH2; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15 }
Rectangle { color: "orange"; width: 50; height: 100; border.color: "black"; radius: 15 }
}
Button { text: "Remove"; icon: "del.png"; x: 135; y:90;
onClicked: {blueH2.opacity=0; blueH1.opacity=0; blueV1.opacity=0; blueV2.opacity=0; blueG1.opacity=0; blueG2.opacity=0; blueG3.opacity=0;}
}
Button { text: "Add"; icon: "add.png"; x: 145; y:140;
onClicked: {blueH2.opacity=1; blueH1.opacity=1; blueV1.opacity=1; blueV2.opacity=1; blueG1.opacity=1; blueG2.opacity=1; blueG3.opacity=1;}
}
Grid { x:260; y:0; columns:3
remove: Transition { NumberAnimation{ properties: "opacity"; from: 1; to: 0; duration: 500}
NumberAnimation{properties: "x,y"; easing: "easeOutBounce"} }
move: Transition { NumberAnimation{ properties: "x,y"; easing: "easeOutBounce" }}
add: Transition { NumberAnimation{ properties: "opacity"; from: 0; to: 1; duration: 500}
NumberAnimation{properties: "x,y"; easing: "easeOutBounce"} }
Rectangle { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 }
Rectangle { id: blueG1; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15 }
Rectangle { color: "green"; width: 50; height: 100; border.color: "black"; radius: 15 }
Rectangle { id: blueG2; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15 }
Rectangle { color: "orange"; width: 50; height: 100; border.color: "black"; radius: 15 }
Rectangle { id: blueG3; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15 }
Rectangle { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 }
Rectangle { color: "green"; width: 50; height: 100; border.color: "black"; radius: 15 }
Rectangle { color: "orange"; width: 50; height: 100; border.color: "black"; radius: 15 }
}
}
|
