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

Draw a ripple when the hot corner is hit

Browse Source 
Animate an expanding ripple from the hot corner using multiple
scaling copies of a PNG of a single ripple. The idea here is to
give the user a clue as to what happened.

Based on initial version implemented live at MIT IAP GNOME Shell
intro session; thanks to all the attendees for coming!

https://bugzilla.gnome.org/show_bug.cgi?id=609135
This commit is contained in:
Owen W. Taylor 2010-01-13 21:48:12 -05:00
parent dce4b2f325
commit caaa543385
4 changed files with 42 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
data/Makefile.am
View File

@ -22,6 +22,7 @@ dist_theme_DATA = \
theme/add-workspace.svg \
theme/close-window.svg \
theme/close.svg \
theme/corner-ripple.png \
theme/gnome-shell.css \
theme/mosaic-view-active.svg \
theme/mosaic-view.svg \

BIN
data/theme/corner-ripple.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

5
data/theme/gnome-shell.css
View File

@ -631,3 +631,8 @@ StTooltip {
background: rgba(255,255,255,0.33);
}
.ripple-box {
width: 52px;
height: 52px;
background-image: url("corner-ripple.png");
}

36
js/ui/panel.js
View File

@ -569,11 +569,47 @@ Panel.prototype = {
}
},
_addRipple : function(delay, time, startScale, startOpacity, finalScale, finalOpacity) {
// We draw a ripple by using a source image and animating it scaling
// outwards and fading away. We want the ripples to move linearly
// or it looks unrealistic, but if the opacity of the ripple goes
// linearly to zero it fades away too quickly, so we use Tweener's
// 'onUpdate' to give a non-linear curve to the fade-away and make
// it more visible in the middle section.
let [x, y] = this._hotCorner.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;
Tweener.addTween(ripple, { _opacity: finalOpacity,
scale_x: finalScale,
scale_y: finalScale,
delay: delay,
time: time,
transition: 'linear',
onUpdate: function() { ripple.opacity = 255 * Math.sqrt(ripple._opacity); },
onComplete: function() { ripple.destroy(); } });
global.stage.add_actor(ripple);
},
_onHotCornerEntered : function() {
if (!this._hotCornerEntered) {
this._hotCornerEntered = true;
if (!Main.overview.animationInProgress) {
this._hotCornerActivationTime = Date.now() / 1000;
// Show three concentric ripples expanding outwards; the exact
// parameters were found by trial and error, so don't look
// for them to make perfect sense mathematically
// delay time scale opacity => scale opacity
this._addRipple(0.0, 0.83, 0.25, 1.0, 1.5, 0.0);
this._addRipple(0.05, 1.0, 0.0, 0.7, 1.25, 0.0);
this._addRipple(0.35, 1.0, 0.0, 0.3, 1, 0.0);
Main.overview.toggle();
}
}