Draw a ripple when the hot corner is hit
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:
parent
dce4b2f325
commit
caaa543385
@ -22,6 +22,7 @@ dist_theme_DATA = \
|
|||||||
theme/add-workspace.svg \
|
theme/add-workspace.svg \
|
||||||
theme/close-window.svg \
|
theme/close-window.svg \
|
||||||
theme/close.svg \
|
theme/close.svg \
|
||||||
|
theme/corner-ripple.png \
|
||||||
theme/gnome-shell.css \
|
theme/gnome-shell.css \
|
||||||
theme/mosaic-view-active.svg \
|
theme/mosaic-view-active.svg \
|
||||||
theme/mosaic-view.svg \
|
theme/mosaic-view.svg \
|
||||||
|
BIN
data/theme/corner-ripple.png
Normal file
BIN
data/theme/corner-ripple.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.4 KiB |
@ -631,3 +631,8 @@ StTooltip {
|
|||||||
background: rgba(255,255,255,0.33);
|
background: rgba(255,255,255,0.33);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ripple-box {
|
||||||
|
width: 52px;
|
||||||
|
height: 52px;
|
||||||
|
background-image: url("corner-ripple.png");
|
||||||
|
}
|
||||||
|
@ -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() {
|
_onHotCornerEntered : function() {
|
||||||
if (!this._hotCornerEntered) {
|
if (!this._hotCornerEntered) {
|
||||||
this._hotCornerEntered = true;
|
this._hotCornerEntered = true;
|
||||||
if (!Main.overview.animationInProgress) {
|
if (!Main.overview.animationInProgress) {
|
||||||
this._hotCornerActivationTime = Date.now() / 1000;
|
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();
|
Main.overview.toggle();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user