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

unlockDialog: Tweak transition animation

Browse Source 
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
This commit is contained in:
Florian Müllner 2020-02-02 10:43:55 +01:00 committed by Georges Basile Stavracas Neto
parent a0db95e00f
commit 6577a295da
1 changed files with 32 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
js/ui/unlockDialog.js
View File

@ -17,6 +17,8 @@ const IDLE_TIMEOUT = 2 * 60;
const SCREENSAVER_SCHEMA = 'org.gnome.desktop.screensaver'; const SCREENSAVER_SCHEMA = 'org.gnome.desktop.screensaver';
const CROSSFADE_TIME = 300; const CROSSFADE_TIME = 300;
const FADE_OUT_TRANSLATION = 200;
const FADE_OUT_SCALE = 0.3;
const BLUR_BRIGHTNESS = 0.55; const BLUR_BRIGHTNESS = 0.55;
const BLUR_SIGMA = 60; const BLUR_SIGMA = 60;
@ -448,9 +450,11 @@ var UnlockDialog = GObject.registerClass({
let stack = new Shell.Stack(); let stack = new Shell.Stack();
this._promptBox = new St.BoxLayout({ vertical: true }); this._promptBox = new St.BoxLayout({ vertical: true });
this._promptBox.set_pivot_point(0.5, 0.5);
stack.add_child(this._promptBox); stack.add_child(this._promptBox);
this._clock = new Clock(); this._clock = new Clock();
this._clock.set_pivot_point(0.5, 0.5);
stack.add_child(this._clock); stack.add_child(this._clock);
this._showClock(); this._showClock();
@ -577,8 +581,13 @@ var UnlockDialog = GObject.registerClass({
this._activePage = this._clock; this._activePage = this._clock;
this._clock.show(); this._clock.show();
const { scaleFactor } = St.ThemeContext.get_for_stage(global.stage);
this._promptBox.ease({ this._promptBox.ease({
opacity: 0, opacity: 0,
scale_x: FADE_OUT_SCALE,
scale_y: FADE_OUT_SCALE,
translation_y: FADE_OUT_TRANSLATION * scaleFactor,
duration: CROSSFADE_TIME, duration: CROSSFADE_TIME,
mode: Clutter.AnimationMode.EASE_OUT_QUAD, mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => { 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({ this._clock.ease({
opacity: 255, opacity: 255,
scale_x: 1,
scale_y: 1,
translation_y: 0,
duration: CROSSFADE_TIME, duration: CROSSFADE_TIME,
mode: Clutter.AnimationMode.EASE_OUT_QUAD, mode: Clutter.AnimationMode.EASE_OUT_QUAD,
}); });
@ -603,8 +621,19 @@ var UnlockDialog = GObject.registerClass({
this._activePage = this._promptBox; this._activePage = this._promptBox;
this._promptBox.show(); 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({ this._clock.ease({
opacity: 0, opacity: 0,
scale_x: FADE_OUT_SCALE,
scale_y: FADE_OUT_SCALE,
translation_y: -FADE_OUT_TRANSLATION * scaleFactor,
duration: CROSSFADE_TIME, duration: CROSSFADE_TIME,
mode: Clutter.AnimationMode.EASE_OUT_QUAD, mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => this._clock.hide(), onComplete: () => this._clock.hide(),
@ -612,6 +641,9 @@ var UnlockDialog = GObject.registerClass({
this._promptBox.ease({ this._promptBox.ease({
opacity: 255, opacity: 255,
scale_x: 1,
scale_y: 1,
translation_y: 0,
duration: CROSSFADE_TIME, duration: CROSSFADE_TIME,
mode: Clutter.AnimationMode.EASE_OUT_QUAD, mode: Clutter.AnimationMode.EASE_OUT_QUAD,
}); });