brl/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

layout: Don't create and destroy ripple animations

Browse Source 
Instead, create three ripples and keep tweening them. This gives a dramatic
speedup when entering the overview, but means that we can't have the same animation
running twice. In this case, we "reset" the currently running ripple animation, but
it is hard to notice unless looking for it.

https://bugzilla.gnome.org/show_bug.cgi?id=656125
This commit is contained in:
Jasper St. Pierre 2011-08-07 16:48:56 -04:00
parent bbd2c02b7f
commit 08e669adde
1 changed files with 27 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
js/ui/layout.js
View File

@ -278,13 +278,22 @@ HotCorner.prototype = {
Lang.bind(this, this._onCornerClicked)); Lang.bind(this, this._onCornerClicked));
this._corner.connect('leave-event', this._corner.connect('leave-event',
Lang.bind(this, this._onCornerLeft)); Lang.bind(this, this._onCornerLeft));
// Cache the three ripples instead of dynamically creating and destroying them.
this._ripple1 = new St.BoxLayout({ style_class: 'ripple-box', opacity: 0 });
this._ripple2 = new St.BoxLayout({ style_class: 'ripple-box', opacity: 0 });
this._ripple3 = new St.BoxLayout({ style_class: 'ripple-box', opacity: 0 });
Main.uiGroup.add_actor(this._ripple1);
Main.uiGroup.add_actor(this._ripple2);
Main.uiGroup.add_actor(this._ripple3);
}, },
destroy: function() { destroy: function() {
this.actor.destroy(); this.actor.destroy();
}, },
_addRipple : function(delay, time, startScale, startOpacity, finalScale, finalOpacity) { _animRipple : function(ripple, delay, time, startScale, startOpacity, finalScale) {
// We draw a ripple by using a source image and animating it scaling // We draw a ripple by using a source image and animating it scaling
// outwards and fading away. We want the ripples to move linearly // outwards and fading away. We want the ripples to move linearly
// or it looks unrealistic, but if the opacity of the ripple goes // or it looks unrealistic, but if the opacity of the ripple goes
@ -292,25 +301,27 @@ HotCorner.prototype = {
// 'onUpdate' to give a non-linear curve to the fade-away and make // 'onUpdate' to give a non-linear curve to the fade-away and make
// it more visible in the middle section. // it more visible in the middle section.
let [x, y] = this._corner.get_transformed_position();
let ripple = new St.BoxLayout({ style_class: 'ripple-box',
opacity: 255 * Math.sqrt(startOpacity),
scale_x: startScale,
scale_y: startScale,
x: x,
y: y });
ripple._opacity = startOpacity; ripple._opacity = startOpacity;
if (ripple.get_direction() == St.TextDirection.RTL) if (ripple.get_direction() == St.TextDirection.RTL)
ripple.set_anchor_point_from_gravity(Clutter.Gravity.NORTH_EAST); ripple.set_anchor_point_from_gravity(Clutter.Gravity.NORTH_EAST);
Tweener.addTween(ripple, { _opacity: finalOpacity,
ripple.visible = true;
ripple.opacity = 255 * Math.sqrt(startOpacity);
ripple.scale_x = ripple.scale_y = startScale;
let [x, y] = this._corner.get_transformed_position();
ripple.x = x;
ripple.y = y;
Tweener.addTween(ripple, { _opacity: 0,
scale_x: finalScale, scale_x: finalScale,
scale_y: finalScale, scale_y: finalScale,
delay: delay, delay: delay,
time: time, time: time,
transition: 'linear', transition: 'linear',
onUpdate: function() { ripple.opacity = 255 * Math.sqrt(ripple._opacity); }, onUpdate: function() { ripple.opacity = 255 * Math.sqrt(ripple._opacity); },
onComplete: function() { ripple.destroy(); } }); onComplete: function() { ripple.visible = false; } });
Main.uiGroup.add_actor(ripple);
}, },
rippleAnimation: function() { rippleAnimation: function() {
@ -318,10 +329,10 @@ HotCorner.prototype = {
// parameters were found by trial and error, so don't look // parameters were found by trial and error, so don't look
// for them to make perfect sense mathematically // for them to make perfect sense mathematically
// delay time scale opacity => scale opacity // delay time scale opacity => scale
this._addRipple(0.0, 0.83, 0.25, 1.0, 1.5, 0.0); this._animRipple(this._ripple1, 0.0, 0.83, 0.25, 1.0, 1.5);
this._addRipple(0.05, 1.0, 0.0, 0.7, 1.25, 0.0); this._animRipple(this._ripple2, 0.05, 1.0, 0.0, 0.7, 1.25);
this._addRipple(0.35, 1.0, 0.0, 0.3, 1, 0.0); this._animRipple(this._ripple3, 0.35, 1.0, 0.0, 0.3, 1);
}, },
handleDragOver: function(source, actor, x, y, time) { handleDragOver: function(source, actor, x, y, time) {