diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-27 15:07:22 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-27 15:07:22 +0000 |
commit | f9d480cfe50ca1d7a0f0b5a2b8bb9932962bfbe7 (patch) | |
tree | ce9e8db2d4e8799780fa72ae8f1953039373e2ee /js/ui/ripples.js | |
parent | Initial commit. (diff) | |
download | gnome-shell-upstream.tar.xz gnome-shell-upstream.zip |
Adding upstream version 3.38.6.upstream/3.38.6upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r-- | js/ui/ripples.js | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/js/ui/ripples.js b/js/ui/ripples.js new file mode 100644 index 0000000..f380622 --- /dev/null +++ b/js/ui/ripples.js @@ -0,0 +1,104 @@ +// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*- +/* exported Ripples */ + +const { Clutter, St } = imports.gi; + +// Shamelessly copied from the layout "hotcorner" ripples implementation +var Ripples = class Ripples { + constructor(px, py, styleClass) { + this._x = 0; + this._y = 0; + + this._px = px; + this._py = py; + + this._ripple1 = new St.BoxLayout({ style_class: styleClass, + opacity: 0, + can_focus: false, + reactive: false, + visible: false }); + this._ripple1.set_pivot_point(px, py); + + this._ripple2 = new St.BoxLayout({ style_class: styleClass, + opacity: 0, + can_focus: false, + reactive: false, + visible: false }); + this._ripple2.set_pivot_point(px, py); + + this._ripple3 = new St.BoxLayout({ style_class: styleClass, + opacity: 0, + can_focus: false, + reactive: false, + visible: false }); + this._ripple3.set_pivot_point(px, py); + } + + destroy() { + this._ripple1.destroy(); + this._ripple2.destroy(); + this._ripple3.destroy(); + } + + _animRipple(ripple, delay, duration, startScale, startOpacity, finalScale) { + // 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 a separate + // tween to give a non-linear curve to the fade-away and make + // it more visible in the middle section. + + ripple.x = this._x; + ripple.y = this._y; + ripple.visible = true; + ripple.opacity = 255 * Math.sqrt(startOpacity); + ripple.scale_x = ripple.scale_y = startScale; + ripple.set_translation(-this._px * ripple.width, -this._py * ripple.height, 0.0); + + ripple.ease({ + opacity: 0, + delay, + duration, + mode: Clutter.AnimationMode.EASE_IN_QUAD, + }); + ripple.ease({ + scale_x: finalScale, + scale_y: finalScale, + delay, + duration, + mode: Clutter.AnimationMode.LINEAR, + onComplete: () => (ripple.visible = false), + }); + } + + addTo(stage) { + if (this._stage !== undefined) + throw new Error('Ripples already added'); + + this._stage = stage; + this._stage.add_actor(this._ripple1); + this._stage.add_actor(this._ripple2); + this._stage.add_actor(this._ripple3); + } + + playAnimation(x, y) { + if (this._stage === undefined) + throw new Error('Ripples not added'); + + this._x = x; + this._y = y; + + this._stage.set_child_above_sibling(this._ripple1, null); + this._stage.set_child_above_sibling(this._ripple2, this._ripple1); + this._stage.set_child_above_sibling(this._ripple3, this._ripple2); + + // 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 + this._animRipple(this._ripple1, 0, 830, 0.25, 1.0, 1.5); + this._animRipple(this._ripple2, 50, 1000, 0.0, 0.7, 1.25); + this._animRipple(this._ripple3, 350, 1000, 0.0, 0.3, 1); + } +}; |