78289a8 · unity8 · git.iko.soy

git.iko.soy/unity8

on xenial help sign in

hide tiles when they're either outside the screen on the right

78289a8Michael Zanetti12 years ago

qml/Stages/PhoneStage.qml+13−2

compare with xenial

unifiedsplit

@@ -197,7 +197,13 @@ Item {

197 }

198 spreadView.selectedIndex = index;

199 root.fullscreen = ApplicationManager.get(index).fullscreen;

200+ // If we're not in full spread mode yet, always unwind to start pos

201+ // otherwise unwind up to progress 0 of the selected index

202+ if (spreadView.phase < 2) {

203+ snapAnimation.targetContentX = -shift;

204+ } else {

200− snapAnimation.targetContentX = -shift;

205+ snapAnimation.targetContentX = -shift + index * spreadView.tileDistance;

206+ }

201 snapAnimation.start();

207 snapAnimation.start();

202 }

208 }

203

209

@@ -299,6 +305,11 @@ Item {

299 if (behavioredIndex == 1 && spreadView.phase < 2) {

305 if (behavioredIndex == 1 && spreadView.phase < 2) {

300 tileProgress += spreadView.tileDistance / spreadView.width;

306 tileProgress += spreadView.tileDistance / spreadView.width;

301 }

307 }

308+ // Limiting progress to ~0 and 1.7 to avoid binding calculations when tiles are either

309+ // outside the screen on the right (progress < 0) or hidden by other tiles on the left

310+ // (> 1.7). Using 0.0001 to differentiate when a tile should still be visible (==0)

311+ // or we can hide it (< 0)

312+ tileProgress = Math.max(-0.0001, Math.min(1.7, tileProgress));

302 return tileProgress;

313 return tileProgress;

303 }

314 }

304

315

@@ -366,7 +377,7 @@ Item {

366 }

377 }

367 if (dragging && attachedToView) {

378 if (dragging && attachedToView) {

368 // Gesture recognized. Let's move the spreadView with the finger

379 // Gesture recognized. Let's move the spreadView with the finger

369− spreadView.contentX = -touchX - spreadView.shift;

380+ spreadView.contentX = -touchX + spreadDragArea.width - spreadView.shift;

370 }

381 }

371 if (attachedToView && spreadView.shiftedContentX >= spreadView.width * spreadView.positionMarker3) {

382 if (attachedToView && spreadView.shiftedContentX >= spreadView.width * spreadView.positionMarker3) {

372 // We passed positionMarker3. Detach from spreadView and snap it.

383 // We passed positionMarker3. Detach from spreadView and snap it.

qml/Stages/TransformedSpreadDelegate.qml+16−24

@@ -44,6 +44,9 @@ SpreadDelegate {

44 property real startDistance: units.gu(5)

45 property real endDistance: units.gu(.5)

47+ // Hiding tiles when their progress is negative or reached the maximum

48+ visible: progress >= 0 && progress < 1.7

49+

47 onSelectedChanged: {

50 onSelectedChanged: {

48 if (selected) {

51 if (selected) {

49 priv.snapshot();

52 priv.snapshot();

@@ -106,16 +109,6 @@ SpreadDelegate {

106 selectedTopMarginProgress = topMarginProgress;

109 selectedTopMarginProgress = topMarginProgress;

107 }

110 }

108

111

109− // This calculates how much negative progress there can be if unwinding the spread completely

110− // the progress for each tile starts at 0 when it crosses the right edge, so the later a tile comes in,

111− // the bigger its negativeProgress can be.

112− property real negativeProgress: {

113− if (index == 1 && spreadView.phase < 2) {

114− return 0;

115− }

116− return -index * spreadView.tileDistance / spreadView.width;

117− }

118−

119 function linearAnimation(startProgress, endProgress, startValue, endValue, progress) {

112 function linearAnimation(startProgress, endProgress, startValue, endValue, progress) {

120 // progress : progressDiff = value : valueDiff => value = progress * valueDiff / progressDiff

113 // progress : progressDiff = value : valueDiff => value = progress * valueDiff / progressDiff

121 return (progress - startProgress) * (endValue - startValue) / (endProgress - startProgress) + startValue;

114 return (progress - startProgress) * (endValue - startValue) / (endProgress - startProgress) + startValue;

@@ -127,22 +120,20 @@ SpreadDelegate {

127 return helperEasingCurve.value * (endValue - startValue) + startValue;

120 return helperEasingCurve.value * (endValue - startValue) + startValue;

128 }

121 }

129

122

130− property real animatedEndDistance: linearAnimation(0, 2, root.endDistance, 0, root.progress)

131−

132 // The following blocks handle the animation of the tile in the spread.

123 // The following blocks handle the animation of the tile in the spread.

133 // At the beginning, each tile is attached at the right edge, outside the screen.

124 // At the beginning, each tile is attached at the right edge, outside the screen.

134 // The progress for each tile starts at 0 and it reaches its end position at a progress of 1.

125 // The progress for each tile starts at 0 and it reaches its end position at a progress of 1.

135− // The first phases are handled special for the first 2 tiles. as we do the alt-tab and snapping in there

126+ // The first phases are handled special for the first 2 tiles. as we do the alt-tab and snapping

136− // Once we reached phase 3, the animation is the same for all tiles.

127+ // in there. Once we reached phase 3, the animation is the same for all tiles.

137− // When a tile is selected, the animation state is snapshotted, and the spreadView is unwound (progress animates

128+ // When a tile is selected, the animation state is snapshotted, and the spreadView is unwound.

138− // back to negativeProgress). All tiles are kept in place and faded out to 0 opacity except

129+ // All tiles are kept in place and faded out to 0 opacity except

139 // the selected tile, which is animated from the snapshotted position to be fullscreen.

130 // the selected tile, which is animated from the snapshotted position to be fullscreen.

140

131

141 property real xTranslate: {

132 property real xTranslate: {

142 if (otherSelected) {

133 if (otherSelected) {

143 if (spreadView.phase < 2 && index == 0) {

134 if (spreadView.phase < 2 && index == 0) {

144− return linearAnimation(selectedProgress, negativeProgress,

135+ return linearAnimation(selectedProgress, 0, selectedXTranslate,

145− selectedXTranslate, selectedXTranslate - spreadView.tileDistance, root.progress);

136+ selectedXTranslate - spreadView.tileDistance, root.progress);

146 }

137 }

147

138

148 return selectedXTranslate;

139 return selectedXTranslate;

@@ -160,7 +151,7 @@ SpreadDelegate {

160 // Apply the same animation as with the rest but add spreadView.width to align it with the others.

151 // Apply the same animation as with the rest but add spreadView.width to align it with the others.

161 return -easingCurve.value * spreadView.width + spreadView.width;

152 return -easingCurve.value * spreadView.width + spreadView.width;

162 } else if (priv.isSelected) {

153 } else if (priv.isSelected) {

163− return linearAnimation(selectedProgress, negativeProgress, selectedXTranslate, 0, root.progress);

154+ return linearAnimation(selectedProgress, 0, selectedXTranslate, 0, root.progress);

164 }

155 }

165

156

166 case 1:

157 case 1:

@@ -177,13 +168,14 @@ SpreadDelegate {

177 if (priv.isSelected) {

168 if (priv.isSelected) {

178 // Distance to left edge

169 // Distance to left edge

179 var targetTranslate = -spreadView.width - ((index - 1) * root.startDistance);

170 var targetTranslate = -spreadView.width - ((index - 1) * root.startDistance);

180− return linearAnimation(selectedProgress, negativeProgress,

171+ return linearAnimation(selectedProgress, 0,

181 selectedXTranslate, targetTranslate, root.progress);

172 selectedXTranslate, targetTranslate, root.progress);

182 }

173 }

183

174

184 // Fix it at the right edge...

175 // Fix it at the right edge...

185 var rightEdgeOffset = -((index - 1) * root.startDistance);

176 var rightEdgeOffset = -((index - 1) * root.startDistance);

186 // ...and use our easing to move them to the left. Stop a bit earlier for each tile

177 // ...and use our easing to move them to the left. Stop a bit earlier for each tile

178+ var animatedEndDistance = linearAnimation(0, 2, root.endDistance, 0, root.progress)

187 return -easingCurve.value * spreadView.width + (index * animatedEndDistance) + rightEdgeOffset;

179 return -easingCurve.value * spreadView.width + (index * animatedEndDistance) + rightEdgeOffset;

188

180

189 }

181 }

@@ -197,7 +189,7 @@ SpreadDelegate {

197 return priv.selectedAngle;

189 return priv.selectedAngle;

198 }

190 }

199 if (priv.isSelected) {

191 if (priv.isSelected) {

200− return linearAnimation(selectedProgress, negativeProgress, selectedAngle, 0, root.progress);

192+ return linearAnimation(selectedProgress, 0, selectedAngle, 0, root.progress);

201 }

193 }

202 switch (index) {

194 switch (index) {

203 case 0:

195 case 0:

@@ -229,7 +221,7 @@ SpreadDelegate {

229 return priv.selectedScale;

221 return priv.selectedScale;

230 }

222 }

231 if (priv.isSelected) {

223 if (priv.isSelected) {

232− return linearAnimation(selectedProgress, negativeProgress, selectedScale, 1, root.progress);

224+ return linearAnimation(selectedProgress, 0, selectedScale, 1, root.progress);

233 }

225 }

234

226

235 switch (index) {

227 switch (index) {

@@ -274,7 +266,7 @@ SpreadDelegate {

274

266

275 property real topMarginProgress: {

267 property real topMarginProgress: {

276 if (priv.isSelected) {

268 if (priv.isSelected) {

277− return linearAnimation(selectedProgress, negativeProgress, selectedTopMarginProgress, 0, root.progress);

269+ return linearAnimation(selectedProgress, 0, selectedTopMarginProgress, 0, root.progress);

278 }

270 }

279

271

280 switch (index) {

272 switch (index) {

@@ -326,7 +318,7 @@ SpreadDelegate {

326 id: easingCurve

318 id: easingCurve

327 type: EasingCurve.OutSine

319 type: EasingCurve.OutSine

328 period: 1 - spreadView.positionMarker2

320 period: 1 - spreadView.positionMarker2

329− progress: root.animatedProgress

321+ progress: root.progress

330 }

322 }

331

323

332 // This is used as a calculation helper to figure values for progress other than the current one

324 // This is used as a calculation helper to figure values for progress other than the current one