git.iko.soy/unity8
on xenial help sign in
transitions for the secondary pages
9476508Lukáš Tinkl
qml/Wizard/Page.qml+43−6
compare with xenial
unifiedsplit
@@ -121,20 +121,22 @@ Item {
121 right: parent.right
121 right: parent.right
122 }
122 }
123 source: customTitle ? "" : "Pages/data/Phone header bkg.png"
123 source: customTitle ? "" : "Pages/data/Phone header bkg.png"
124− height: customTitle ? customMargin + titleLabel.height + customMargin : units.gu(16)
124+ height: units.gu(16)
125 clip: true
125 clip: true
126
126
127 // page title
127 // page title
128 Label {
128 Label {
129 id: titleLabel
129 id: titleLabel
130 property real animatedMargin: 0
130 property real animatedMargin: 0
131+ property real animatedTopMargin: titleRect.height - customMargin - titleLabel.height
131 anchors {
132 anchors {
132 left: parent.left
133 left: parent.left
133 right: parent.right
134 right: parent.right
134− bottom: parent.bottom
135+ top: parent.top
135 bottomMargin: bottomMargin
136 bottomMargin: bottomMargin
136 leftMargin: leftMargin + titleLabel.animatedMargin
137 leftMargin: leftMargin + titleLabel.animatedMargin
137 rightMargin: rightMargin
138 rightMargin: rightMargin
139+ topMargin: titleLabel.animatedTopMargin
138 }
140 }
139 text: title
141 text: title
140 color: customTitle ? textColor : backgroundColor
142 color: customTitle ? textColor : backgroundColor
@@ -196,13 +198,15 @@ Item {
196 Item {
198 Item {
197 id: contentHolder
199 id: contentHolder
198 property real animatedMargin: 0
200 property real animatedMargin: 0
201+ property real animatedTopMargin: 0
199 anchors {
202 anchors {
200 top: titleRect.bottom
203 top: titleRect.bottom
201 left: parent.left
204 left: parent.left
202 right: parent.right
205 right: parent.right
203 bottom: buttonBarVisible ? buttonRect.top : parent.top
206 bottom: buttonBarVisible ? buttonRect.top : parent.top
204− leftMargin: contentHolder.animatedMargin
207+ leftMargin: content.animatedMargin
205− rightMargin: -contentHolder.animatedMargin
208+ rightMargin: -content.animatedMargin
209+ topMargin: content.animatedTopMargin
206 }
210 }
207 visible: opacity > 0
211 visible: opacity > 0
208 }
212 }
@@ -258,6 +262,11 @@ Item {
258 startControlsAnimation(duration)
262 startControlsAnimation(duration)
259 }
263 }
260
264
265+ function aboutToShowSecondary(duration) {
266+ secondaryAnimation.restart()
267+ startControlsAnimation(duration)
268+ }
269+
261 function startContentAnimation(duration, direction) {
270 function startContentAnimation(duration, direction) {
262 contentAnimation.animationDurationBase = duration
271 contentAnimation.animationDurationBase = duration
263 contentAnimation.direction = direction
272 contentAnimation.direction = direction
@@ -294,10 +303,10 @@ Item {
294 ScriptAction { // direction of the effect
303 ScriptAction { // direction of the effect
295 script: {
304 script: {
296 if (contentAnimation.direction === Qt.LeftToRight) {
305 if (contentAnimation.direction === Qt.LeftToRight) {
297− titleLabel.animatedMargin = -titleRect.width;
306+ titleLabel.animatedMargin = -content.width;
298 content.animatedMargin = -content.width;
307 content.animatedMargin = -content.width;
299 } else {
308 } else {
300− titleLabel.animatedMargin = titleRect.width;
309+ titleLabel.animatedMargin = content.width;
301 content.animatedMargin = content.width;
310 content.animatedMargin = content.width;
302 }
311 }
303 }
312 }
@@ -319,4 +328,32 @@ Item {
319 }
328 }
320 }
329 }
321 }
330 }
331+
332+ ParallelAnimation { // animation for the secondary pages
333+ id: secondaryAnimation
334+
335+ NumberAnimation { // the slide-up animation
336+ target: titleLabel
337+ property: 'animatedTopMargin'
338+ from: content.height
339+ to: titleRect.height - customMargin - titleLabel.height
340+ duration: UbuntuAnimation.BriskDuration
341+ easing: UbuntuAnimation.StandardEasing
342+ }
343+ NumberAnimation {
344+ target: content
345+ property: 'animatedTopMargin'
346+ from: content.height
347+ to: 0
348+ duration: UbuntuAnimation.BriskDuration
349+ easing: UbuntuAnimation.StandardEasing
350+ }
351+ NumberAnimation { // opacity animation
352+ targets: [titleLabel,content]
353+ property: 'opacity'
354+ from: 0
355+ to: 1
356+ duration: UbuntuAnimation.FastDuration
357+ }
358+ }
322}
359}
qml/Wizard/Pages.qml+11−7
@@ -79,15 +79,10 @@ Item {
79 while (pageList.index < pageStack.depth - 1)
79 while (pageList.index < pageStack.depth - 1)
80 pop();
80 pop();
81 load(pageList.next());
81 load(pageList.next());
82−
83− var doTransitions = !currentPage.customTitle; // skip for secondary/extra pages
84− if (doTransitions) {
85− currentPage.aboutToShow(UbuntuAnimation.BriskDuration, Qt.RightToLeft);
86− }
87 }
82 }
88
83
89 function prev() {
84 function prev() {
90− var doTransitions = !currentPage.customTitle; // skip for secondary/extra pages
85+ var isPrimaryPage = !currentPage.customTitle; // skip for secondary/extra pages
91 if (pageList.index >= pageStack.depth - 1) {
86 if (pageList.index >= pageStack.depth - 1) {
92 pageList.prev(); // update pageList.index, but not for extra pages
87 pageList.prev(); // update pageList.index, but not for extra pages
93 }
88 }
@@ -98,8 +93,10 @@ Item {
98 currentPage.enabled = true;
93 currentPage.enabled = true;
99 }
94 }
100
95
101− if (doTransitions) {
96+ if (isPrimaryPage) {
102 currentPage.aboutToShow(UbuntuAnimation.BriskDuration, Qt.LeftToRight);
97 currentPage.aboutToShow(UbuntuAnimation.BriskDuration, Qt.LeftToRight);
98+ } else {
99+ currentPage.aboutToShowSecondary(UbuntuAnimation.BriskDuration);
103 }
100 }
104 }
101 }
105
102
@@ -117,6 +114,13 @@ Item {
117 // Check for immediate skip or not. We may have to wait for
114 // Check for immediate skip or not. We may have to wait for
118 // skipValid to be assigned (see Connections object below)
115 // skipValid to be assigned (see Connections object below)
119 checkSkip()
116 checkSkip()
117+
118+ var isPrimaryPage = !currentPage.customTitle; // skip for secondary/extra pages
119+ if (isPrimaryPage) {
120+ currentPage.aboutToShow(UbuntuAnimation.BriskDuration, Qt.RightToLeft);
121+ } else {
122+ currentPage.aboutToShowSecondary(UbuntuAnimation.BriskDuration);
123+ }
120 }
124 }
121
125
122 function checkSkip() {
126 function checkSkip() {