on xenial help sign in
convert it to not flip the first two covers
7ffaa00Michael Zanetti
qml/Stages/PhoneStage.qml+9−8
@@ -245,25 +245,26 @@ Item {
245 property real positionMarker3: 0.7
245 property real positionMarker3: 0.7
246 property real positionMarker4: 1.25
246 property real positionMarker4: 1.25
247
247
248+ // This is where the first app snaps to when bringing it in to the right.
249+ property real snapPosition: 0.75
250+
248 // Stage of the animation:
251 // Stage of the animation:
249 // 0: Starting from right edge, a new app (index 1) comes in from the right
252 // 0: Starting from right edge, a new app (index 1) comes in from the right
250− // 1: The app has reached fullscreen. The list is reordered and shifted to the right in order to have the new app the leftmost one
253+ // 1: The app has reached the first snap position
251 // 2: The list is dragged further and snaps into the spread view when entering stage 2
254 // 2: The list is dragged further and snaps into the spread view when entering stage 2
252 property int stage: 0
255 property int stage: 0
253
256
257+ onStageChanged: print("*******stage cahnged", stage)
258+
254 onContentXChanged: {
259 onContentXChanged: {
255 switch (stage) {
260 switch (stage) {
256 case 0:
261 case 0:
257 if (contentX > width * positionMarker2) {
262 if (contentX > width * positionMarker2) {
258− print("switching to app 1 .")
259 stage = 1;
263 stage = 1;
260− ApplicationManager.focusApplication(ApplicationManager.get(1).appId)
261 }
264 }
262 break;
265 break;
263 case 1:
266 case 1:
264 if (contentX < width * positionMarker2) {
267 if (contentX < width * positionMarker2) {
265− print("switching to app 1 -")
266− ApplicationManager.focusApplication(ApplicationManager.get(1).appId)
267 stage = 0;
268 stage = 0;
268 } else if (contentX >= width * positionMarker4) {
269 } else if (contentX >= width * positionMarker4) {
269 stage = 2;
270 stage = 2;
@@ -324,8 +325,6 @@ Item {
324 id: spreadRow
325 id: spreadRow
325 width: implicitWidth + (spreadView.width * spreadView.positionMarker2) + (spreadView.width - spreadView.tileDistance)
326 width: implicitWidth + (spreadView.width * spreadView.positionMarker2) + (spreadView.width - spreadView.tileDistance)
326
327
327− x: spreadView.stage == 0 ? 0 : spreadView.width * spreadView.positionMarker2
328−
329 Repeater {
328 Repeater {
330 model: ApplicationManager
329 model: ApplicationManager
331 delegate: TransformedSpreadDelegate {
330 delegate: TransformedSpreadDelegate {
@@ -372,10 +371,12 @@ Item {
372 }
371 }
373
372
374 animatedProgress: {
373 animatedProgress: {
375− if (spreadView.stage < 2 && index == 1) {
374+ if (spreadView.stage < 2 && index < 2) {
376 if (spreadView.contentX < spreadView.width * spreadView.positionMarker1) {
375 if (spreadView.contentX < spreadView.width * spreadView.positionMarker1) {
376+ if (index == 0) print("*********************", spreadView.contentX / spreadView.width)
377 return spreadView.contentX / spreadView.width
377 return spreadView.contentX / spreadView.width
378 } else if (spreadView.stage == 0){
378 } else if (spreadView.stage == 0){
379+ if (index == 0) print("!!!!!!!!!!!!!!!11!", spreadView.positionMarker2)
379 return spreadView.positionMarker2
380 return spreadView.positionMarker2
380 }
381 }
381 }
382 }
qml/Stages/TransformedSpreadDelegate.qml+93−15
@@ -55,7 +55,7 @@ SpreadDelegate {
55 var compensation = root.progress * spreadView.width
55 var compensation = root.progress * spreadView.width
56
56
57 // Calculating the small movement of the first tile
57 // Calculating the small movement of the first tile
58− var progress = root.progress
58+ var progress = root.animatedProgress
59 var progressDiff = spreadView.positionMarker2
59 var progressDiff = spreadView.positionMarker2
60 var translateDiff = -spreadView.width * 0.25
60 var translateDiff = -spreadView.width * 0.25
61 // progress : progressDiff = translate : translateDiff
61 // progress : progressDiff = translate : translateDiff
@@ -65,12 +65,22 @@ SpreadDelegate {
65 } else if (spreadView.stage == 1){
65 } else if (spreadView.stage == 1){
66 // Need to compensate the flickable movement (fixing first tile at the left edge)
66 // Need to compensate the flickable movement (fixing first tile at the left edge)
67 var compensation = spreadView.contentX - spreadRow.x
67 var compensation = spreadView.contentX - spreadRow.x
68+
69+ // When we start, we need to continue from where state 0 left
70+ var stage0Movement = -spreadView.width * 0.25
71+
72+ var progress = root.progress - spreadView.positionMarker2
73+ var progressDiff = spreadView.positionMarker4 - spreadView.positionMarker2
74+ var translateDiff = -stage0Movement;
75+
76+ var movement = progress * translateDiff / progressDiff
77+
68− translation = compensation;
78+ translation = compensation + stage0Movement + movement;
69 } else { // Stage 2
79 } else { // Stage 2
70 // Move the first tile a bit to the left to be aligned with the others
80 // Move the first tile a bit to the left to be aligned with the others
71 translation += spreadView.contentX - spreadRow.x + spreadView.width
81 translation += spreadView.contentX - spreadRow.x + spreadView.width
72 // apply the same animation as with the rest
82 // apply the same animation as with the rest
73− translation += -xTranslateEasing.value * spreadView.width
83+ translation += -easingCurve.value * spreadView.width
74 }
84 }
75 break;
85 break;
76 case 1:
86 case 1:
@@ -81,18 +91,39 @@ SpreadDelegate {
81 // Calculate movemoent for the first app coming from the right
91 // Calculate movemoent for the first app coming from the right
82 var progress = root.animatedProgress
92 var progress = root.animatedProgress
83 var progressDiff = spreadView.positionMarker2
93 var progressDiff = spreadView.positionMarker2
84− var translateDiff = -spreadView.width
94+ var translateDiff = -spreadView.width * spreadView.snapPosition
85 // progress : progressDiff = translate : translateDiff
95 // progress : progressDiff = translate : translateDiff
86 var movement = progress * translateDiff / progressDiff
96 var movement = progress * translateDiff / progressDiff
87
97
88 translation = compensation + movement;
98 translation = compensation + movement;
89 break;
99 break;
100+ } else if (spreadView.stage == 1) {
101+ // Need to compensate the flickable movement (fix it to the right edge)
102+ var compensation = root.progress * spreadView.width + spreadView.width/2
103+
104+ // Add where stage 0 has moved it to
105+ var stage0Movement = -spreadView.width * spreadView.snapPosition;
106+
107+ // Calclulate animation between stage0Movement and targetTranslate
108+ var progress = root.progress
109+ var progressDiff = spreadView.positionMarker4 - spreadView.positionMarker2
110+
111+ // find where the main easing would be when reaching positionMarker4
112+ helperEasingCurve.progress = progressDiff;
113+ var targetTranslate = -helperEasingCurve.value * spreadView.width + root.endDistance
114+
115+ var translateDiff = targetTranslate - stage0Movement;
116+ var movement = progress * translateDiff / progressDiff
117+
118+ translation = compensation + stage0Movement + movement;
119+ break;
90 }
120 }
121+
91 default:
122 default:
92 // Fix it at the right edge...
123 // Fix it at the right edge...
93 translation += spreadView.contentX - spreadRow.x - ((index - 1) * root.startDistance)
124 translation += spreadView.contentX - spreadRow.x - ((index - 1) * root.startDistance)
94 // ...and use our easing to move them to the left. Stop a bit earlier for each tile
125 // ...and use our easing to move them to the left. Stop a bit earlier for each tile
95− translation += -xTranslateEasing.value * spreadView.width + (index * root.endDistance)
126+ translation += -easingCurve.value * spreadView.width + (index * root.endDistance)
96 if (isSelected) {
127 if (isSelected) {
97 var progressDiff = negativeProgress + selectedProgress
128 var progressDiff = negativeProgress + selectedProgress
98 var progress = progressDiff - (root.progress + negativeProgress);
129 var progress = progressDiff - (root.progress + negativeProgress);
@@ -117,17 +148,20 @@ SpreadDelegate {
117 switch (index) {
148 switch (index) {
118 case 0:
149 case 0:
119 if (spreadView.stage == 0) {
150 if (spreadView.stage == 0) {
120− var progress = root.progress;
151+ var progress = root.animatedProgress;
121 var progressDiff = spreadView.positionMarker2;
152 var progressDiff = spreadView.positionMarker2;
122− var angleDiff = root.endAngle;
153+ var angleDiff = root.endAngle * spreadView.snapPosition;
123 // progress : progressDiff = angle : angleDiff
154 // progress : progressDiff = angle : angleDiff
124 newAngle = progress * angleDiff / progressDiff;
155 newAngle = progress * angleDiff / progressDiff;
125 break;
156 break;
126− } else if (spreadView.stage == 1){
157+ } else if (spreadView.stage == 1) {
158+ var stage0Angle = root.endAngle * spreadView.snapPosition;
159+
127 var progress = root.progress - spreadView.positionMarker2;
160 var progress = root.progress - spreadView.positionMarker2;
128 var angleDiff = root.endAngle;
161 var angleDiff = root.endAngle;
129 var progressDiff = 1 - spreadView.positionMarker2;
162 var progressDiff = 1 - spreadView.positionMarker2;
130− newAngle = progress * angleDiff / progressDiff;
163+ var angleTransform = progress * angleDiff / progressDiff;
164+ newAngle = stage0Angle + angleTransform;
131 newAngle = Math.min(root.endAngle, newAngle);
165 newAngle = Math.min(root.endAngle, newAngle);
132 break;
166 break;
133 }
167 }
@@ -135,16 +169,28 @@ SpreadDelegate {
135 if (spreadView.stage == 0) {
169 if (spreadView.stage == 0) {
136 var progress = root.animatedProgress;
170 var progress = root.animatedProgress;
137 var progressDiff = spreadView.positionMarker2;
171 var progressDiff = spreadView.positionMarker2;
138− var angleDiff = root.startAngle
172+ var angleDiff = root.startAngle * spreadView.snapPosition
139
173
140 // progress : progressDiff = angle : angleDiff
174 // progress : progressDiff = angle : angleDiff
141 var angleTranslate = progress * angleDiff / progressDiff;
175 var angleTranslate = progress * angleDiff / progressDiff;
142
176
143 newAngle = root.startAngle - angleTranslate;
177 newAngle = root.startAngle - angleTranslate;
144 break;
178 break;
179+ } else if (spreadView.stage == 1) {
180+ var stage0Angle = root.startAngle - (root.startAngle * spreadView.snapPosition)
181+
182+ var progress = root.progress
183+ var progressDiff = spreadView.positionMarker4 - spreadView.positionMarker2
184+ var angleDiff = root.endAngle - stage0Angle;
185+
186+ // progress : progressDiff = angle : angleDiff
187+ var angleTranslate = progress * angleDiff / progressDiff;
188+ newAngle = stage0Angle + angleTranslate;
189+ break;
145 }
190 }
191+
146 default:
192 default:
147− newAngle = root.startAngle - xTranslateEasing.value * (root.startAngle - root.endAngle)
193+ newAngle = root.startAngle - easingCurve.value * (root.startAngle - root.endAngle)
148 if (isSelected) {
194 if (isSelected) {
149 var progressDiff = negativeProgress + selectedProgress
195 var progressDiff = negativeProgress + selectedProgress
150 var progress = progressDiff - (root.progress + negativeProgress);
196 var progress = progressDiff - (root.progress + negativeProgress);
@@ -164,11 +210,18 @@ SpreadDelegate {
164 case 0:
210 case 0:
165 if (spreadView.stage == 0) {
211 if (spreadView.stage == 0) {
166 newScale = 1;
212 newScale = 1;
213+ } else if(spreadView.stage == 1) {
214+ var progress = root.progress - spreadView.positionMarker2
215+ var progressDiff = spreadView.positionMarker4 - spreadView.positionMarker2
216+ var scaleDiff = 1 - root.endScale;
217+ // progress : progressDiff = angle : angleDiff
218+ newScale = 1 - (progress * scaleDiff / progressDiff);
219+
167 } else {
220 } else {
168 var progress = root.progress - spreadView.positionMarker2;
221 var progress = root.progress - spreadView.positionMarker2;
169 var scaleDiff = 1 - root.endScale;
222 var scaleDiff = 1 - root.endScale;
170 var progressDiff = 1 - spreadView.positionMarker2;
223 var progressDiff = 1 - spreadView.positionMarker2;
171−// // progress : progressDiff = angle : angleDiff
224+ // progress : progressDiff = angle : angleDiff
172 newScale = 1 - (progress * scaleDiff / progressDiff);
225 newScale = 1 - (progress * scaleDiff / progressDiff);
173 newScale = Math.max(root.endScale, newScale);
226 newScale = Math.max(root.endScale, newScale);
174 }
227 }
@@ -178,16 +231,33 @@ SpreadDelegate {
178 if (spreadView.stage == 0) {
231 if (spreadView.stage == 0) {
179 var progress = root.animatedProgress;
232 var progress = root.animatedProgress;
180 var progressDiff = spreadView.positionMarker2;
233 var progressDiff = spreadView.positionMarker2;
181− var scaleDiff = root.startScale - 1
234+ var scaleDiff = (root.startScale - 1) * spreadView.snapPosition
182
235
183 // progress : progressDiff = angle : angleDiff
236 // progress : progressDiff = angle : angleDiff
184 var scaleTranslate = progress * scaleDiff / progressDiff;
237 var scaleTranslate = progress * scaleDiff / progressDiff;
185
238
186 newScale = root.startScale - scaleTranslate;
239 newScale = root.startScale - scaleTranslate;
187 break;
240 break;
241+ } else if (spreadView.stage == 1) {
242+ var stage0Scale = root.startScale - (root.startScale - 1) * spreadView.snapPosition
243+
244+ var progress = root.progress
245+ var progressDiff = spreadView.positionMarker4 - spreadView.positionMarker2
246+
247+ // find where the main easing would be when reaching positionMarker4
248+ helperEasingCurve.progress = progressDiff;
249+ var targetScale = root.startScale - helperEasingCurve.value * (root.startScale - root.endScale)
250+
251+ var scaleDiff = stage0Scale - targetScale;
252+
253+ // progress : progressDiff = angle : angleDiff
254+ var scaleTranslate = progress * scaleDiff / progressDiff;
255+
256+ return stage0Scale - scaleTranslate;
188 }
257 }
258+
189 default:
259 default:
190− newScale = root.startScale - xTranslateEasing.value * (root.startScale - root.endScale)
260+ newScale = root.startScale - easingCurve.value * (root.startScale - root.endScale)
191 if (isSelected) {
261 if (isSelected) {
192 var progressDiff = negativeProgress + selectedProgress
262 var progressDiff = negativeProgress + selectedProgress
193 var progress = progressDiff - (root.progress + negativeProgress);
263 var progress = progressDiff - (root.progress + negativeProgress);
@@ -220,9 +290,17 @@ SpreadDelegate {
220 ]
290 ]
221
291
222 EasingCurve {
292 EasingCurve {
223− id: xTranslateEasing
293+ id: easingCurve
224 type: EasingCurve.OutQuad
294 type: EasingCurve.OutQuad
225 period: 1 - spreadView.positionMarker2
295 period: 1 - spreadView.positionMarker2
226 progress: root.animatedProgress
296 progress: root.animatedProgress
227 }
297 }
298+
299+ // This is used as a calculation helper to figure values for progress other than the current one
300+ // Do not bind anything to this...
301+ EasingCurve {
302+ id: helperEasingCurve
303+ type: easingCurve.type
304+ period: easingCurve.period
305+ }
228}
306}