git.iko.soy/unity8
on xenial help sign in
fix selecting of tiles, improve performance, kill a binding loop
c055fc2Michael Zanetti
qml/Stages/PhoneStage.qml+19−21
compare with xenial
unifiedsplit
@@ -254,6 +254,8 @@ Item {
254 // 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
255 property int stage: 0
255 property int stage: 0
256
256
257+ property int selectedIndex: -1
258+
257 onStageChanged: print("*******stage cahnged", stage)
259 onStageChanged: print("*******stage cahnged", stage)
258
260
259 onContentXChanged: {
261 onContentXChanged: {
@@ -290,34 +292,30 @@ Item {
290 }
292 }
291 }
293 }
292 function snapTo(index) {
294 function snapTo(index) {
293− spreadRepeater.itemAt(index).selected = true
295+ spreadView.selectedIndex = index;
296+
294− snapAnimation.targetContentX = 0//width * positionMarker2;
297+ snapAnimation.targetContentX = 0;
295− snapAnimation.toIndex = index;
296 snapAnimation.start();
298 snapAnimation.start();
297 }
299 }
298
300
299 SequentialAnimation {
301 SequentialAnimation {
300 id: snapAnimation
302 id: snapAnimation
301 property int targetContentX: 0
303 property int targetContentX: 0
302− property int toIndex: -1
303
304
304 UbuntuNumberAnimation {
305 UbuntuNumberAnimation {
305 target: spreadView
306 target: spreadView
306 property: "contentX"
307 property: "contentX"
307 to: snapAnimation.targetContentX
308 to: snapAnimation.targetContentX
308−// duration: UbuntuAnimation.FastDuration
309+ duration: UbuntuAnimation.FastDuration
309− duration: UbuntuAnimation.SleepyDuration
310+// duration: UbuntuAnimation.SleepyDuration
310 }
311 }
311 ScriptAction {
312 ScriptAction {
312 script: {
313 script: {
313 print("animation finished: stage", spreadView.stage, "contentX", spreadView.contentX, "focused app", ApplicationManager.get(0).appId, ApplicationManager.get(1).appId)
314 print("animation finished: stage", spreadView.stage, "contentX", spreadView.contentX, "focused app", ApplicationManager.get(0).appId, ApplicationManager.get(1).appId)
314− if (snapAnimation.toIndex >= 0) {
315+ if (spreadView.selectedIndex >= 0) {
315− print("switching to app", snapAnimation.toIndex, ApplicationManager.get(snapAnimation.toIndex).name)
316+ print("switching to app", snapAnimation.toIndex, ApplicationManager.get(spreadView.selectedIndex).name)
316− spreadRepeater.itemAt(snapAnimation.toIndex).selected = false;
317− ApplicationManager.focusApplication(ApplicationManager.get(snapAnimation.toIndex).appId);
317+ ApplicationManager.focusApplication(ApplicationManager.get(spreadView.selectedIndex).appId);
318− print("unselecting item", snapAnimation.toIndex);
318+ spreadView.selectedIndex = -1
319− print("unselecting item", spreadRepeater.itemAt(snapAnimation.toIndex));
320− snapAnimation.toIndex = -1;
321 spreadView.contentX = 0;
319 spreadView.contentX = 0;
322 }
320 }
323 if (spreadView.contentX == spreadView.width * spreadView.positionMarker2) {
321 if (spreadView.contentX == spreadView.width * spreadView.positionMarker2) {
@@ -342,12 +340,14 @@ Item {
342 model: ApplicationManager
340 model: ApplicationManager
343 delegate: TransformedSpreadDelegate {
341 delegate: TransformedSpreadDelegate {
344 startAngle: 45
342 startAngle: 45
345− endAngle: 10
343+ endAngle: 5
346 startScale: 1
344 startScale: 1
347− endScale: 0.7
345+ endScale: 0.6
348 startDistance: spreadView.tileDistance
346 startDistance: spreadView.tileDistance
349 endDistance: units.gu(.5)
347 endDistance: units.gu(.5)
350 height: spreadView.height
348 height: spreadView.height
349+ selected: spreadView.selectedIndex == index
350+ otherSelected: spreadView.selectedIndex >= 0 && !selected
351
351
352 z: index
352 z: index
353 x: index == 0 ? 0 : spreadView.width + (index - 1) * spreadView.tileDistance
353 x: index == 0 ? 0 : spreadView.width + (index - 1) * spreadView.tileDistance
@@ -419,12 +419,10 @@ Item {
419
419
420 Behavior on animatedProgress {
420 Behavior on animatedProgress {
421 id: stage1Animation
421 id: stage1Animation
422− SequentialAnimation {
423− SmoothedAnimation {
422+ SmoothedAnimation {
424− velocity: 2;
423+ velocity: .5;
425− duration: UbuntuAnimation.BriskDuration;
424+// duration: UbuntuAnimation.BriskDuration;
426− easing: UbuntuAnimation.StandardEasing
425+// easing: UbuntuAnimation.StandardEasing
427− }
428 }
426 }
429 }
427 }
430 }
428 }
qml/Stages/TransformedSpreadDelegate.qml+65−26
@@ -6,6 +6,7 @@ SpreadDelegate {
6 id: root
6 id: root
7
7
8 property bool selected: false
8 property bool selected: false
9+ property bool otherSelected: false
9
10
10 property real progress: 0
11 property real progress: 0
11 property real animatedProgress: 0
12 property real animatedProgress: 0
@@ -22,24 +23,59 @@ SpreadDelegate {
22
23
23 onSelectedChanged: {
24 onSelectedChanged: {
24 if (selected) {
25 if (selected) {
25− priv.selectedProgress = root.progress
26+ priv.snapshot();
26− priv.selectedXTranslate = priv.xTranslate;
27+ }
27− priv.selectedAngle = priv.angle;
28+ print("setting selected to", selected)
28− priv.selectedScale = priv.scale;
29+ priv.isSelected = selected;
29− priv.isSelected = true;
30+ }
30− print("tile", index, "selected!!!!!!!!!!!!!!!!")
31+
32+ onOtherSelectedChanged: {
33+ if (otherSelected) {
34+ priv.snapshot();
35+ }
36+ priv.otherSelected = otherSelected;
37+ }
38+
39+ Connections {
40+ target: spreadView
41+ onStageChanged: {
42+ if (spreadView.stage == 1) {
43+ if (index == 0) {
44+ priv.stage2startTranslate = priv.easingAnimation(0, spreadView.positionMarker4, 0, -spreadView.width, spreadView.positionMarker4) + spreadView.width;
31− } else {
45+ } else if (index == 1) {
32− priv.isSelected = false;
46+ // find where the main easing for Tile 1 would be when reaching stage 2
47+ var stage2Progress = spreadView.positionMarker4 - spreadView.tileDistance / spreadView.width;
48+ priv.stage2startTranslate = priv.easingAnimation(0, stage2Progress, 0, -spreadView.width + root.endDistance, stage2Progress);
49+ priv.stage2startAngle = priv.easingAnimation(0, stage2Progress, root.startAngle, root.endAngle, stage2Progress)
50+ priv.stage2startScale = priv.easingAnimation(0, stage2Progress, root.startScale, root.endScale, stage2Progress);
51+ }
52+ }
33 }
53 }
34 }
54 }
35
55
36 QtObject {
56 QtObject {
37 id: priv
57 id: priv
38 property bool isSelected: false
58 property bool isSelected: false
59+ property bool otherSelected: false
39 property real selectedProgress
60 property real selectedProgress
40 property real selectedXTranslate
61 property real selectedXTranslate
41 property real selectedAngle
62 property real selectedAngle
42 property real selectedScale
63 property real selectedScale
64+ property real selectedOpacity
65+
66+ // Those values are needed as target values for the end of stage 1.
67+ // As they are static values, lets caluclate them once when entering stage 1 instead of calculating them in each animation pass.
68+ property real stage2startTranslate
69+ property real stage2startAngle
70+ property real stage2startScale
71+
72+ function snapshot() {
73+ selectedProgress = root.progress;
74+ selectedXTranslate = xTranslate;
75+ selectedAngle = angle;
76+ selectedScale = scale;
77+ selectedOpacity = opacity;
78+ }
43
79
44 property real negativeProgress: {
80 property real negativeProgress: {
45 if (index < 2) {
81 if (index < 2) {
@@ -63,14 +99,11 @@ SpreadDelegate {
63 var translation = 0;
99 var translation = 0;
64 switch (index) {
100 switch (index) {
65 case 0:
101 case 0:
66− print("+++++++++++++++++++++++++++", spreadView.stage, priv.isSelected)
67 if (spreadView.stage == 0) {
102 if (spreadView.stage == 0) {
68 translation = linearAnimation(0, spreadView.positionMarker2, 0, -spreadView.width * .25, root.animatedProgress)
103 translation = linearAnimation(0, spreadView.positionMarker2, 0, -spreadView.width * .25, root.animatedProgress)
69 break;
104 break;
70 } else if (spreadView.stage == 1){
105 } else if (spreadView.stage == 1){
71− // find where the main easing would be when reaching stage 2
72− var targetTranslate = easingAnimation(0, spreadView.positionMarker4, 0, -spreadView.width, spreadView.positionMarker4) + spreadView.width
73− translation = linearAnimation(spreadView.positionMarker2, spreadView.positionMarker4, -spreadView.width * .25, targetTranslate, root.progress)
106+ translation = linearAnimation(spreadView.positionMarker2, spreadView.positionMarker4, -spreadView.width * .25, priv.stage2startTranslate, root.progress)
74 break;
107 break;
75 } else if (!priv.isSelected){ // Stage 2
108 } else if (!priv.isSelected){ // Stage 2
76 // Move the first tile a bit to the right to be aligned with the others
109 // Move the first tile a bit to the right to be aligned with the others
@@ -88,13 +121,8 @@ SpreadDelegate {
88 translation = linearAnimation(0, spreadView.positionMarker2, 0, -spreadView.width * spreadView.snapPosition, root.animatedProgress)
121 translation = linearAnimation(0, spreadView.positionMarker2, 0, -spreadView.width * spreadView.snapPosition, root.animatedProgress)
89 break;
122 break;
90 } else if (spreadView.stage == 1 && !priv.isSelected) {
123 } else if (spreadView.stage == 1 && !priv.isSelected) {
91− // find where the main easing would be when reaching stage 2
92− var stage2Progress = spreadView.positionMarker4 - spreadView.tileDistance / spreadView.width;
93− targetTranslate = easingAnimation(0, stage2Progress, 0, -spreadView.width + root.endDistance, stage2Progress);
94−
95 translation = linearAnimation(spreadView.positionMarker2, spreadView.positionMarker4,
124 translation = linearAnimation(spreadView.positionMarker2, spreadView.positionMarker4,
96− -spreadView.width * spreadView.snapPosition, targetTranslate, root.progress);
125+ -spreadView.width * spreadView.snapPosition, priv.stage2startTranslate, root.progress);
97−
98 break;
126 break;
99 }
127 }
100
128
@@ -106,7 +134,6 @@ SpreadDelegate {
106 if (priv.isSelected) {
134 if (priv.isSelected) {
107 // Distance to left edge
135 // Distance to left edge
108 var targetTranslate = -spreadView.width - ((index - 1) * root.startDistance)
136 var targetTranslate = -spreadView.width - ((index - 1) * root.startDistance)
109− print("selectedProgress:", selectedProgress, "negativeProgress:", negativeProgress, "progress", root.progress)
110 translation = linearAnimation(selectedProgress, negativeProgress, selectedXTranslate, targetTranslate, root.progress)
137 translation = linearAnimation(selectedProgress, negativeProgress, selectedXTranslate, targetTranslate, root.progress)
111 }
138 }
112 }
139 }
@@ -128,10 +155,7 @@ SpreadDelegate {
128 newAngle = linearAnimation(0, spreadView.positionMarker2, root.startAngle, root.startAngle * (1-spreadView.snapPosition), root.animatedProgress)
155 newAngle = linearAnimation(0, spreadView.positionMarker2, root.startAngle, root.startAngle * (1-spreadView.snapPosition), root.animatedProgress)
129 break;
156 break;
130 } else if (spreadView.stage == 1 && !priv.isSelected) {
157 } else if (spreadView.stage == 1 && !priv.isSelected) {
131− // find where the main easing would be when reaching stage 2
132− var stage2Progress = spreadView.positionMarker4 - spreadView.tileDistance / spreadView.width;
133− var targetAngle = easingAnimation(0, stage2Progress, root.startAngle, root.endAngle, stage2Progress)
134− newAngle = linearAnimation(spreadView.positionMarker2, spreadView.positionMarker4, root.startAngle * (1-spreadView.snapPosition), targetAngle, root.progress)
158+ newAngle = linearAnimation(spreadView.positionMarker2, spreadView.positionMarker4, root.startAngle * (1-spreadView.snapPosition), priv.stage2startAngle, root.progress)
135 break;
159 break;
136 }
160 }
137
161
@@ -160,9 +184,7 @@ SpreadDelegate {
160 newScale = linearAnimation(0, spreadView.positionMarker2, root.tile1StartScale, 1, root.animatedProgress)
184 newScale = linearAnimation(0, spreadView.positionMarker2, root.tile1StartScale, 1, root.animatedProgress)
161 break;
185 break;
162 } else if (spreadView.stage == 1 && !priv.isSelected) {
186 } else if (spreadView.stage == 1 && !priv.isSelected) {
163− // find where the main easing would be when reaching positionMarker4
164− var targetScale = easingAnimation(0, spreadView.positionMarker4, root.startScale, root.endScale, spreadView.positionMarker4);
165− newScale = linearAnimation(spreadView.positionMarker2, spreadView.positionMarker4, 1, targetScale, root.progress)
187+ newScale = linearAnimation(spreadView.positionMarker2, spreadView.positionMarker4, 1, priv.stage2startScale, root.progress)
166 break;
188 break;
167 }
189 }
168
190
@@ -174,6 +196,22 @@ SpreadDelegate {
174 }
196 }
175 return newScale;
197 return newScale;
176 }
198 }
199+
200+ property real opacity: {
201+ if (otherSelected) {
202+ return linearAnimation (selectedProgress, selectedProgress - .5, selectedOpacity, 0, root.progress)
203+ }
204+ if (index == 0) {
205+ switch (spreadView.stage) {
206+ case 0:
207+ return linearAnimation(0, spreadView.positionMarker2, 1, .3, root.animatedProgress)
208+ case 1:
209+ return linearAnimation(spreadView.positionMarker2, spreadView.positionMarker4, .3, 1, root.animatedProgress)
210+ }
211+ }
212+
213+ return 1;
214+ }
177 }
215 }
178
216
179 transform: [
217 transform: [
@@ -191,6 +229,7 @@ SpreadDelegate {
191 x: priv.xTranslate
229 x: priv.xTranslate
192 }
230 }
193 ]
231 ]
232+ opacity: priv.opacity
194
233
195 EasingCurve {
234 EasingCurve {
196 id: easingCurve
235 id: easingCurve