on xenial help sign in
allow better control of the scaleToPreview animation
commit9768945ff47d6050b67696d2f2ca9c2f6ca5e513 authorMichael Zanetti <michael.zanetti@canonical.com> dateFri 15 Jul 2016, 18:53 (10 years ago) parent5cb13a6
7 files changed+65−38
po/unity8.pot+1−1 qml/Stages/DecoratedWindow.qml+16−13 qml/Stages/DesktopStage.qml+9−8 qml/Stages/Spread/MathUtils.js+5 qml/Stages/StagedRightEdgeMaths.qml → qml/Stages/Spread/StagedRightEdgeMaths.qml+9−3 qml/Stages/WindowDecoration.qml+2−2 tests/qmltests/Stages/tst_DecoratedWindow.qml+23−11
po/unity8.pot+1−1
@@ -8,7 +8,7 @@ msgid ""
88msgstr ""
99"Project-Id-Version: unity8\n"
1010"Report-Msgid-Bugs-To: \n"
11−"POT-Creation-Date: 2016-07-14 15:54+0200\n"
11+"POT-Creation-Date: 2016-07-14 17:51+0200\n"
1212"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
1313"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
1414"Language-Team: LANGUAGE <LL@li.org>\n"
qml/Stages/DecoratedWindow.qml+16−13
@@ -17,6 +17,7 @@
1717import QtQuick 2.4
1818import Ubuntu.Components 1.3
1919import Unity.Application 0.1
20+import "Spread/MathUtils.js" as MathUtils
2021
2122FocusScope {
2223 id: root
@@ -39,7 +40,7 @@ FocusScope {
3940
4041 property real requestedWidth
4142 property real requestedHeight
42− property bool scaleToPreview
43+ property real scaleToPreviewProgress: 0
4344 property int scaleToPreviewSize: units.gu(30)
4445
4546 property alias surfaceOrientationAngle: applicationWindow.surfaceOrientationAngle
@@ -126,27 +127,29 @@ FocusScope {
126127 focus: true
127128
128129 property real itemScale: 1
130+ property real minSize: Math.min(root.scaleToPreviewSize, Math.min(applicationWindow.requestedHeight, applicationWindow.requestedWidth))
129131 states: [
130132 State {
131− name: "preview"; when: root.scaleToPreview
133+ name: "preview"; when: root.scaleToPreviewProgress > 0
132134 PropertyChanges {
133135 target: applicationWindow;
134136 requestedWidth: applicationWindow.oldRequestedWidth
135137 requestedHeight: applicationWindow.oldRequestedHeight
136− implicitWidth: root.scaleToPreviewSize
137− implicitHeight: root.scaleToPreviewSize
138− width: Math.min(root.scaleToPreviewSize, Math.min(applicationWindow.requestedHeight, applicationWindow.requestedWidth))
139− height: Math.min(root.scaleToPreviewSize, Math.min(applicationWindow.requestedHeight, applicationWindow.requestedWidth))
140− itemScale: 1.0 * root.scaleToPreviewSize / applicationWindow.width
138+ implicitWidth: MathUtils.linearAnimation(0, 1, applicationWindow.oldRequestedWidth, root.scaleToPreviewSize, root.scaleToPreviewProgress)
139+ implicitHeight: MathUtils.linearAnimation(0, 1, applicationWindow.oldRequestedHeight, root.scaleToPreviewSize, root.scaleToPreviewProgress)
140+ width: MathUtils.linearAnimation(0, 1, applicationWindow.oldRequestedWidth, applicationWindow.minSize, root.scaleToPreviewProgress)
141+ height: MathUtils.linearAnimation(0, 1, applicationWindow.oldRequestedHeight, applicationWindow.minSize, root.scaleToPreviewProgress)
142+ // This is not 100% matching as it animates to an animated height, but close enough for the speed the animation plays
143+ itemScale: MathUtils.linearAnimation(0, 1, 1, 1.0 * root.scaleToPreviewSize / Math.min(applicationWindow.height, applicationWindow.width), root.scaleToPreviewProgress)
141144 }
142145 }
143146 ]
144− transitions: [
145− Transition {
146− from: "*"; to: "preview"
147− UbuntuNumberAnimation { properties: "width,height,itemScale,implicitWidth,implicitHeight"; duration: priv.animationDuration }
148− }
149− ]
147+// transitions: [
148+// Transition {
149+// from: "*"; to: "preview"
150+// UbuntuNumberAnimation { properties: "width,height,itemScale,implicitWidth,implicitHeight"; duration: priv.animationDuration }
151+// }
152+// ]
150153
151154 transform: [
152155 Rotation {
qml/Stages/DesktopStage.qml+9−8
@@ -718,6 +718,7 @@ AbstractStage {
718718 sceneWidth: appContainer.width - root.leftMargin
719719 sceneHeight: appContainer.height
720720 progress: 0
721+ targetHeight: spreadMaths.stackHeight
721722 targetX: spreadMaths.targetX
722723 targetAngle: spreadMaths.targetAngle
723724 }
@@ -734,7 +735,7 @@ AbstractStage {
734735 angle: spreadMaths.targetAngle
735736 itemScale: spreadMaths.scale
736737 scaleToPreviewSize: spreadItem.stackHeight
737− scaleToPreview: true
738+ scaleToPreviewProgress: 1
738739 hasDecoration: root.mode === "windowed"
739740 }
740741 PropertyChanges {
@@ -761,15 +762,16 @@ AbstractStage {
761762 y: PanelState.panelHeight
762763 x: stagedRightEdgeMaths.animatedX
763764 z: index +1
765+ height: stagedRightEdgeMaths.animatedHeight
766+ requestedWidth: decoratedWindow.oldRequestedWidth
767+ requestedHeight: decoratedWindow.oldRequestedHeight
764768 }
765769 PropertyChanges {
766770 target: decoratedWindow;
767771 hasDecoration: false
768− requestedWidth: stagedRightEdgeMaths.animatedWidth
769− requestedHeight: stagedRightEdgeMaths.animatedHeight - PanelState.panelHeight
770−// width: appContainer.width - root.leftMargin
771−// height: appContainer.height
772772 angle: stagedRightEdgeMaths.animatedAngle
773+ scaleToPreviewSize: spreadItem.stackHeight
774+ scaleToPreviewProgress: stagedRightEdgeMaths.progress
773775 }
774776 },
775777 State {
@@ -950,9 +952,8 @@ AbstractStage {
950952 to: "spread"
951953 // DecoratedWindow wants the sceleToPreviewSize set before enabling scaleToPreview
952954 PropertyAction { target: decoratedWindow; property: "scaleToPreviewSize" }
953− PropertyAction { target: decoratedWindow; property: "scaleToPreview" }
954955 UbuntuNumberAnimation { target: appDelegate; properties: "x,y,height"; duration: priv.animationDuration }
955− UbuntuNumberAnimation { target: decoratedWindow; properties: "width,height,itemScale,angle"; duration: priv.animationDuration }
956+ UbuntuNumberAnimation { target: decoratedWindow; properties: "width,height,itemScale,angle,scaleToPreviewProgress"; duration: priv.animationDuration }
956957 },
957958 Transition {
958959 from: "normal,staged"; to: "stagedWithSideStage"
@@ -1171,7 +1172,7 @@ AbstractStage {
11711172 property var gesturePoints: new Array()
11721173
11731174 property real progress: -touchPosition.x / root.width
1174− onProgressChanged: print("dda progress", progress, root.width, touchPosition.x, root.width + touchPosition.x)
1175+// onProgressChanged: print("dda progress", progress, root.width, touchPosition.x, root.width + touchPosition.x)
11751176
11761177// Rectangle { color: "blue"; anchors.fill: parent }
11771178 onTouchPositionChanged: {
qml/Stages/Spread/MathUtils.js+5
@@ -72,3 +72,8 @@ function intersectionRect(r1, r2) {
7272}
7373
7474function easeOutCubic(t) { return (--t)*t*t+1 }
75+
76+function linearAnimation(startProgress, endProgress, startValue, endValue, progress) {
77+ // progress : progressDiff = value : valueDiff => value = progress * valueDiff / progressDiff
78+ return (progress - startProgress) * (endValue - startValue) / (endProgress - startProgress) + startValue;
79+}
qml/Stages/StagedRightEdgeMaths.qml → qml/Stages/Spread/StagedRightEdgeMaths.qmlrenamed+9−3
@@ -1,5 +1,6 @@
11import QtQuick 2.4
22import Ubuntu.Components 1.3
3+import "MathUtils.js" as MathUtils
34
45QtObject {
56 id: root
@@ -11,14 +12,19 @@ QtObject {
1112 property int sceneHeight: 0
1213 property int targetX: 0
1314 property int targetAngle: 0
15+ property int targetHeight: 0
16+
17+ onProgressChanged: if (itemIndex == 0) { print("progress", progress) }
1418
1519 // Output
16− readonly property int animtedWidth: {
17− return root.sceneWidth
20+
21+ readonly property int animatedWidth: {
22+ return MathUtils.linearAnimation(0, 1, root.sceneWidth, targetHeight, progress)
1823 }
1924
2025 readonly property int animatedHeight: {
21− return root.sceneHeight
26+ print("animatedHeight:", progress < 0.5 ? root.sceneHeight : MathUtils.linearAnimation(0.5, 1, root.sceneHeight, targetHeight, progress))
27+ return progress < 0.5 ? root.sceneHeight : MathUtils.linearAnimation(0.5, 1, root.sceneHeight, targetHeight, progress)
2228 }
2329
2430 readonly property int animatedX: {
qml/Stages/WindowDecoration.qml+2−2
@@ -69,8 +69,8 @@ MouseArea {
6969 // Use integer coordinate values to ensure that target is left in a pixel-aligned
7070 // position. Mouse movement could have subpixel precision, yielding a fractional
7171 // mouse position.
72− root.target.requestedX = Math.round(pos.x - priv.distanceX);
73− root.target.requestedY = Math.round(Math.max(pos.y - priv.distanceY, PanelState.panelHeight));
72+ root.target.windowedX = Math.round(pos.x - priv.distanceX);
73+ root.target.windowedY = Math.round(Math.max(pos.y - priv.distanceY, PanelState.panelHeight));
7474 }
7575 }
7676
tests/qmltests/Stages/tst_DecoratedWindow.qml+23−11
@@ -51,12 +51,12 @@ Rectangle {
5151
5252 Loader {
5353 id: spreadDelegateLoader
54− property int requestedX: units.gu(1)
55− property int requestedY: units.gu(1)
56− property int requestedWidth: units.gu(50)
57− property int requestedHeight: units.gu(40)
58− x: requestedX
59− y: requestedY
54+ property int windowedX: units.gu(1)
55+ property int windowedY: units.gu(1)
56+ property int windowedWidth: units.gu(50)
57+ property int windowedHeight: units.gu(40)
58+ x: windowedX
59+ y: windowedY
6060 width: item ? item.implicitWidth : 0
6161 height: item ? item.implicitHeight : 0
6262
@@ -65,8 +65,8 @@ Rectangle {
6565 sourceComponent: DecoratedWindow {
6666 anchors.fill: parent
6767 application: fakeApplication
68− requestedWidth: spreadDelegateLoader.requestedWidth
69− requestedHeight: spreadDelegateLoader.requestedHeight
68+ requestedWidth: spreadDelegateLoader.windowedWidth
69+ requestedHeight: spreadDelegateLoader.windowedHeight
7070 surface: fakeApplication && fakeApplication.surfaceList.count > 0 ? fakeApplication.surfaceList.get(0) : null
7171
7272 Component.onDestruction: {
@@ -122,11 +122,23 @@ Rectangle {
122122 text: "show/hide decoration"
123123 onClicked: spreadDelegateLoader.item.showDecoration = !spreadDelegateLoader.item.showDecoration
124124 }
125− Button {
126− text: "toggle scaleToPreview"
127− onClicked: spreadDelegateLoader.item.scaleToPreview = !spreadDelegateLoader.item.scaleToPreview
125+ Label {
126+ text: "scale to preview progress"
127+ }
128+
129+ Slider {
130+ value: 0
131+ minimumValue: 0
132+ maximumValue: 1
133+ live: true
134+ onValueChanged: spreadDelegateLoader.item.scaleToPreviewProgress = value
128135 }
129136
137+// Button {
138+// text: "toggle scaleToPreview"
139+// onClicked: spreadDelegateLoader.item.scaleToPreviewProgress == !spreadDelegateLoader.item.scaleToPreview
140+// }
141+
130142 Row {
131143 anchors { left: parent.left; right: parent.right }
132144 CheckBox { id: closeableCheckbox; checked: false }