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

ripple: Split animation

Browse Source 
Similar to the previous patch, splitting the existing tween into two
will allow us to use implicit animations.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/22
This commit is contained in:
Florian Müllner 2017-06-10 05:55:10 +02:00
parent 749f52fc8b
commit abe012b9fc
1 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
js/ui/ripples.js
View File

@ -39,25 +39,26 @@ var Ripples = class Ripples {
// 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
// linearly to zero it fades away too quickly, so we use Tweener's // linearly to zero it fades away too quickly, so we use a separate
// 'onUpdate' to give a non-linear curve to the fade-away and make // tween 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.
ripple.x = this._x; ripple.x = this._x;
ripple.y = this._y; ripple.y = this._y;
ripple._opacity = startOpacity;
ripple.visible = true; ripple.visible = true;
ripple.opacity = 255 * Math.sqrt(startOpacity); ripple.opacity = 255 * Math.sqrt(startOpacity);
ripple.scale_x = ripple.scale_y = startScale; ripple.scale_x = ripple.scale_y = startScale;
ripple.set_translation( - this._px * ripple.width, - this._py * ripple.height, 0.0); ripple.set_translation( - this._px * ripple.width, - this._py * ripple.height, 0.0);
Tweener.addTween(ripple, { _opacity: 0, Tweener.addTween(ripple, { opacity: 0,
scale_x: finalScale, delay: delay,
time: time,
transition: 'easeInQuad' });
Tweener.addTween(ripple, { scale_x: finalScale,
scale_y: finalScale, scale_y: finalScale,
delay: delay, delay: delay,
time: time, time: time,
transition: 'linear', transition: 'linear',
onUpdate: () => ripple.opacity = 255 * Math.sqrt(ripple._opacity),
onComplete: () => ripple.visible = false }); onComplete: () => ripple.visible = false });
} }