[gnome-shell/wip/fmuellner/ease-wm-animations: 5/5] windowManager: Use easing for window animations
- From: Florian Müllner <fmuellner src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell/wip/fmuellner/ease-wm-animations: 5/5] windowManager: Use easing for window animations
- Date: Wed, 15 May 2019 22:16:10 +0000 (UTC)
commit 253d234b50076fb4324c189bbce88fa270aa028f
Author: Florian Müllner <fmuellner gnome org>
Date: Fri Jul 20 21:46:19 2018 +0200
windowManager: Use easing for window animations
js/ui/windowManager.js | 343 +++++++++++++++++++++++++------------------------
1 file changed, 175 insertions(+), 168 deletions(-)
---
diff --git a/js/ui/windowManager.js b/js/ui/windowManager.js
index e63fad058..b27b943d5 100644
--- a/js/ui/windowManager.js
+++ b/js/ui/windowManager.js
@@ -11,7 +11,6 @@ const WorkspaceSwitcherPopup = imports.ui.workspaceSwitcherPopup;
const InhibitShortcutsDialog = imports.ui.inhibitShortcutsDialog;
const Main = imports.ui.main;
const ModalDialog = imports.ui.modalDialog;
-const Tweener = imports.ui.tweener;
const WindowMenu = imports.ui.windowMenu;
const PadOsd = imports.ui.padOsd;
const EdgeDragAction = imports.ui.edgeDragAction;
@@ -21,12 +20,12 @@ const SwitchMonitor = imports.ui.switchMonitor;
const { loadInterfaceXML } = imports.misc.fileUtils;
var SHELL_KEYBINDINGS_SCHEMA = 'org.gnome.shell.keybindings';
-var MINIMIZE_WINDOW_ANIMATION_TIME = 0.2;
-var SHOW_WINDOW_ANIMATION_TIME = 0.15;
-var DIALOG_SHOW_WINDOW_ANIMATION_TIME = 0.1;
-var DESTROY_WINDOW_ANIMATION_TIME = 0.15;
-var DIALOG_DESTROY_WINDOW_ANIMATION_TIME = 0.1;
-var WINDOW_ANIMATION_TIME = 0.25;
+var MINIMIZE_WINDOW_ANIMATION_TIME = 200; // ms
+var SHOW_WINDOW_ANIMATION_TIME = 150; // ms
+var DIALOG_SHOW_WINDOW_ANIMATION_TIME = 100; // ms
+var DESTROY_WINDOW_ANIMATION_TIME = 150; // ms
+var DIALOG_DESTROY_WINDOW_ANIMATION_TIME = 100; // ms
+var WINDOW_ANIMATION_TIME = 250; // ms
var DIM_BRIGHTNESS = -0.3;
var DIM_TIME = 500; // ms
var UNDIM_TIME = 250; // ms
@@ -441,15 +440,16 @@ var TilePreview = class {
this._showing = true;
this.actor.show();
- Tweener.addTween(this.actor,
- { x: tileRect.x,
- y: tileRect.y,
- width: tileRect.width,
- height: tileRect.height,
- opacity: 255,
- time: WINDOW_ANIMATION_TIME,
- transition: 'easeOutQuad'
- });
+ this.actor.ease({
+ x: tileRect.x,
+ y: tileRect.y,
+ width: tileRect.width,
+ height: tileRect.height,
+ opacity: 255
+ }, {
+ duration: WINDOW_ANIMATION_TIME,
+ mode: Clutter.AnimationMode.EASE_OUT_QUAD
+ });
}
hide() {
@@ -457,12 +457,13 @@ var TilePreview = class {
return;
this._showing = false;
- Tweener.addTween(this.actor,
- { opacity: 0,
- time: WINDOW_ANIMATION_TIME,
- transition: 'easeOutQuad',
- onComplete: this._reset.bind(this)
- });
+ this.actor.ease({
+ opacity: 0
+ }, {
+ duration: WINDOW_ANIMATION_TIME,
+ mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+ onComplete: () => this._reset()
+ });
}
_reset() {
@@ -1164,15 +1165,16 @@ var WindowManager = class {
return;
let switchData = this._switchData;
this._switchData = null;
- Tweener.addTween(switchData.container,
- { x: 0,
- y: 0,
- time: WINDOW_ANIMATION_TIME,
- transition: 'easeOutQuad',
- onComplete: this._finishWorkspaceSwitch,
- onCompleteScope: this,
- onCompleteParams: [switchData],
- });
+ switchData.container.ease({
+ x: 0,
+ y: 0
+ }, {
+ time: WINDOW_ANIMATION_TIME,
+ mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+ onComplete: () => {
+ this._finishWorkspaceSwitch(switchData);
+ }
+ });
}
_actionSwitchWorkspace(action, direction) {
@@ -1342,17 +1344,18 @@ var WindowManager = class {
this._minimizing.push(actor);
if (actor.meta_window.is_monitor_sized()) {
- Tweener.addTween(actor,
- { opacity: 0,
- time: MINIMIZE_WINDOW_ANIMATION_TIME,
- transition: 'easeOutQuad',
- onComplete: this._minimizeWindowDone,
- onCompleteScope: this,
- onCompleteParams: [shellwm, actor],
- onOverwrite: this._minimizeWindowOverwritten,
- onOverwriteScope: this,
- onOverwriteParams: [shellwm, actor]
- });
+ actor.ease({
+ opacity: 0
+ }, {
+ duration: MINIMIZE_WINDOW_ANIMATION_TIME,
+ mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+ onStopped: isFinished => {
+ if (isFinished)
+ this._minimizeWindowDone(shellwm, actor);
+ else
+ this._minimizeWindowOverwritten(shellwm, actor);
+ },
+ });
} else {
let xDest, yDest, xScale, yScale;
let [success, geom] = actor.meta_window.get_icon_geometry();
@@ -1375,26 +1378,27 @@ var WindowManager = class {
yScale = 0;
}
- Tweener.addTween(actor,
- { scale_x: xScale,
- scale_y: yScale,
- x: xDest,
- y: yDest,
- time: MINIMIZE_WINDOW_ANIMATION_TIME,
- transition: 'easeInExpo',
- onComplete: this._minimizeWindowDone,
- onCompleteScope: this,
- onCompleteParams: [shellwm, actor],
- onOverwrite: this._minimizeWindowOverwritten,
- onOverwriteScope: this,
- onOverwriteParams: [shellwm, actor]
- });
+ actor.ease({
+ scale_x: xScale,
+ scale_y: yScale,
+ x: xDest,
+ y: yDest
+ }, {
+ duration: MINIMIZE_WINDOW_ANIMATION_TIME,
+ mode: Clutter.AnimationMode.EASE_IN_EXPO,
+ onStopped: isFinished => {
+ if (isFinished)
+ this._minimizeWindowDone(shellwm, actor);
+ else
+ this._minimizeWindowOverwritten(shellwm, actor);
+ }
+ });
}
}
_minimizeWindowDone(shellwm, actor) {
if (this._removeEffect(this._minimizing, actor)) {
- Tweener.removeTweens(actor);
+ actor.remove_all_transitions();
actor.set_scale(1.0, 1.0);
actor.set_opacity(255);
actor.set_pivot_point(0, 0);
@@ -1423,17 +1427,18 @@ var WindowManager = class {
if (actor.meta_window.is_monitor_sized()) {
actor.opacity = 0;
actor.set_scale(1.0, 1.0);
- Tweener.addTween(actor,
- { opacity: 255,
- time: MINIMIZE_WINDOW_ANIMATION_TIME,
- transition: 'easeOutQuad',
- onComplete: this._unminimizeWindowDone,
- onCompleteScope: this,
- onCompleteParams: [shellwm, actor],
- onOverwrite: this._unminimizeWindowOverwritten,
- onOverwriteScope: this,
- onOverwriteParams: [shellwm, actor]
- });
+ actor.ease({
+ opacity: 255
+ }, {
+ duration: MINIMIZE_WINDOW_ANIMATION_TIME,
+ mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+ onStopped: isFinished => {
+ if (isFinished)
+ this._unminimizeWindowDone(shellwm, actor);
+ else
+ this._unminimizeWindowOverwritten(shellwm, actor);
+ }
+ });
} else {
let [success, geom] = actor.meta_window.get_icon_geometry();
if (success) {
@@ -1457,26 +1462,27 @@ var WindowManager = class {
let [xDest, yDest] = [rect.x, rect.y];
actor.show();
- Tweener.addTween(actor,
- { scale_x: 1.0,
- scale_y: 1.0,
- x: xDest,
- y: yDest,
- time: MINIMIZE_WINDOW_ANIMATION_TIME,
- transition: 'easeInExpo',
- onComplete: this._unminimizeWindowDone,
- onCompleteScope: this,
- onCompleteParams: [shellwm, actor],
- onOverwrite: this._unminimizeWindowOverwritten,
- onOverwriteScope: this,
- onOverwriteParams: [shellwm, actor]
- });
+ actor.ease({
+ scale_x: 1,
+ scale_y: 1,
+ x: xDest,
+ y: yDest
+ }, {
+ duration: MINIMIZE_WINDOW_ANIMATION_TIME,
+ mode: Clutter.AnimationMode.EASE_IN_EXPO,
+ onStopped: isFinished => {
+ if (isFinished)
+ this._unminimizeWindowDone(shellwm, actor);
+ else
+ this._unminimizeWindowOverwritten(shellwm, actor);
+ }
+ });
}
}
_unminimizeWindowDone(shellwm, actor) {
if (this._removeEffect(this._unminimizing, actor)) {
- Tweener.removeTweens(actor);
+ actor.remove_all_transitions();
actor.set_scale(1.0, 1.0);
actor.set_opacity(255);
actor.set_pivot_point(0, 0);
@@ -1542,15 +1548,16 @@ var WindowManager = class {
this._resizing.push(actor);
// Now scale and fade out the clone
- Tweener.addTween(actorClone,
- { x: targetRect.x,
- y: targetRect.y,
- scale_x: scaleX,
- scale_y: scaleY,
- opacity: 0,
- time: WINDOW_ANIMATION_TIME,
- transition: 'easeOutQuad'
- });
+ actorClone.ease({
+ x: targetRect.x,
+ y: targetRect.y,
+ scale_x: scaleX,
+ scale_y: scaleY,
+ opacity: 0
+ }, {
+ duration: WINDOW_ANIMATION_TIME,
+ mode: Clutter.AnimationMode.EASE_OUT_QUAD
+ });
actor.translation_x = -targetRect.x + sourceRect.x;
actor.translation_y = -targetRect.y + sourceRect.y;
@@ -1560,20 +1567,21 @@ var WindowManager = class {
actor.scale_y = 1 / scaleY;
// Scale it to its actual new size
- Tweener.addTween(actor,
- { scale_x: 1.0,
- scale_y: 1.0,
- translation_x: 0,
- translation_y: 0,
- time: WINDOW_ANIMATION_TIME,
- transition: 'easeOutQuad',
- onComplete: this._sizeChangeWindowDone,
- onCompleteScope: this,
- onCompleteParams: [shellwm, actor],
- onOverwrite: this._sizeChangeWindowOverwritten,
- onOverwriteScope: this,
- onOverwriteParams: [shellwm, actor]
- });
+ actor.ease({
+ scale_x: 1,
+ scale_y: 1,
+ translation_x: 0,
+ translation_y: 0
+ }, {
+ duration: WINDOW_ANIMATION_TIME,
+ mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+ onStopped: isFinished => {
+ if (isFinished)
+ this._sizeChangeWindowDone(shellwm, actor);
+ else
+ this._sizeChangeWindowOverwritten(shellwm, actor);
+ }
+ });
// Now unfreeze actor updates, to get it to the new size.
// It's important that we don't wait until the animation is completed to
@@ -1593,7 +1601,7 @@ var WindowManager = class {
_sizeChangeWindowDone(shellwm, actor) {
if (this._removeEffect(this._resizing, actor)) {
- Tweener.removeTweens(actor);
+ actor.remove_all_transitions();
actor.scale_x = 1.0;
actor.scale_y = 1.0;
actor.translation_x = 0;
@@ -1698,19 +1706,20 @@ var WindowManager = class {
actor.show();
this._mapping.push(actor);
- Tweener.addTween(actor,
- { opacity: 255,
- scale_x: 1,
- scale_y: 1,
- time: SHOW_WINDOW_ANIMATION_TIME,
- transition: 'easeOutExpo',
- onComplete: this._mapWindowDone,
- onCompleteScope: this,
- onCompleteParams: [shellwm, actor],
- onOverwrite: this._mapWindowOverwrite,
- onOverwriteScope: this,
- onOverwriteParams: [shellwm, actor]
- });
+ actor.ease({
+ opacity: 255,
+ scale_x: 1,
+ scale_y: 1
+ }, {
+ duration: SHOW_WINDOW_ANIMATION_TIME,
+ mode: Clutter.AnimationMode.EASE_OUT_EXPO,
+ onStopped: isFinished => {
+ if (isFinished)
+ this._mapWindowDone(shellwm, actor);
+ else
+ this._mapWindowOverwrite(shellwm, actor);
+ }
+ });
break;
case Meta.WindowType.MODAL_DIALOG:
case Meta.WindowType.DIALOG:
@@ -1720,19 +1729,20 @@ var WindowManager = class {
actor.show();
this._mapping.push(actor);
- Tweener.addTween(actor,
- { opacity: 255,
- scale_x: 1,
- scale_y: 1,
- time: DIALOG_SHOW_WINDOW_ANIMATION_TIME,
- transition: 'easeOutQuad',
- onComplete: this._mapWindowDone,
- onCompleteScope: this,
- onCompleteParams: [shellwm, actor],
- onOverwrite: this._mapWindowOverwrite,
- onOverwriteScope: this,
- onOverwriteParams: [shellwm, actor]
- });
+ actor.ease({
+ opacity: 255,
+ scale_x: 1,
+ scale_y: 1
+ }, {
+ duration: DIALOG_SHOW_WINDOW_ANIMATION_TIME,
+ mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+ onStopped: isFinished => {
+ if (isFinished)
+ this._mapWindowDone(shellwm, actor);
+ else
+ this._mapWindowOverwrite(shellwm, actor);
+ }
+ });
break;
default:
shellwm.completed_map(actor);
@@ -1742,7 +1752,7 @@ var WindowManager = class {
_mapWindowDone(shellwm, actor) {
if (this._removeEffect(this._mapping, actor)) {
- Tweener.removeTweens(actor);
+ actor.remove_all_transitions();
actor.opacity = 255;
actor.set_pivot_point(0, 0);
actor.scale_y = 1;
@@ -1786,19 +1796,17 @@ var WindowManager = class {
actor.set_pivot_point(0.5, 0.5);
this._destroying.push(actor);
- Tweener.addTween(actor,
- { opacity: 0,
- scale_x: 0.8,
- scale_y: 0.8,
- time: DESTROY_WINDOW_ANIMATION_TIME,
- transition: 'easeOutQuad',
- onComplete: this._destroyWindowDone,
- onCompleteScope: this,
- onCompleteParams: [shellwm, actor],
- onOverwrite: this._destroyWindowDone,
- onOverwriteScope: this,
- onOverwriteParams: [shellwm, actor]
- });
+ actor.ease({
+ opacity: 0,
+ scale_x: 0.8,
+ scale_y: 0.8
+ }, {
+ duration: DESTROY_WINDOW_ANIMATION_TIME,
+ mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+ onStopped: () => {
+ this._destroyWindowDone(shellwm, actor);
+ }
+ });
break;
case Meta.WindowType.MODAL_DIALOG:
case Meta.WindowType.DIALOG:
@@ -1808,22 +1816,20 @@ var WindowManager = class {
if (window.is_attached_dialog()) {
let parent = window.get_transient_for();
actor._parentDestroyId = parent.connect('unmanaged', () => {
- Tweener.removeTweens(actor);
+ actor.remove_all_transitions();
this._destroyWindowDone(shellwm, actor);
});
}
- Tweener.addTween(actor,
- { scale_y: 0,
- time: DIALOG_DESTROY_WINDOW_ANIMATION_TIME,
- transition: 'easeOutQuad',
- onComplete: this._destroyWindowDone,
- onCompleteScope: this,
- onCompleteParams: [shellwm, actor],
- onOverwrite: this._destroyWindowDone,
- onOverwriteScope: this,
- onOverwriteParams: [shellwm, actor]
- });
+ actor.ease({
+ scale_y: 0
+ }, {
+ duration: DIALOG_DESTROY_WINDOW_ANIMATION_TIME,
+ mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+ onStopped: () => {
+ this._destroyWindowDone(shellwm, actor);
+ }
+ });
break;
default:
shellwm.completed_destroy(actor);
@@ -2061,15 +2067,16 @@ var WindowManager = class {
xDest = -xDest;
yDest = -yDest;
- Tweener.addTween(this._switchData.container,
- { x: xDest,
- y: yDest,
- time: WINDOW_ANIMATION_TIME,
- transition: 'easeOutQuad',
- onComplete: this._switchWorkspaceDone,
- onCompleteScope: this,
- onCompleteParams: [shellwm]
- });
+ this._switchData.container.ease({
+ x: xDest,
+ y: yDest
+ }, {
+ time: WINDOW_ANIMATION_TIME,
+ mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+ onComplete: () => {
+ this._switchWorkspaceDone(shellwm);
+ }
+ });
}
_switchWorkspaceDone(shellwm) {
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
