on xenial help sign in
rework animation once more, fix some bugs
commitcd57eab32c11d19c89ec3cd1d67290cc1df5eb7d authorMichael Zanetti <michael.zanetti@canonical.com> dateThu 9 Apr 2015, 12:34 (12 years ago) parenta7b4fbe
2 files changed+65−70
qml/Stages/DesktopStage.qml+5−5 qml/Stages/SpreadMaths.qml+60−65
qml/Stages/DesktopStage.qml+5−5
@@ -38,7 +38,7 @@ FocusScope {
3838 appRepeater.highlightedIndex = 1;
3939 } else {
4040 print("focusing app", appRepeater.highlightedIndex)
41− ApplicationManager.focusApplication(ApplicationManager.get(appRepeater.highlightedIndex).appId)
41+ ApplicationManager.requestFocusApplication(ApplicationManager.get(appRepeater.highlightedIndex).appId)
4242 }
4343 }
4444
@@ -46,7 +46,7 @@ FocusScope {
4646 if (root.altTabPressed) {
4747 print("should tab next")
4848 appRepeater.highlightedIndex = (appRepeater.highlightedIndex + 1) % ApplicationManager.count;
49− var newContentX = spreadFlickable.width / 5 * Math.max(0, Math.min(ApplicationManager.count - 5, appRepeater.highlightedIndex - 3));
49+ var newContentX = ((spreadFlickable.contentWidth) / (ApplicationManager.count + 1)) * Math.max(0, Math.min(ApplicationManager.count - 5, appRepeater.highlightedIndex - 3));
5050 if (spreadFlickable.contentX < newContentX || appRepeater.highlightedIndex == 0) {
5151 spreadFlickable.snapTo(newContentX)
5252 }
@@ -58,7 +58,7 @@ FocusScope {
5858 if (root.altTabPressed) {
5959 var newIndex = appRepeater.highlightedIndex - 1 >= 0 ? appRepeater.highlightedIndex - 1 : ApplicationManager.count - 1;
6060 appRepeater.highlightedIndex = newIndex;
61− var newContentX = spreadFlickable.width / 5 * Math.max(0, Math.min(ApplicationManager.count - 5, appRepeater.highlightedIndex - 1));
61+ var newContentX = ((spreadFlickable.contentWidth) / (ApplicationManager.count + 1)) * Math.max(0, Math.min(ApplicationManager.count - 5, appRepeater.highlightedIndex - 1));
6262 if (spreadFlickable.contentX > newContentX || newIndex == ApplicationManager.count -1) {
6363 spreadFlickable.snapTo(newContentX)
6464 }
@@ -157,7 +157,7 @@ FocusScope {
157157 name: "altTab"; when: root.state == "altTab"
158158 PropertyChanges {
159159 target: appDelegate
160− x: spreadMaths.animatedX
160+ x: spreadMaths.newX
161161 y: spreadMaths.animatedY
162162 angle: spreadMaths.animatedAngle
163163 itemScale: spreadMaths.scale
@@ -218,7 +218,7 @@ FocusScope {
218218
219219 onFocusChanged: {
220220 if (focus) {
221− ApplicationManager.requestFocusApplication(model.appId);
221+ ApplicationManager.focusApplication(model.appId);
222222 }
223223 }
224224
qml/Stages/SpreadMaths.qml+60−65
@@ -1,16 +1,8 @@
11import QtQuick 2.2
22import Ubuntu.Components 1.1
33import Utils 0.1
4−import Unity.Application 0.1
54
65Item {
7−
8− Label {
9− anchors {left: parent.left; top: parent.top }
10− text: "prog:" + transitionCurve.progress.toFixed(2)
11− color: leftFoldingAreaProgress > 0 || rightFoldingAreaProgress > 0 ? "red" : "black"
12− }
13−
146 id: root
157 anchors { left: parent.left; top: parent.top; margins: units.gu(1) }
168
@@ -26,81 +18,95 @@ Item {
2618 // Spread properties
2719 property real spreadHeight: units.gu(10)
2820 property int spreadBottomOffset: units.gu(5)
29− property int foldingAreaWidth: units.gu(10)
30− property int maxVisibleItems: 10
21+ property int foldingAreaWidth: units.gu(20)
22+ property int maxVisibleItems: 7
3123 property int margins: units.gu(5)
3224 property real stackScale: 0.04
3325 property int leftEndFoldedAngle: 70
3426 property int rightEndFoldedAngle: 65
3527 property int unfoldedAngle: 30
28+ property int stackWidth: units.gu(1)
3629
3730
3831 // Internal
3932 readonly property int flickableWidth: flickable ? flickable.width : 0
4033 readonly property int flickableContentWidth: flickable ? flickable.contentWidth: 0
4134 readonly property real flickableProgress: flickable ? flickable.contentX / (flickable.contentWidth - flickableWidth) : 0
42− // We require the full flickable progress going from 0 to 1 so the user can drag/overshoot tiles in both directions
43− // 0 => all the tiles are stacked up on the right edge
44− // 1 => all the tiles are stacked up on the left edge
45− // However, we also want to restrict tiles to start/end distributed across the screen, so let's adjust the
46− // progress to work on a smaller area => trim progress on left and right by progressAdjust
47− // TODO: 2.6 is a value figured by try&error. Is there a way we can calculate it?
48− readonly property real progressAdjust: (2.6 / ApplicationManager.count)
49− readonly property real adjustedProgress: (flickableProgress * (1-2*progressAdjust)) + progressAdjust
50−
5135
5236 readonly property int contentWidth: flickableWidth - root.margins * 2
5337
54− readonly property int unfoldedDistance: (contentWidth - foldingAreaWidth) / maxVisibleItems
55−
56− readonly property real progressSlice: 1 / totalItems;
57− readonly property real startProgress: (index - maxVisibleItems/2) * progressSlice
58− readonly property real endProgress: (index + maxVisibleItems/2) * progressSlice
59−
60− readonly property real startX: contentWidth - foldingAreaWidth + (startLayout.value * foldingAreaWidth)
61− readonly property real endX: margins + foldingAreaWidth - (endLayout.value * foldingAreaWidth)
62−
63− readonly property int animatedX: transitionCurve.value * (endX - startX) + startX
64−
6538 // The y offset we need to add because of scaled tiles in the stacks
6639 readonly property int yOffset: -spreadHeight * stackScale / 2
6740
41+ readonly property int distance: (flickableContentWidth - (margins * 2) - (foldingAreaWidth * 2)) / totalItems
42+ readonly property int startPos: margins + foldingAreaWidth + itemIndex * distance
43+ readonly property int linearX: startPos - flickableProgress * (flickableContentWidth - flickableWidth)
44+
45+ readonly property int leftFoldingAreaX: margins + foldingAreaWidth
46+ readonly property int rightFoldingAreaX: flickableWidth - foldingAreaWidth - margins
47+
48+ readonly property real leftFoldingAreaProgress: linearAnimation(leftFoldingAreaX, margins, 0, 1, linearX)
49+ readonly property real rightFoldingAreaProgress: linearAnimation(rightFoldingAreaX, flickableWidth - margins, 0, 1, linearX)
50+
51+ readonly property real limitedLeftProgress: Math.min(2, leftFoldingAreaProgress)
52+ readonly property real limitedRightProgress: Math.min(2, rightFoldingAreaProgress)
53+
54+ // Output
55+ readonly property int animatedX: {
56+ if (leftFoldingAreaProgress > 4) {
57+ return margins;
58+ }
59+ if (leftFoldingAreaProgress > 2) {
60+ return linearAnimation(2, 4, margins + stackWidth, margins, leftFoldingAreaProgress)
61+ }
62+ if (leftFoldingAreaProgress > 0) {
63+ return linearAnimation(0, 1, leftFoldingAreaX, margins + stackWidth, leftEasing.value)
64+ }
65+ if (rightFoldingAreaProgress > 4) {
66+ return flickableWidth - margins
67+ }
68+ if (rightFoldingAreaProgress > 2) {
69+ return linearAnimation(2, 4, flickableWidth - margins - stackWidth, flickableWidth - margins, rightFoldingAreaProgress)
70+ }
71+
72+ if (rightFoldingAreaProgress > 0) {
73+ return linearAnimation(0, 1, rightFoldingAreaX, flickableWidth - margins - stackWidth, rightEasing.value);
74+ }
75+
76+ return linearX;
77+ }
78+
6879 readonly property int animatedY: sceneHeight - itemHeight - spreadBottomOffset +
69− (leftFoldingAreaProgress > 0 ?
70− linearAnimation(0, 1, yOffset, 0, leftFoldingAreaProgress)
71− : rightFoldingAreaProgress > 0 ?
72− linearAnimation(0, 1, yOffset, 0, rightFoldingAreaProgress)
80+ (limitedLeftProgress > 0 ?
81+ linearAnimation(0, 1, yOffset, 0, leftEasing.value)
82+ : limitedRightProgress > 0 ?
83+ linearAnimation(0, 1, yOffset, 0, rightEasing.value)
7384 : yOffset)
7485
7586
76− // faw : 1 = x : p
77− property real leftFoldingAreaProgress: (foldingAreaWidth + margins - animatedX) / foldingAreaWidth
78− property real rightFoldingAreaProgress: (animatedX + margins*2 - contentWidth) / foldingAreaWidth
79−
8087
81− // x : foldingAreaWidth = leftEndFoldedAngle: unfoldedAngle
82−
83− readonly property int animatedAngle: leftFoldingAreaProgress > 0 ?
84− linearAnimation(0, 1, unfoldedAngle, leftEndFoldedAngle, leftFoldingAreaProgress)
85− : rightFoldingAreaProgress > 0 ?
86− linearAnimation(0, 1, unfoldedAngle, rightEndFoldedAngle, rightFoldingAreaProgress)
88+ readonly property int animatedAngle: limitedLeftProgress > 0 ?
89+ linearAnimation(0, 1, unfoldedAngle, leftEndFoldedAngle, leftEasing.value)
90+ : limitedRightProgress > 0 ?
91+ linearAnimation(0, 1, unfoldedAngle, rightEndFoldedAngle, rightEasing.value)
8792 : unfoldedAngle
8893
8994
90− readonly property real scale: (leftFoldingAreaProgress > 0 ?
91− linearAnimation(0, 1, spreadHeight * (1 - stackScale), spreadHeight, leftFoldingAreaProgress)
92− : rightFoldingAreaProgress > 0 ?
93− linearAnimation(0, 1, spreadHeight * (1 - stackScale), spreadHeight, rightFoldingAreaProgress)
95+ readonly property real scale: (limitedLeftProgress > 0 ?
96+ linearAnimation(0, 1, spreadHeight * (1 - stackScale), spreadHeight, leftEasing.value)
97+ : limitedRightProgress > 0 ?
98+ linearAnimation(0, 1, spreadHeight * (1 - stackScale), spreadHeight, rightEasing.value)
9499 : spreadHeight * (1 - stackScale)
95100 ) / itemHeight
96101
97102
98103 readonly property real tileInfoOpacity: leftFoldingAreaProgress > 0 ?
99− linearAnimation(0, 0.5, 1, 0, leftFoldingAreaProgress)
104+ linearAnimation(1, 2, 1, 0, leftFoldingAreaProgress)
100105 : rightFoldingAreaProgress > 0 ?
101− linearAnimation(0 ,0.5, 1, 0, rightFoldingAreaProgress)
106+ linearAnimation(1 ,2, 1, 0, rightFoldingAreaProgress)
102107 : 1
103108
109+
104110 // Helpers
105111 function linearAnimation(startProgress, endProgress, startValue, endValue, progress) {
106112 // progress : progressDiff = value : valueDiff => value = progress * valueDiff / progressDiff
@@ -108,25 +114,14 @@ Item {
108114 }
109115
110116 EasingCurve {
111− id: transitionCurve
112− type: EasingCurve.InOutSine
113−
114− readonly property real normalizedEndProgress: endProgress - startProgress
115− readonly property real normalizedProgress: (root.adjustedProgress - root.startProgress) / normalizedEndProgress
116− progress: normalizedProgress
117− }
118−
119− EasingCurve {
120− id: startLayout
117+ id: leftEasing
121118 type: EasingCurve.OutSine
122− // total : 1 = index : p
123− progress: 1.0 * index / root.totalItems
119+ progress: limitedLeftProgress / 2 // OutSine starts with twice the speed. slow it down.
124120 }
125121
126122 EasingCurve {
127− id: endLayout
123+ id: rightEasing
128124 type: EasingCurve.OutSine
129− // total : 1 = index : p
130− progress: 1 - (1.0 * index / root.totalItems)
125+ progress: limitedRightProgress / 2 // OutSine starts with twice the speed. slow it down.
131126 }
132127}