[gnome-shell/wip/fmuellner/ease-actors: 11/20] ripple: Split animation

[Florian Müllner <fmuellner src gnome org>]

commit b4b2445217f5b3ee1ad46f85129fb3d9abaa7dc0
Author: Florian Müllner <fmuellner gnome org>
Date:   Sat Jun 10 05:55:10 2017 +0200

    ripple: Split animation
    
    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

 js/ui/ripples.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)
---
diff --git a/js/ui/ripples.js b/js/ui/ripples.js
index 1ff424cba..cbdfaaf7f 100644
--- a/js/ui/ripples.js
+++ b/js/ui/ripples.js
@@ -39,25 +39,26 @@ var Ripples = class Ripples {
         // 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
+        // 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._opacity = startOpacity;
         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);
 
-        Tweener.addTween(ripple, { _opacity: 0,
-                                   scale_x: finalScale,
+        Tweener.addTween(ripple, { opacity: 0,
+                                   delay: delay,
+                                   time: time,
+                                   transition: 'easeInQuad' });
+        Tweener.addTween(ripple, { scale_x: finalScale,
                                    scale_y: finalScale,
                                    delay: delay,
                                    time: time,
                                    transition: 'linear',
-                                   onUpdate: () => ripple.opacity = 255 * Math.sqrt(ripple._opacity),
                                    onComplete: () => ripple.visible = false });
     }