git.iko.soy/unity8
on xenial help sign in
Add a crossfading orientation animation
eed79c6Daniel d'Andrada
qml/Components/WindowScreenshot.qmlnew file+15
compare with xenial
unifiedsplit
@@ -0,0 +1,15 @@
1+import QtQuick 2.2
2+
3+Item {
4+ id: root
5+
6+ function take() {
7+ var timeNow = new Date().getTime();
8+ image.source = "image://window/" + timeNow;
9+ }
10+
11+ Image {
12+ id: image
13+ }
14+}
15+
qml/OrientedShell.qml+83−21
@@ -17,23 +17,17 @@
17import QtQuick 2.0
17import QtQuick 2.0
18import QtQuick.Window 2.0
18import QtQuick.Window 2.0
19import Ubuntu.Components 0.1
19import Ubuntu.Components 0.1
20+import "Components"
20
21
21Item {
22Item {
22 id: orientedShell
23 id: orientedShell
23
24
24 // this is only here to select the width / height of the window if not running fullscreen
25 // this is only here to select the width / height of the window if not running fullscreen
25− property bool tablet: false
26+ //property bool tablet: false
26− width: tablet ? units.gu(160) : applicationArguments.hasGeometry() ? applicationArguments.width() : units.gu(40)
27+ //width: tablet ? units.gu(160) : applicationArguments.hasGeometry() ? applicationArguments.width() : units.gu(40)
27− height: tablet ? units.gu(100) : applicationArguments.hasGeometry() ? applicationArguments.height() : units.gu(71)
28+ //height: tablet ? units.gu(100) : applicationArguments.hasGeometry() ? applicationArguments.height() : units.gu(71)
28
29
29 property int acceptedOrientationAngle: {
30 property int acceptedOrientationAngle: {
30− // check device name and fix orientation if necessary
31− if (applicationArguments.device() === "flo") {
32− return Screen.angleBetween(Screen.primaryOrientation, Qt.InvertedLandscapeOrientation);
33− } else if (applicationArguments.device() === "manta") {
34− return Screen.angleBetween(Screen.primaryOrientation, Qt.LandscapeOrientation);
35− }
36−
37 var screenOrientation = Screen.orientation;
31 var screenOrientation = Screen.orientation;
38 var acceptedOrientation;
32 var acceptedOrientation;
39
33
@@ -90,13 +84,25 @@ Item {
90 name: "0"
84 name: "0"
91 PropertyChanges {
85 PropertyChanges {
92 target: shell
86 target: shell
93− rotation: 0
87+ transformRotationAngle: 0
94 x: 0
88 x: 0
95 y: 0
89 y: 0
96 width: orientedShell.width
90 width: orientedShell.width
97 height: orientedShell.height
91 height: orientedShell.height
98 }
92 }
99 },
93 },
94+ State {
95+ name: "90"
96+ PropertyChanges {
97+ target: shell
98+ transformRotationAngle: 90
99+ x: 0
100+ y: 0
101+ width: orientedShell.height
102+ height: orientedShell.width
103+ }
104+ },
105+ // FIXME: 180 and 270 need to be updated
100 State {
106 State {
101 name: "180"
107 name: "180"
102 PropertyChanges {
108 PropertyChanges {
@@ -118,22 +124,78 @@ Item {
118 width: orientedShell.height
124 width: orientedShell.height
119 height: orientedShell.width
125 height: orientedShell.width
120 }
126 }
127+ }
128+ ]
129+
130+
131+ property int rotationDuration: 450
132+ property int rotationEasing: Easing.InOutCubic
133+ // Those values are good for debugging/development
134+ //property int rotationDuration: 6000
135+ //property int rotationEasing: Easing.Linear
136+
137+ transitions: [
138+ Transition {
139+ from: "90"
140+ to: "0"
141+ enabled: ready
142+ SequentialAnimation {
143+ ScriptAction { script: { windowScreenshot.take(); } }
144+ PropertyAction { target: windowScreenshot; property: "visible"; value: true }
145+ PropertyAction { target: shell; property: "width"; value: orientedShell.width }
146+ PropertyAction { target: shell; property: "height"; value: orientedShell.height }
147+ PropertyAction { target: shell; property: "transformRotationAngle"; value: 90 }
148+ ParallelAnimation {
149+ NumberAnimation { target: shell; property: "opacity"; from: 0; to: 1; duration: rotationDuration; easing.type: rotationEasing }
150+ NumberAnimation { target: shell; property: "transformRotationAngle"; to: 0; duration: rotationDuration; easing.type: rotationEasing }
151+
152+ NumberAnimation { target: windowScreenshot; property: "opacity"; from: 1; to: 0; duration: rotationDuration; easing.type: rotationEasing }
153+ NumberAnimation { target: windowScreenshot; property: "transformRotationAngle"; from: 0; to: -90; duration: rotationDuration; easing.type: rotationEasing }
154+ }
155+ PropertyAction { target: windowScreenshot; property: "visible"; value: false }
156+ }
121 },
157 },
122− State {
158+ Transition {
159+ from: "0"
123− name: "90"
160+ to: "90"
124− PropertyChanges {
161+ enabled: ready
125− target: shell
162+ SequentialAnimation {
126− rotation: 90
163+ ScriptAction { script: { windowScreenshot.take(); } }
164+ PropertyAction { target: windowScreenshot; property: "visible"; value: true }
165+ PropertyAction { target: shell; property: "width"; value: orientedShell.height }
127− x: orientedShell.width
166+ PropertyAction { target: shell; property: "height"; value: orientedShell.width }
128− y: 0
167+ PropertyAction { target: shell; property: "transformRotationAngle"; value: 0 }
129− width: orientedShell.height
168+ ParallelAnimation {
130− height: orientedShell.width
169+ NumberAnimation { target: shell; property: "opacity"; from: 0; to: 1; duration: rotationDuration; easing.type: rotationEasing }
170+ NumberAnimation { target: shell; property: "transformRotationAngle"; to: 90; duration: rotationDuration; easing.type: rotationEasing }
171+
172+ NumberAnimation { target: windowScreenshot; property: "opacity"; from: 1; to: 0; duration: rotationDuration; easing.type: rotationEasing }
173+ NumberAnimation { target: windowScreenshot; property: "transformRotationAngle"; from: 0; to: 90; duration: rotationDuration; easing.type: rotationEasing }
174+ }
175+ PropertyAction { target: windowScreenshot; property: "visible"; value: false }
131 }
176 }
132 }
177 }
133 ]
178 ]
134
179
135 Shell {
180 Shell {
136 id: shell
181 id: shell
137− transformOrigin: Item.TopLeft
182+ property real transformRotationAngle: 0
183+
184+ transform: Rotation {
185+ origin.x: orientedShell.width / 2; origin.y: orientedShell.width / 2; axis { x: 0; y: 0; z: 1 }
186+ angle: shell.transformRotationAngle
187+ }
188+ }
189+
190+ WindowScreenshot {
191+ id: windowScreenshot
192+ visible: false
193+
194+ property real transformRotationAngle: 0
195+
196+ transform: Rotation {
197+ origin.x: orientedShell.width / 2; origin.y: orientedShell.width / 2; axis { x: 0; y: 0; z: 1 }
198+ angle: windowScreenshot.transformRotationAngle
199+ }
138 }
200 }
139}
201}
qml/Shell.qml+13−5
@@ -37,13 +37,21 @@ FocusScope {
37 id: shell
37 id: shell
38
38
39 property int supportedScreenOrientations: {
39 property int supportedScreenOrientations: {
40+ // check device name and fix orientation if necessary
41+ var deviceOrientations;
42+ if (applicationArguments.device() === "flo") {
43+ deviceOrientations = Qt.InvertedLandscapeOrientation;
44+ } else if (applicationArguments.device() === "manta") {
45+ deviceOrientations = Qt.LandscapeOrientation;
46+ } else if (applicationArguments.device() === "mako") {
47+ deviceOrientations = Qt.PortraitOrientation
48+ | Qt.InvertedLandscapeOrientation;
49+ }
50+
40 if (stages.shown && ApplicationManager.topmostApplication) {
51 if (stages.shown && ApplicationManager.topmostApplication) {
41− return ApplicationManager.topmostApplication.supportedOrientations;
52+ return deviceOrientations & ApplicationManager.topmostApplication.supportedOrientations;
42 } else {
53 } else {
43− return Qt.PortraitOrientation
54+ return deviceOrientations;
44− | Qt.InvertedPortraitOrientation
45− | Qt.LandscapeOrientation
46− | Qt.InvertedLandscapeOrientation;
47 }
55 }
48 }
56 }
49
57