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

js: Use implicit animations for animatable properties

Browse Source 
We now have everything in place to replace Tweener for all animatable
properties with implicit animations, which has the following benefits:

 - they run entirely in C, while Tweener requires context switches
   to JS each frame

 - they are more reliable, as Tweener only detects when an animation
   is overwritten with another Tween, while Clutter considers any
   property change

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/22
This commit is contained in:
Florian Müllner
2018-07-20 21:46:19 +02:00
parent 007b6ca2e8
commit 0846238f69
38 changed files with 1004 additions and 998 deletions
Download Patch File Download Diff File Expand all files Collapse all files

309
js/ui/windowManager.js
View File

@ -414,15 +414,15 @@ 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 / 1000,
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() {
@ -430,12 +430,12 @@ var TilePreview = class {
return;
this._showing = false;
Tweener.addTween(this.actor,
{ opacity: 0,
time: WINDOW_ANIMATION_TIME / 1000,
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() {
@ -1137,15 +1137,13 @@ var WindowManager = class {
return;
let switchData = this._switchData;
this._switchData = null;
Tweener.addTween(switchData.container,
{ x: 0,
y: 0,
time: WINDOW_ANIMATION_TIME / 1000,
transition: 'easeOutQuad',
onComplete: this._finishWorkspaceSwitch,
onCompleteScope: this,
onCompleteParams: [switchData],
});
switchData.container.ease({
x: 0,
y: 0,
duration: WINDOW_ANIMATION_TIME,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => this._finishWorkspaceSwitch(switchData)
});
}
_actionSwitchWorkspace(action, direction) {
@ -1283,17 +1281,17 @@ var WindowManager = class {
this._minimizing.push(actor);
if (actor.meta_window.is_monitor_sized()) {
Tweener.addTween(actor,
{ opacity: 0,
time: MINIMIZE_WINDOW_ANIMATION_TIME / 1000,
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();
@ -1316,26 +1314,26 @@ var WindowManager = class {
yScale = 0;
}
Tweener.addTween(actor,
{ scale_x: xScale,
scale_y: yScale,
x: xDest,
y: yDest,
time: MINIMIZE_WINDOW_ANIMATION_TIME / 1000,
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);
@ -1364,17 +1362,17 @@ 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 / 1000,
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) {
@ -1398,26 +1396,26 @@ 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 / 1000,
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);
@ -1483,15 +1481,15 @@ 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 / 1000,
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;
@ -1501,20 +1499,20 @@ 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 / 1000,
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
@ -1534,7 +1532,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;
@ -1652,19 +1650,19 @@ 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 / 1000,
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:
@ -1674,19 +1672,19 @@ 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 / 1000,
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);
@ -1696,7 +1694,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;
@ -1740,19 +1738,14 @@ 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 / 1000,
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:
@ -1762,22 +1755,17 @@ 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 / 1000,
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);
@ -1982,7 +1970,6 @@ var WindowManager = class {
global.workspace_manager.get_active_workspace())
w.window.hide();
}
Tweener.removeTweens(switchData.container);
switchData.container.destroy();
switchData.movingWindowBin.destroy();
@ -2015,15 +2002,13 @@ var WindowManager = class {
xDest = -xDest;
yDest = -yDest;
Tweener.addTween(this._switchData.container,
{ x: xDest,
y: yDest,
time: WINDOW_ANIMATION_TIME / 1000,
transition: 'easeOutQuad',
onComplete: this._switchWorkspaceDone,
onCompleteScope: this,
onCompleteParams: [shellwm]
});
this._switchData.container.ease({
x: xDest,
y: yDest,
duration: WINDOW_ANIMATION_TIME,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => this._switchWorkspaceDone(shellwm)
});
}
_switchWorkspaceDone(shellwm) {