on xenial help sign in
fix selecting an app animation
commit00dfebd2ddb378ad298ecbb9d7f92007f04badb4 authorMichael Zanetti <michael.zanetti@canonical.com> dateWed 29 Jan 2014, 14:36 (13 years ago) parent1d3b58e
2 files changed+27−41
qml/Stages/PhoneStage.qml+1−1 qml/Stages/TransformedSpreadDelegate.qml+26−40
qml/Stages/PhoneStage.qml+1−1
@@ -303,7 +303,7 @@ Item {
303303 target: spreadView
304304 property: "contentX"
305305 to: snapAnimation.targetContentX
306− duration: UbuntuAnimation.SnapDuration
306+ duration: UbuntuAnimation.FastDuration
307307 }
308308 ScriptAction {
309309 script: {
qml/Stages/TransformedSpreadDelegate.qml+26−40
@@ -43,7 +43,14 @@ SpreadDelegate {
4343 property real selectedAngle
4444 property real selectedScale
4545
46− property real negativeProgress: (index - 1) * spreadView.positionMarker1
46+ property real negativeProgress: {
47+ if (index == 0) {
48+ return spreadView.positionMarker2;
49+ } else if (index == 1) {
50+ return spreadView.positionMarker2 - (spreadView.tileDistance / spreadView.width);
51+ }
52+ return -(index - 2) * (spreadView.tileDistance / spreadView.width);
53+ }
4754
4855 function linearAnimation(startProgress, endProgress, startValue, endValue, progress) {
4956 // progress : progressDiff = value : valueDiff
@@ -62,23 +69,29 @@ SpreadDelegate {
6269 case 0:
6370 if (spreadView.stage == 0) {
6471 translation = linearAnimation(0, spreadView.positionMarker2, 0, -spreadView.width * .25, root.animatedProgress)
72+ break;
6573 } else if (spreadView.stage == 1){
6674 // find where the main easing would be when reaching stage 2
6775 var targetTranslate = easingAnimation(0, spreadView.positionMarker4, 0, -spreadView.width, spreadView.positionMarker4) + spreadView.width
6876 translation = linearAnimation(spreadView.positionMarker2, spreadView.positionMarker4, -spreadView.width * .25, targetTranslate, root.progress)
69− } else { // Stage 2
70−// // Move the first tile a bit to the right to be aligned with the others
77+ break;
78+ } else if (!isSelected){ // Stage 2
79+ // Move the first tile a bit to the right to be aligned with the others
7180 translation += spreadView.width
7281 // apply the same animation as with the rest
7382 translation += -easingCurve.value * spreadView.width
83+ break;
84+ } else if (isSelected) {
85+ translation = linearAnimation(selectedProgress, negativeProgress, selectedXTranslate, 0, root.progress)
86+ break;
7487 }
75− break;
88+
7689 case 1:
7790 if (spreadView.stage == 0) {
7891 translation = linearAnimation(0, spreadView.positionMarker2, 0, -spreadView.width * spreadView.snapPosition, root.animatedProgress)
7992 break;
8093 } else if (spreadView.stage == 1) {
81−// // find where the main easing would be when reaching stage 2
94+ // find where the main easing would be when reaching stage 2
8295 var stage2Progress = spreadView.positionMarker4 - spreadView.tileDistance / spreadView.width;
8396 targetTranslate = easingAnimation(0, stage2Progress, 0, -spreadView.width + root.endDistance, stage2Progress);
8497
@@ -89,25 +102,14 @@ SpreadDelegate {
89102 }
90103
91104 default:
92−// // Fix it at the right edge...
105+ // Fix it at the right edge...
93106 translation += -((index - 1) * root.startDistance)
94107 // ...and use our easing to move them to the left. Stop a bit earlier for each tile
95108 translation += -easingCurve.value * spreadView.width + (index * root.endDistance)
96109 if (isSelected) {
97− var progressDiff = negativeProgress + selectedProgress
98− var progress = progressDiff - (root.progress + negativeProgress);
99− var translateDiff = spreadView.width - (selectedXTranslate - translation)
100−
101− // Fix it where it was when selected
102− translation = selectedXTranslate - progress * spreadView.width
103−
104110 // Distance to left edge
105− var targetTranslate = spreadView.contentX - spreadView.width - spreadRow.x - ((index - 1) * root.startDistance)
106−
107− // The distance to animate is from the selection position to the left edge
108− var translateDiff = targetTranslate - translation
109−
110− translation += progress * translateDiff / progressDiff;
111+ var targetTranslate = -spreadView.width - ((index - 1) * root.startDistance)
112+ translation = linearAnimation(selectedProgress, negativeProgress, selectedXTranslate, targetTranslate, root.progress)
111113 }
112114 }
113115 return translation;
@@ -129,9 +131,8 @@ SpreadDelegate {
129131 break;
130132 } else if (spreadView.stage == 1) {
131133 // find where the main easing would be when reaching stage 2
132− helperEasingCurve.progress = spreadView.positionMarker4 - spreadView.tileDistance / spreadView.width;
133− var targetAngle = root.startAngle - helperEasingCurve.value * (root.startAngle - root.endAngle)
134−
134+ var stage2Progress = spreadView.positionMarker4 - spreadView.tileDistance / spreadView.width;
135+ var targetAngle = easingAnimation(0, stage2Progress, root.startAngle, root.endAngle, stage2Progress)
135136 newAngle = linearAnimation(spreadView.positionMarker2, spreadView.positionMarker4, root.startAngle * (1-spreadView.snapPosition), targetAngle, root.progress)
136137 break;
137138 }
@@ -139,13 +140,7 @@ SpreadDelegate {
139140 default:
140141 newAngle = root.startAngle - easingCurve.value * (root.startAngle - root.endAngle)
141142 if (isSelected) {
142− var progressDiff = negativeProgress + selectedProgress
143− var progress = progressDiff - (root.progress + negativeProgress);
144− var angleDiff = -selectedAngle;
145− var angleTranslate = progress * angleDiff / progressDiff;
146−
147− newAngle = selectedAngle + angleTranslate;
148−
143+ newAngle = linearAnimation(selectedProgress, negativeProgress, selectedAngle, 0, root.progress)
149144 }
150145 }
151146
@@ -167,9 +162,7 @@ SpreadDelegate {
167162 newScale = linearAnimation(0, spreadView.positionMarker2, root.tile1StartScale, 1, root.animatedProgress)
168163 break;
169164 } else if (spreadView.stage == 1) {
170−// // find where the main easing would be when reaching positionMarker4
171−// helperEasingCurve.progress = spreadView.positionMarker4;
172−// var targetScale = root.startScale - helperEasingCurve.value * (root.startScale - root.endScale)
165+ // find where the main easing would be when reaching positionMarker4
173166 var targetScale = easingAnimation(0, spreadView.positionMarker4, root.startScale, root.endScale, spreadView.positionMarker4);
174167 newScale = linearAnimation(spreadView.positionMarker2, spreadView.positionMarker4, 1, targetScale, root.progress)
175168 break;
@@ -178,14 +171,7 @@ SpreadDelegate {
178171 default:
179172 newScale = root.startScale - easingCurve.value * (root.startScale - root.endScale)
180173 if (isSelected) {
181− var progressDiff = negativeProgress + selectedProgress
182− var progress = progressDiff - (root.progress + negativeProgress);
183− var scaleDiff = 1 - selectedScale
184−
185− // progress : progressDiff = angle : angleDiff
186− var scaleTranslate = progress * scaleDiff / progressDiff;
187−
188− newScale = selectedScale + scaleTranslate;
174+ newScale = linearAnimation(selectedProgress, negativeProgress, selectedScale, 1, root.progress)
189175 }
190176 }
191177 return newScale;