From 6577a295daeb210aa98ad9a85952e25d64e050e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20M=C3=BCllner?= <fmuellner@gnome.org>
Date: Sun, 2 Feb 2020 10:43:55 +0100
Subject: [PATCH] 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 deee9b315..797e55e63 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,
         });