[gnome-shell/wip/swarm: 11/14] appDisplay: Animate indicators out
- From: Carlos Soriano <csoriano src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell/wip/swarm: 11/14] appDisplay: Animate indicators out
- Date: Sat, 30 Aug 2014 11:59:14 +0000 (UTC)
commit 630cde4e9475e2d390ed2b28f0d9946bed1441a4
Author: Carlos Soriano <carlos soriano89 gmail com>
Date: Tue Jun 17 21:31:53 2014 +0200
appDisplay: Animate indicators out
Given that we animate indicator in, it makes sense to animate them out
as well.
Also make possible animating indicators between view changes as well.
https://bugzilla.gnome.org/show_bug.cgi?id=734726
js/ui/appDisplay.js | 104 +++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 84 insertions(+), 20 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index c80f1bc..9ca0146 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -45,6 +45,16 @@ const INDICATORS_BASE_TIME = 0.25;
const INDICATORS_ANIMATION_DELAY = 0.125;
const INDICATORS_ANIMATION_MAX_TIME = 0.75;
+// Follow iconGrid animations approach and divide by 2 to animate out to
+// not annoy the user when the user wants to quit appDisplay.
+// Also, make sure we don't exceed iconGrid animation total time or
+// views switch time.
+const INDICATORS_BASE_TIME_OUT = 0.125;
+const INDICATORS_ANIMATION_DELAY_OUT = 0.0625;
+const INDICATORS_ANIMATION_MAX_TIME_OUT =
+ Math.min (VIEWS_SWITCH_TIME,
+ IconGrid.ANIMATION_TIME_OUT + IconGrid.ANIMATION_MAX_DELAY_OUT_FOR_ITEM);
+
const PAGE_SWITCH_TIME = 0.3;
const VIEWS_SWITCH_TIME = 0.4;
@@ -179,6 +189,25 @@ const BaseAppView = new Lang.Class({
this.selectApp(id);
}));
}
+ },
+
+ animateSwitch: function(active) {
+ Tweener.removeTweens(this.actor);
+ Tweener.removeTweens(this._grid.actor);
+
+ let params = { time: VIEWS_SWITCH_TIME,
+ transition: 'easeOutQuad' };
+ if (active) {
+ this.actor.show();
+ params.opacity = 255;
+ params.delay = VIEWS_SWITCH_ANIMATION_DELAY;
+ } else {
+ params.opacity = 0;
+ params.delay = 0;
+ params.onComplete = Lang.bind(this, function() { this.actor.hide() });
+ }
+
+ Tweener.addTween(this._grid.actor, params);
}
});
Signals.addSignalMethods(BaseAppView.prototype);
@@ -214,9 +243,6 @@ const PageIndicators = new Lang.Class({
this.actor = new PageIndicatorsActor();
this._nPages = 0;
this._currentPage = undefined;
-
- this.actor.connect('notify::mapped',
- Lang.bind(this, this._animateIndicators));
},
setNPages: function(nPages) {
@@ -246,7 +272,9 @@ const PageIndicators = new Lang.Class({
children[i].destroy();
}
this._nPages = nPages;
- this.actor.visible = (this._nPages > 1);
+
+ // Show them if necessary
+ this.animateIndicatorsIn();
},
setCurrentPage: function(currentPage) {
@@ -257,14 +285,13 @@ const PageIndicators = new Lang.Class({
children[i].set_checked(i == this._currentPage);
},
- _animateIndicators: function() {
- if (!this.actor.mapped)
- return;
-
+ animateIndicatorsIn: function() {
let children = this.actor.get_children();
- if (children.length == 0)
+ if (children.length <= 1)
return;
+ this.actor.show();
+
let offset;
if (this.actor.get_text_direction() == Clutter.TextDirection.RTL)
offset = -children[0].width;
@@ -285,6 +312,38 @@ const PageIndicators = new Lang.Class({
delay: VIEWS_SWITCH_ANIMATION_DELAY
});
}
+ },
+
+ animateIndicatorsOut: function() {
+ let children = this.actor.get_children();
+ if (children.length <= 1) {
+ this.actor.hide();
+ return;
+ }
+
+ let offset;
+ if (this.actor.get_text_direction() == Clutter.TextDirection.RTL)
+ offset = -children[0].width;
+ else
+ offset = children[0].width;
+
+ let delay = INDICATORS_ANIMATION_DELAY;
+ let totalAnimationTime = INDICATORS_BASE_TIME_OUT + INDICATORS_ANIMATION_DELAY_OUT * this._nPages;
+ if (totalAnimationTime > INDICATORS_ANIMATION_MAX_TIME_OUT)
+ delay -= (totalAnimationTime - INDICATORS_ANIMATION_MAX_TIME_OUT) / this._nPages;
+
+ for (let i = 0; i < this._nPages; i++) {
+ let isLastItem = i == this._nPages -1;
+ Tweener.addTween(children[i],
+ { translation_x: offset,
+ time: INDICATORS_BASE_TIME_OUT + delay * i,
+ transition: 'easeInOutQuad',
+ onComplete: Lang.bind(this, function() {
+ if (isLastItem)
+ this.actor.hide();
+ })
+ });
+ }
}
});
Signals.addSignalMethods(PageIndicators.prototype);
@@ -475,6 +534,9 @@ const AllView = new Lang.Class({
page: this._currentPage });
});
if (animationDirection == IconGrid.AnimationDirection.IN) {
+ if (this._grid.actor.mapped)
+ this._pageIndicators.animateIndicatorsIn();
+
let toAnimate = this._grid.actor.connect('notify::allocation', Lang.bind(this,
function() {
if (this._grid.actor.mapped) {
@@ -499,14 +561,25 @@ const AllView = new Lang.Class({
let spaceClosedId = this._grid.connect('space-closed', Lang.bind(this,
function() {
this._grid.disconnect(spaceClosedId);
+ this._pageIndicators.animateIndicatorsOut();
gridAnimationFunction();
}));
} else {
+ this._pageIndicators.animateIndicatorsOut();
gridAnimationFunction();
}
}
},
+ animateSwitch: function(active) {
+ this.parent(active);
+
+ if (active)
+ this._pageIndicators.animateIndicatorsIn();
+ else
+ this._pageIndicators.animateIndicatorsOut();
+ },
+
getCurrentPageY: function() {
return this._grid.getPageY(this._currentPage);
},
@@ -937,21 +1010,12 @@ const AppDisplay = new Lang.Class({
_showView: function(activeIndex) {
for (let i = 0; i < this._views.length; i++) {
- let actor = this._views[i].view.actor;
-
- let params = { time: VIEWS_SWITCH_TIME,
- opacity: (i == activeIndex) ? 255 : 0,
- delay: (i == activeIndex) ? VIEWS_SWITCH_ANIMATION_DELAY : 0 };
- if (i == activeIndex)
- actor.visible = true;
- else
- params.onComplete = function() { actor.hide(); };
- Tweener.addTween(actor, params);
-
if (i == activeIndex)
this._views[i].control.add_style_pseudo_class('checked');
else
this._views[i].control.remove_style_pseudo_class('checked');
+
+ this._views[i].view.animateSwitch(i == activeIndex);
}
},
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]