[gnome-shell] unlockDialog: Tweak transition animation

[Georges Basile Stavracas Neto <gbsneto src gnome org>]

commit 6577a295daeb210aa98ad9a85952e25d64e050e9
Author: Florian Müllner <fmuellner gnome org>
Date:   Sun Feb 2 10:43:55 2020 +0100

    unlockDialog: Tweak transition animation
    
    The current transition between clock and auth prompt uses a simple
    crossfade.
    
    "What kind of spatial model is that?!"
                                      T.B.
    
    Root the transition a bit more by adding translation and scale to
    the animation.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/972

 js/ui/unlockDialog.js | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
---
diff --git a/js/ui/unlockDialog.js b/js/ui/unlockDialog.js
index deee9b3153..797e55e637 100644
--- a/js/ui/unlockDialog.js
+++ b/js/ui/unlockDialog.js
@@ -17,6 +17,8 @@ const IDLE_TIMEOUT = 2 * 60;
 const SCREENSAVER_SCHEMA = 'org.gnome.desktop.screensaver';
 
 const CROSSFADE_TIME = 300;
+const FADE_OUT_TRANSLATION = 200;
+const FADE_OUT_SCALE = 0.3;
 
 const BLUR_BRIGHTNESS = 0.55;
 const BLUR_SIGMA = 60;
@@ -448,9 +450,11 @@ var UnlockDialog = GObject.registerClass({
         let stack = new Shell.Stack();
 
         this._promptBox = new St.BoxLayout({ vertical: true });
+        this._promptBox.set_pivot_point(0.5, 0.5);
         stack.add_child(this._promptBox);
 
         this._clock = new Clock();
+        this._clock.set_pivot_point(0.5, 0.5);
         stack.add_child(this._clock);
         this._showClock();
 
@@ -577,8 +581,13 @@ var UnlockDialog = GObject.registerClass({
         this._activePage = this._clock;
         this._clock.show();
 
+        const { scaleFactor } = St.ThemeContext.get_for_stage(global.stage);
+
         this._promptBox.ease({
             opacity: 0,
+            scale_x: FADE_OUT_SCALE,
+            scale_y: FADE_OUT_SCALE,
+            translation_y: FADE_OUT_TRANSLATION * scaleFactor,
             duration: CROSSFADE_TIME,
             mode: Clutter.AnimationMode.EASE_OUT_QUAD,
             onComplete: () => {
@@ -587,8 +596,17 @@ var UnlockDialog = GObject.registerClass({
             },
         });
 
+        this._clock.set({
+            scale_x: FADE_OUT_SCALE,
+            scale_y: FADE_OUT_SCALE,
+            translation_y: -FADE_OUT_TRANSLATION * scaleFactor,
+        });
+
         this._clock.ease({
             opacity: 255,
+            scale_x: 1,
+            scale_y: 1,
+            translation_y: 0,
             duration: CROSSFADE_TIME,
             mode: Clutter.AnimationMode.EASE_OUT_QUAD,
         });
@@ -603,8 +621,19 @@ var UnlockDialog = GObject.registerClass({
         this._activePage = this._promptBox;
         this._promptBox.show();
 
+        const { scaleFactor } = St.ThemeContext.get_for_stage(global.stage);
+
+        this._promptBox.set({
+            scale_x: FADE_OUT_SCALE,
+            scale_y: FADE_OUT_SCALE,
+            translation_y: FADE_OUT_TRANSLATION * scaleFactor,
+        });
+
         this._clock.ease({
             opacity: 0,
+            scale_x: FADE_OUT_SCALE,
+            scale_y: FADE_OUT_SCALE,
+            translation_y: -FADE_OUT_TRANSLATION * scaleFactor,
             duration: CROSSFADE_TIME,
             mode: Clutter.AnimationMode.EASE_OUT_QUAD,
             onComplete: () => this._clock.hide(),
@@ -612,6 +641,9 @@ var UnlockDialog = GObject.registerClass({
 
         this._promptBox.ease({
             opacity: 255,
+            scale_x: 1,
+            scale_y: 1,
+            translation_y: 0,
             duration: CROSSFADE_TIME,
             mode: Clutter.AnimationMode.EASE_OUT_QUAD,
         });