brl/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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
js/gdm/authPrompt.js
View File

@ -8,7 +8,6 @@ const Batch = imports.gdm.batch;
const GdmUtil = imports.gdm.util; const GdmUtil = imports.gdm.util;
const Params = imports.misc.params; const Params = imports.misc.params;
const ShellEntry = imports.ui.shellEntry; const ShellEntry = imports.ui.shellEntry;
const Tweener = imports.ui.tweener;
const UserWidget = imports.ui.userWidget; const UserWidget = imports.ui.userWidget;
var DEFAULT_BUTTON_WELL_ICON_SIZE = 16; var DEFAULT_BUTTON_WELL_ICON_SIZE = 16;
@ -267,7 +266,7 @@ var AuthPrompt = class {
let oldActor = this._defaultButtonWellActor; let oldActor = this._defaultButtonWellActor;
if (oldActor) if (oldActor)
Tweener.removeTweens(oldActor); oldActor.remove_all_transitions();
let wasSpinner; let wasSpinner;
if (oldActor == this._spinner.actor) if (oldActor == this._spinner.actor)
@ -290,11 +289,11 @@ var AuthPrompt = class {
this._spinner.stop(); this._spinner.stop();
} }
} else { } else {
Tweener.addTween(oldActor, oldActor.ease({
{ opacity: 0, opacity: 0,
time: DEFAULT_BUTTON_WELL_ANIMATION_TIME / 1000, duration: DEFAULT_BUTTON_WELL_ANIMATION_TIME,
delay: DEFAULT_BUTTON_WELL_ANIMATION_DELAY / 1000, delay: DEFAULT_BUTTON_WELL_ANIMATION_DELAY,
transition: 'linear', mode: Clutter.AnimationMode.LINEAR,
onComplete: () => { onComplete: () => {
if (wasSpinner) { if (wasSpinner) {
if (this._spinner) if (this._spinner)
@ -312,11 +311,12 @@ var AuthPrompt = class {
if (!animate) if (!animate)
actor.opacity = 255; actor.opacity = 255;
else else
Tweener.addTween(actor, actor.ease({
{ opacity: 255, opacity: 255,
time: DEFAULT_BUTTON_WELL_ANIMATION_TIME / 1000, duration: DEFAULT_BUTTON_WELL_ANIMATION_TIME,
delay: DEFAULT_BUTTON_WELL_ANIMATION_DELAY / 1000, delay: DEFAULT_BUTTON_WELL_ANIMATION_DELAY,
transition: 'linear' }); mode: Clutter.AnimationMode.LINEAR
});
} }
this._defaultButtonWellActor = actor; this._defaultButtonWellActor = actor;
@ -365,11 +365,11 @@ var AuthPrompt = class {
_fadeOutMessage() { _fadeOutMessage() {
if (this._message.opacity == 0) if (this._message.opacity == 0)
return; return;
Tweener.removeTweens(this._message); this._message.remove_all_transitions();
Tweener.addTween(this._message, this._message.ease({
{ opacity: 0, opacity: 0,
time: MESSAGE_FADE_OUT_ANIMATION_TIME / 1000, duration: MESSAGE_FADE_OUT_ANIMATION_TIME,
transition: 'easeOutQuad' mode: Clutter.AnimationMode.EASE_OUT_QUAD
}); });
} }
@ -385,7 +385,7 @@ var AuthPrompt = class {
this._message.remove_style_class_name('login-dialog-message-hint'); this._message.remove_style_class_name('login-dialog-message-hint');
if (message) { if (message) {
Tweener.removeTweens(this._message); this._message.remove_all_transitions();
this._message.text = message; this._message.text = message;
this._message.opacity = 255; this._message.opacity = 255;
} else { } else {

2
js/gdm/batch.js
View File

@ -20,7 +20,7 @@
* In order for transformation animations to look good, they need to be * In order for transformation animations to look good, they need to be
* incremental and have some order to them (e.g., fade out hidden items, * incremental and have some order to them (e.g., fade out hidden items,
* then shrink to close the void left over). Chaining animations in this way can * then shrink to close the void left over). Chaining animations in this way can
* be error-prone and wordy using just Tweener callbacks. * be error-prone and wordy using just ease() callbacks.
* *
* The classes in this file help with this: * The classes in this file help with this:
* *

51
js/gdm/loginDialog.js
View File

@ -759,14 +759,15 @@ var LoginDialog = GObject.registerClass({
_fadeInBannerView() { _fadeInBannerView() {
this._bannerView.show(); this._bannerView.show();
Tweener.addTween(this._bannerView, this._bannerView.ease({
{ opacity: 255, opacity: 255,
time: _FADE_ANIMATION_TIME / 1000, duration: _FADE_ANIMATION_TIME,
transition: 'easeOutQuad' }); mode: Clutter.AnimationMode.EASE_OUT_QUAD
});
} }
_hideBannerView() { _hideBannerView() {
Tweener.removeTweens(this._bannerView); this._bannerView.remove_all_transitions();
this._bannerView.opacity = 0; this._bannerView.opacity = 0;
this._bannerView.hide(); this._bannerView.hide();
} }
@ -859,10 +860,11 @@ var LoginDialog = GObject.registerClass({
return; return;
this._authPrompt.actor.opacity = 0; this._authPrompt.actor.opacity = 0;
this._authPrompt.actor.show(); this._authPrompt.actor.show();
Tweener.addTween(this._authPrompt.actor, this._authPrompt.actor.ease({
{ opacity: 255, opacity: 255,
time: _FADE_ANIMATION_TIME / 1000, duration: _FADE_ANIMATION_TIME,
transition: 'easeOutQuad' }); mode: Clutter.AnimationMode.EASE_OUT_QUAD
});
this._fadeInBannerView(); this._fadeInBannerView();
} }
@ -921,15 +923,16 @@ var LoginDialog = GObject.registerClass({
return; return;
this._bindOpacity(); this._bindOpacity();
Tweener.addTween(this, this.actor.ease({
{ opacity: 255, opacity: 255,
time: _FADE_ANIMATION_TIME / 1000, duration: _FADE_ANIMATION_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => { onComplete: () => {
if (this._authPrompt.verificationStatus != AuthPrompt.AuthPromptStatus.NOT_VERIFYING) if (this._authPrompt.verificationStatus != AuthPrompt.AuthPromptStatus.NOT_VERIFYING)
this._authPrompt.reset(); this._authPrompt.reset();
this._unbindOpacity(); this._unbindOpacity();
} }); }
});
} }
_gotGreeterSessionProxy(proxy) { _gotGreeterSessionProxy(proxy) {
@ -943,14 +946,15 @@ var LoginDialog = GObject.registerClass({
_startSession(serviceName) { _startSession(serviceName) {
this._bindOpacity(); this._bindOpacity();
Tweener.addTween(this, this.actor.ease({
{ opacity: 0, opacity: 0,
time: _FADE_ANIMATION_TIME / 1000, duration: _FADE_ANIMATION_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => { onComplete: () => {
this._greeter.call_start_session_when_ready_sync(serviceName, true, null); this._greeter.call_start_session_when_ready_sync(serviceName, true, null);
this._unbindOpacity(); this._unbindOpacity();
} }); }
});
} }
_onSessionOpened(client, serviceName) { _onSessionOpened(client, serviceName) {
@ -1223,10 +1227,11 @@ var LoginDialog = GObject.registerClass({
Main.pushModal(this, { actionMode: Shell.ActionMode.LOGIN_SCREEN }); Main.pushModal(this, { actionMode: Shell.ActionMode.LOGIN_SCREEN });
Tweener.addTween(this, this.ease({
{ opacity: 255, opacity: 255,
time: 1, duration: 1000,
transition: 'easeInQuad' }); mode: Clutter.AnimationMode.EASE_IN_QUAD
});
return true; return true;
} }

35
js/gdm/util.js
View File

@ -11,7 +11,6 @@ const OVirt = imports.gdm.oVirt;
const Main = imports.ui.main; const Main = imports.ui.main;
const Params = imports.misc.params; const Params = imports.misc.params;
const SmartcardManager = imports.misc.smartcardManager; const SmartcardManager = imports.misc.smartcardManager;
const Tweener = imports.ui.tweener;
var PASSWORD_SERVICE_NAME = 'gdm-password'; var PASSWORD_SERVICE_NAME = 'gdm-password';
var FINGERPRINT_SERVICE_NAME = 'gdm-fingerprint'; var FINGERPRINT_SERVICE_NAME = 'gdm-fingerprint';
@ -51,15 +50,15 @@ function fadeInActor(actor) {
actor.opacity = 0; actor.opacity = 0;
actor.set_height(0); actor.set_height(0);
Tweener.addTween(actor, actor.ease({
{ opacity: 255, opacity: 255,
height: naturalHeight, height: naturalHeight,
time: FADE_ANIMATION_TIME / 1000, duration: FADE_ANIMATION_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete() { onComplete: () => {
this.set_height(-1); this.set_height(-1);
hold.release(); hold.release();
}, }
}); });
return hold; return hold;
@ -73,16 +72,16 @@ function fadeOutActor(actor) {
} }
let hold = new Batch.Hold(); let hold = new Batch.Hold();
Tweener.addTween(actor, actor.ease({
{ opacity: 0, opacity: 0,
height: 0, height: 0,
time: FADE_ANIMATION_TIME / 1000, duration: FADE_ANIMATION_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete() { onComplete: () => {
this.hide(); this.hide();
this.set_height(-1); this.set_height(-1);
hold.release(); hold.release();
}, }
}); });
return hold; return hold;
} }
@ -103,11 +102,11 @@ function cloneAndFadeOutActor(actor) {
clone.set_position(x, y); clone.set_position(x, y);
let hold = new Batch.Hold(); let hold = new Batch.Hold();
Tweener.addTween(clone, clone.ease({
{ opacity: 0, opacity: 0,
time: CLONE_FADE_ANIMATION_TIME / 1000, duration: CLONE_FADE_ANIMATION_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete() { onComplete: () => {
clone.destroy(); clone.destroy();
hold.release(); hold.release();
} }

21
js/ui/altTab.js
View File

@ -7,7 +7,6 @@ const Mainloop = imports.mainloop;
const Main = imports.ui.main; const Main = imports.ui.main;
const SwitcherPopup = imports.ui.switcherPopup; const SwitcherPopup = imports.ui.switcherPopup;
const Tweener = imports.ui.tweener;
var APP_ICON_HOVER_TIMEOUT = 200; // milliseconds var APP_ICON_HOVER_TIMEOUT = 200; // milliseconds
@ -362,10 +361,10 @@ class AppSwitcherPopup extends SwitcherPopup.SwitcherPopup {
_destroyThumbnails() { _destroyThumbnails() {
let thumbnailsActor = this._thumbnails; let thumbnailsActor = this._thumbnails;
Tweener.addTween(thumbnailsActor, this._thumbnails.ease({
{ opacity: 0, opacity: 0,
time: THUMBNAIL_FADE_TIME / 1000, duration: THUMBNAIL_FADE_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => { onComplete: () => {
thumbnailsActor.destroy(); thumbnailsActor.destroy();
this.thumbnailsVisible = false; this.thumbnailsVisible = false;
@ -393,11 +392,13 @@ class AppSwitcherPopup extends SwitcherPopup.SwitcherPopup {
this._thumbnails.get_allocation_box(); this._thumbnails.get_allocation_box();
this._thumbnails.opacity = 0; this._thumbnails.opacity = 0;
Tweener.addTween(this._thumbnails, this._thumbnails.ease({
{ opacity: 255, opacity: 255,
time: THUMBNAIL_FADE_TIME / 1000, duration: THUMBNAIL_FADE_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => this.thumbnailsVisible = true onComplete: () => {
this.thumbnailsVisible = true;
}
}); });
this._switcherList._items[this._selectedIndex].add_accessible_state (Atk.StateType.EXPANDED); this._switcherList._items[this._selectedIndex].add_accessible_state (Atk.StateType.EXPANDED);

24
js/ui/animation.js
View File

@ -1,11 +1,9 @@
// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*- // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
/* exported Animation, AnimatedIcon, Spinner */ /* exported Animation, AnimatedIcon, Spinner */
const { GLib, Gio, St } = imports.gi; const { Clutter, GLib, Gio, St } = imports.gi;
const Mainloop = imports.mainloop; const Mainloop = imports.mainloop;
const Tweener = imports.ui.tweener;
var ANIMATED_ICON_UPDATE_TIMEOUT = 16; var ANIMATED_ICON_UPDATE_TIMEOUT = 16;
var SPINNER_ANIMATION_TIME = 300; var SPINNER_ANIMATION_TIME = 300;
var SPINNER_ANIMATION_DELAY = 1000; var SPINNER_ANIMATION_DELAY = 1000;
@ -138,15 +136,15 @@ var Spinner = class extends AnimatedIcon {
} }
play() { play() {
Tweener.removeTweens(this.actor); this.actor.remove_all_transitions();
if (this._animate) { if (this._animate) {
super.play(); super.play();
Tweener.addTween(this.actor, { this.actor.ease({
opacity: 255, opacity: 255,
delay: SPINNER_ANIMATION_DELAY / 1000, delay: SPINNER_ANIMATION_DELAY,
time: SPINNER_ANIMATION_TIME / 1000, duration: SPINNER_ANIMATION_TIME,
transition: 'linear' mode: Clutter.AnimationMode.LINEAR
}); });
} else { } else {
this.actor.opacity = 255; this.actor.opacity = 255;
@ -155,16 +153,14 @@ var Spinner = class extends AnimatedIcon {
} }
stop() { stop() {
Tweener.removeTweens(this.actor); this.actor.remove_all_transitions();
if (this._animate) { if (this._animate) {
Tweener.addTween(this.actor, { this.actor.ease({
opacity: 0, opacity: 0,
time: SPINNER_ANIMATION_TIME / 1000, time: SPINNER_ANIMATION_TIME,
transition: 'linear', transition: 'linear',
onComplete: () => { onComplete: () => super.stop()
super.stop();
}
}); });
} else { } else {
this.actor.opacity = 0; this.actor.opacity = 0;

44
js/ui/appDisplay.js
View File

@ -206,22 +206,24 @@ class BaseAppView {
} }
animateSwitch(animationDirection) { animateSwitch(animationDirection) {
Tweener.removeTweens(this.actor); this.actor.remove_all_transitions();
Tweener.removeTweens(this._grid); this._grid.remove_all_transitions();
let params = { time: VIEWS_SWITCH_TIME / 1000, let params = {
transition: 'easeOutQuad' }; duration: VIEWS_SWITCH_TIME,
mode: Clutter.AnimationMode.EASE_OUT_QUAD
};
if (animationDirection == IconGrid.AnimationDirection.IN) { if (animationDirection == IconGrid.AnimationDirection.IN) {
this.actor.show(); this.actor.show();
params.opacity = 255; params.opacity = 255;
params.delay = VIEWS_SWITCH_ANIMATION_DELAY / 1000; params.delay = VIEWS_SWITCH_ANIMATION_DELAY;
} else { } else {
params.opacity = 0; params.opacity = 0;
params.delay = 0; params.delay = 0;
params.onComplete = () => this.actor.hide(); params.onComplete = () => this.actor.hide();
} }
Tweener.addTween(this._grid, params); this._grid.ease(params);
} }
} }
Signals.addSignalMethods(BaseAppView.prototype); Signals.addSignalMethods(BaseAppView.prototype);
@ -439,13 +441,12 @@ var AllView = class AllView extends BaseAppView {
if (this._currentPopup && this._displayingPopup && if (this._currentPopup && this._displayingPopup &&
animationDirection == IconGrid.AnimationDirection.OUT) animationDirection == IconGrid.AnimationDirection.OUT)
Tweener.addTween(this._currentPopup.actor, this._currentPopup.actor.ease({
{ time: VIEWS_SWITCH_TIME / 1000,
transition: 'easeOutQuad',
opacity: 0, opacity: 0,
onComplete() { duration: VIEWS_SWITCH_TIME,
this.opacity = 255; mode: Clutter.AnimationMode.EASE_OUT_QUAD,
} }); onComplete: () => this.opacity = 255
});
if (animationDirection == IconGrid.AnimationDirection.OUT) if (animationDirection == IconGrid.AnimationDirection.OUT)
this._pageIndicators.animateIndicators(animationDirection); this._pageIndicators.animateIndicators(animationDirection);
@ -615,15 +616,16 @@ var AllView = class AllView extends BaseAppView {
_updateIconOpacities(folderOpen) { _updateIconOpacities(folderOpen) {
for (let id in this._items) { for (let id in this._items) {
let params, opacity; let opacity;
if (folderOpen && !this._items[id].actor.checked) if (folderOpen && !this._items[id].actor.checked)
opacity = INACTIVE_GRID_OPACITY; opacity = INACTIVE_GRID_OPACITY;
else else
opacity = 255; opacity = 255;
params = { opacity: opacity, this._items[id].actor.ease({
time: INACTIVE_GRID_OPACITY_ANIMATION_TIME / 1000, opacity: opacity,
transition: 'easeOutQuad' }; duration: INACTIVE_GRID_OPACITY_ANIMATION_TIME,
Tweener.addTween(this._items[id].actor, params); mode: Clutter.AnimationMode.EASE_OUT_QUAD
});
} }
} }
@ -831,7 +833,7 @@ var AppDisplay = class AppDisplay {
if (this._controls.mapped) if (this._controls.mapped)
return; return;
Tweener.removeTweens(this._controls); this._controls.remove_all_transitions();
this._controls.opacity = 255; this._controls.opacity = 255;
}); });
@ -897,10 +899,10 @@ var AppDisplay = class AppDisplay {
finalOpacity = 0; finalOpacity = 0;
} }
Tweener.addTween(this._controls, this._controls.ease({
{ time: IconGrid.ANIMATION_TIME_IN,
transition: 'easeInOutQuad',
opacity: finalOpacity, opacity: finalOpacity,
duration: IconGrid.ANIMATION_TIME_IN,
mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD
}); });
currentView.animate(animationDirection, onComplete); currentView.animate(animationDirection, onComplete);

13
js/ui/background.js
View File

@ -99,7 +99,6 @@ const Signals = imports.signals;
const LoginManager = imports.misc.loginManager; const LoginManager = imports.misc.loginManager;
const Main = imports.ui.main; const Main = imports.ui.main;
const Params = imports.misc.params; const Params = imports.misc.params;
const Tweener = imports.ui.tweener;
var DEFAULT_BACKGROUND_COLOR = Clutter.Color.from_pixel(0x2e3436ff); var DEFAULT_BACKGROUND_COLOR = Clutter.Color.from_pixel(0x2e3436ff);
@ -710,13 +709,11 @@ var BackgroundManager = class BackgroundManager {
this._newBackgroundActor = null; this._newBackgroundActor = null;
this.emit('changed'); this.emit('changed');
Tweener.addTween(oldBackgroundActor, oldBackgroundActor.ease({
{ opacity: 0, opacity: 0,
time: FADE_ANIMATION_TIME / 1000, duration: FADE_ANIMATION_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete() { onComplete: () => oldBackgroundActor.destroy()
oldBackgroundActor.destroy();
}
}); });
} }

20
js/ui/boxpointer.js
View File

@ -4,7 +4,6 @@
const { Clutter, GObject, Shell, St } = imports.gi; const { Clutter, GObject, Shell, St } = imports.gi;
const Main = imports.ui.main; const Main = imports.ui.main;
const Tweener = imports.ui.tweener;
var PopupAnimation = { var PopupAnimation = {
NONE: 0, NONE: 0,
@ -106,16 +105,18 @@ var BoxPointer = GObject.registerClass({
} }
} }
Tweener.addTween(this, { opacity: 255, this.ease({
opacity: 255,
translation_x: 0, translation_x: 0,
translation_y: 0, translation_y: 0,
transition: 'linear', duration: animationTime,
mode: Clutter.AnimationMode.LINEAR,
onComplete: () => { onComplete: () => {
this._unmuteInput(); this._unmuteInput();
if (onComplete) if (onComplete)
onComplete(); onComplete();
}, }
time: animationTime / 1000 }); });
} }
close(animate, onComplete) { close(animate, onComplete) {
@ -148,12 +149,13 @@ var BoxPointer = GObject.registerClass({
this._muteInput(); this._muteInput();
Tweener.removeTweens(this); this.remove_all_transitions();
Tweener.addTween(this, { opacity: fade ? 0 : 255, this.ease({
opacity: fade ? 0 : 255,
translation_x: translationX, translation_x: translationX,
translation_y: translationY, translation_y: translationY,
transition: 'linear', duration: animationTime,
time: animationTime / 1000, mode: Clutter.AnimationMode.LINEAR,
onComplete: () => { onComplete: () => {
this.hide(); this.hide();
this.opacity = 0; this.opacity = 0;

21
js/ui/closeDialog.js
View File

@ -5,7 +5,6 @@ const { Clutter, Gio, GLib, GObject, Meta, Shell } = imports.gi;
const Dialog = imports.ui.dialog; const Dialog = imports.ui.dialog;
const Main = imports.ui.main; const Main = imports.ui.main;
const Tweener = imports.ui.tweener;
var FROZEN_WINDOW_BRIGHTNESS = -0.3; var FROZEN_WINDOW_BRIGHTNESS = -0.3;
var DIALOG_TRANSITION_TIME = 150; var DIALOG_TRANSITION_TIME = 150;
@ -149,10 +148,10 @@ var CloseDialog = GObject.registerClass({
this._dialog.scale_y = 0; this._dialog.scale_y = 0;
this._dialog.set_pivot_point(0.5, 0.5); this._dialog.set_pivot_point(0.5, 0.5);
Tweener.addTween(this._dialog, this._dialog.ease({
{ scale_y: 1, scale_y: 1,
transition: 'linear', mode: Clutter.AnimationMode.LINEAR,
time: DIALOG_TRANSITION_TIME / 1000, duration: DIALOG_TRANSITION_TIME,
onComplete: this._onFocusChanged.bind(this) onComplete: this._onFocusChanged.bind(this)
}); });
} }
@ -176,13 +175,11 @@ var CloseDialog = GObject.registerClass({
this._dialog = null; this._dialog = null;
this._removeWindowEffect(); this._removeWindowEffect();
Tweener.addTween(dialog, dialog.ease({
{ scale_y: 0, scale_y: 0,
transition: 'linear', mode: Clutter.AnimationMode.LINEAR,
time: DIALOG_TRANSITION_TIME / 1000, duration: DIALOG_TRANSITION_TIME,
onComplete: () => { onComplete: () => dialog.destroy()
dialog.destroy();
}
}); });
} }

47
js/ui/dash.js
View File

@ -10,7 +10,6 @@ const AppFavorites = imports.ui.appFavorites;
const DND = imports.ui.dnd; const DND = imports.ui.dnd;
const IconGrid = imports.ui.iconGrid; const IconGrid = imports.ui.iconGrid;
const Main = imports.ui.main; const Main = imports.ui.main;
const Tweener = imports.ui.tweener;
var DASH_ANIMATION_TIME = 200; var DASH_ANIMATION_TIME = 200;
var DASH_ITEM_LABEL_SHOW_TIME = 150; var DASH_ITEM_LABEL_SHOW_TIME = 150;
@ -100,10 +99,10 @@ class DashItemContainer extends St.Widget {
x = stageX + this.get_width() + xOffset; x = stageX + this.get_width() + xOffset;
this.label.set_position(x, y); this.label.set_position(x, y);
Tweener.addTween(this.label, this.label.ease({
{ opacity: 255, opacity: 255,
time: DASH_ITEM_LABEL_SHOW_TIME / 1000, duration: DASH_ITEM_LABEL_SHOW_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD
}); });
} }
@ -113,13 +112,11 @@ class DashItemContainer extends St.Widget {
} }
hideLabel() { hideLabel() {
Tweener.addTween(this.label, this.label.ease({
{ opacity: 0, opacity: 0,
time: DASH_ITEM_LABEL_HIDE_TIME / 1000, duration: DASH_ITEM_LABEL_HIDE_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => { onComplete: () => this.label.hide()
this.label.hide();
}
}); });
} }
@ -138,12 +135,12 @@ class DashItemContainer extends St.Widget {
return; return;
let time = animate ? DASH_ANIMATION_TIME : 0; let time = animate ? DASH_ANIMATION_TIME : 0;
Tweener.addTween(this, this.ease({
{ scale_x: 1.0, scale_x: 1,
scale_y: 1.0, scale_y: 1,
opacity: 255, opacity: 255,
time: time / 1000, duration: time,
transition: 'easeOutQuad' mode: Clutter.AnimationMode.EASE_OUT_QUAD
}); });
} }
@ -156,12 +153,12 @@ class DashItemContainer extends St.Widget {
} }
this.animatingOut = true; this.animatingOut = true;
Tweener.addTween(this, this.ease({
{ scale_x: 0, scale_x: 0,
scale_y: 0, scale_y: 0,
opacity: 0, opacity: 0,
time: DASH_ANIMATION_TIME / 1000, duration: DASH_ANIMATION_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => this.destroy() onComplete: () => this.destroy()
}); });
} }
@ -612,11 +609,11 @@ var Dash = class Dash {
icon.icon.set_size(icon.icon.width * scale, icon.icon.set_size(icon.icon.width * scale,
icon.icon.height * scale); icon.icon.height * scale);
Tweener.addTween(icon.icon, icon.icon.ease({
{ width: targetWidth, width: targetWidth,
height: targetHeight, height: targetHeight,
time: DASH_ANIMATION_TIME / 1000, time: DASH_ANIMATION_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD
}); });
} }
} }

44
js/ui/dnd.js
View File

@ -429,19 +429,22 @@ var _Draggable = class _Draggable {
// to the final position because that tween would // to the final position because that tween would
// fight with updates as the user continues dragging // fight with updates as the user continues dragging
// the mouse; instead we do the position computations in // the mouse; instead we do the position computations in
// an onUpdate() function. // a ::new-frame handler.
Tweener.addTween(this._dragActor, this._dragActor.ease({
{ scale_x: scale * origScale, scale_x: scale * origScale,
scale_y: scale * origScale, scale_y: scale * origScale,
time: SCALE_ANIMATION_TIME / 1000, duration: SCALE_ANIMATION_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD
onUpdate: () => { });
this._dragActor.get_transition('scale-x').connect('new-frame', () => {
let currentScale = this._dragActor.scale_x / origScale; let currentScale = this._dragActor.scale_x / origScale;
this._dragOffsetX = currentScale * origDragOffsetX; this._dragOffsetX = currentScale * origDragOffsetX;
this._dragOffsetY = currentScale * origDragOffsetY; this._dragOffsetY = currentScale * origDragOffsetY;
this._dragActor.set_position(this._dragX + this._dragOffsetX, this._dragActor.set_position(
this._dragX + this._dragOffsetX,
this._dragY + this._dragOffsetY); this._dragY + this._dragOffsetY);
} }); });
} }
} }
} }
@ -658,12 +661,12 @@ var _Draggable = class _Draggable {
let [snapBackX, snapBackY, snapBackScale] = this._getRestoreLocation(); let [snapBackX, snapBackY, snapBackScale] = this._getRestoreLocation();
this._animateDragEnd(eventTime, this._animateDragEnd(eventTime, {
{ x: snapBackX, x: snapBackX,
y: snapBackY, y: snapBackY,
scale_x: snapBackScale, scale_x: snapBackScale,
scale_y: snapBackScale, scale_y: snapBackScale,
time: SNAP_BACK_ANIMATION_TIME / 1000, duration: SNAP_BACK_ANIMATION_TIME
}); });
} }
@ -676,21 +679,22 @@ var _Draggable = class _Draggable {
this._dragActor.set_scale(restoreScale, restoreScale); this._dragActor.set_scale(restoreScale, restoreScale);
this._dragActor.opacity = 0; this._dragActor.opacity = 0;
this._animateDragEnd(eventTime, this._animateDragEnd(eventTime, {
{ time: REVERT_ANIMATION_TIME / 1000 }); duration: REVERT_ANIMATION_TIME
});
} }
_animateDragEnd(eventTime, params) { _animateDragEnd(eventTime, params) {
this._animationInProgress = true; this._animationInProgress = true;
params['opacity'] = this._dragOrigOpacity;
params['transition'] = 'easeOutQuad';
params['onComplete'] = this._onAnimationComplete;
params['onCompleteScope'] = this;
params['onCompleteParams'] = [this._dragActor, eventTime];
// start the animation // start the animation
Tweener.addTween(this._dragActor, params); this._dragActor.ease(Object.assign(params, {
opacity: this._dragOrigOpacity,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => {
this._onAnimationComplete(this._dragActor, eventTime);
}
}));
} }
_finishAnimation() { _finishAnimation() {

92
js/ui/iconGrid.js
View File

@ -4,7 +4,6 @@
const { Clutter, GLib, GObject, Meta, St } = imports.gi; const { Clutter, GLib, GObject, Meta, St } = imports.gi;
const Params = imports.misc.params; const Params = imports.misc.params;
const Tweener = imports.ui.tweener;
const Main = imports.ui.main; const Main = imports.ui.main;
var ICON_SIZE = 96; var ICON_SIZE = 96;
@ -169,17 +168,15 @@ function zoomOutActor(actor) {
let containedX = clamp(scaledX, monitor.x, monitor.x + monitor.width - scaledWidth); let containedX = clamp(scaledX, monitor.x, monitor.x + monitor.width - scaledWidth);
let containedY = clamp(scaledY, monitor.y, monitor.y + monitor.height - scaledHeight); let containedY = clamp(scaledY, monitor.y, monitor.y + monitor.height - scaledHeight);
Tweener.addTween(actorClone, actorClone.ease({
{ time: APPICON_ANIMATION_OUT_TIME / 1000,
scale_x: APPICON_ANIMATION_OUT_SCALE, scale_x: APPICON_ANIMATION_OUT_SCALE,
scale_y: APPICON_ANIMATION_OUT_SCALE, scale_y: APPICON_ANIMATION_OUT_SCALE,
translation_x: containedX - scaledX, translation_x: containedX - scaledX,
translation_y: containedY - scaledY, translation_y: containedY - scaledY,
opacity: 0, opacity: 0,
transition: 'easeOutQuad', duration: APPICON_ANIMATION_OUT_TIME,
onComplete() { mode: Clutter.AnimationMode.EASE_OUT_QUAD,
actorClone.destroy(); onComplete: () => actorClone.destroy()
}
}); });
} }
@ -459,21 +456,23 @@ var IconGrid = GObject.registerClass({
let delay = index / actors.length * maxDelay; let delay = index / actors.length * maxDelay;
let bounceUpTime = ANIMATION_TIME_IN / 4; let bounceUpTime = ANIMATION_TIME_IN / 4;
let isLastItem = index == actors.length - 1; let isLastItem = index == actors.length - 1;
Tweener.addTween(actor, actor.ease({
{ time: bounceUpTime / 1000,
transition: 'easeInOutQuad',
delay: delay / 1000,
scale_x: ANIMATION_BOUNCE_ICON_SCALE, scale_x: ANIMATION_BOUNCE_ICON_SCALE,
scale_y: ANIMATION_BOUNCE_ICON_SCALE, scale_y: ANIMATION_BOUNCE_ICON_SCALE,
duration: bounceUpTime,
mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
delay: delay,
onComplete: () => { onComplete: () => {
Tweener.addTween(actor, let duration = ANIMATION_TIME_IN - bounceUpTime;
{ time: (ANIMATION_TIME_IN - bounceUpTime) / 1000, actor.ease({
transition: 'easeInOutQuad',
scale_x: 1, scale_x: 1,
scale_y: 1, scale_y: 1,
duration,
mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
onComplete: () => { onComplete: () => {
if (isLastItem) if (isLastItem)
this._animationDone(); this._animationDone();
actor.reactive = true;
} }
}); });
} }
@ -536,21 +535,25 @@ var IconGrid = GObject.registerClass({
let delay = (1 - (actor._distance - minDist) / normalization) * ANIMATION_MAX_DELAY_FOR_ITEM; let delay = (1 - (actor._distance - minDist) / normalization) * ANIMATION_MAX_DELAY_FOR_ITEM;
let [finalX, finalY] = actor._transformedPosition; let [finalX, finalY] = actor._transformedPosition;
movementParams = { time: ANIMATION_TIME_IN / 1000, movementParams = {
transition: 'easeInOutQuad',
delay: delay / 1000,
x: finalX, x: finalX,
y: finalY, y: finalY,
scale_x: 1, scale_x: 1,
scale_y: 1, scale_y: 1,
duration: ANIMATION_TIME_IN,
mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
delay,
onComplete: () => { onComplete: () => {
if (isLastItem) if (isLastItem)
this._animationDone(); this._animationDone();
} }; }
fadeParams = { time: ANIMATION_FADE_IN_TIME_FOR_ITEM / 1000, };
transition: 'easeInOutQuad', fadeParams = {
delay: delay / 1000, opacity: 255,
opacity: 255 }; duration: ANIMATION_FADE_IN_TIME_FOR_ITEM,
mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
delay
};
} else { } else {
let isLastItem = actor._distance == maxDist; let isLastItem = actor._distance == maxDist;
@ -558,26 +561,30 @@ var IconGrid = GObject.registerClass({
actorClone.set_position(startX, startY); actorClone.set_position(startX, startY);
let delay = (actor._distance - minDist) / normalization * ANIMATION_MAX_DELAY_OUT_FOR_ITEM; let delay = (actor._distance - minDist) / normalization * ANIMATION_MAX_DELAY_OUT_FOR_ITEM;
movementParams = { time: ANIMATION_TIME_OUT / 1000, movementParams = {
transition: 'easeInOutQuad',
delay: delay / 1000,
x: adjustedSourcePositionX, x: adjustedSourcePositionX,
y: adjustedSourcePositionY, y: adjustedSourcePositionY,
scale_x: scaleX, scale_x: scaleX,
scale_y: scaleY, scale_y: scaleY,
duration: ANIMATION_TIME_OUT,
mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
delay,
onComplete: () => { onComplete: () => {
if (isLastItem) if (isLastItem) {
this._animationDone(); this._animationDone();
} }; }
fadeParams = { time: ANIMATION_FADE_IN_TIME_FOR_ITEM / 1000, }
transition: 'easeInOutQuad', };
delay: (ANIMATION_TIME_OUT + delay - ANIMATION_FADE_IN_TIME_FOR_ITEM) / 1000, fadeParams = {
opacity: 0 }; opacity: 0,
duration: ANIMATION_FADE_IN_TIME_FOR_ITEM,
mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
delay: ANIMATION_TIME_OUT + delay - ANIMATION_FADE_IN_TIME_FOR_ITEM
};
} }
actorClone.ease(movementParams);
Tweener.addTween(actorClone, movementParams); actorClone.ease(fadeParams);
Tweener.addTween(actorClone, fadeParams);
} }
} }
@ -982,13 +989,14 @@ var PaginatedIconGrid = GObject.registerClass({
for (let i = 0; i < children.length; i++) { for (let i = 0; i < children.length; i++) {
children[i].translation_y = 0; children[i].translation_y = 0;
let params = { translation_y: translationY, let params = {
time: EXTRA_SPACE_ANIMATION_TIME / 1000, translation_y: translationY,
transition: 'easeInOutQuad' duration: EXTRA_SPACE_ANIMATION_TIME,
mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD
}; };
if (i == (children.length - 1)) if (i == (children.length - 1))
params.onComplete = () => this.emit('space-opened'); params.onComplete = () => this.emit('space-opened');
Tweener.addTween(children[i], params); children[i].ease(params);
} }
} }
@ -1001,10 +1009,10 @@ var PaginatedIconGrid = GObject.registerClass({
for (let i = 0; i < this._translatedChildren.length; i++) { for (let i = 0; i < this._translatedChildren.length; i++) {
if (!this._translatedChildren[i].translation_y) if (!this._translatedChildren[i].translation_y)
continue; continue;
Tweener.addTween(this._translatedChildren[i], this._translatedChildren[i].ease({
{ translation_y: 0, translation_y: 0,
time: EXTRA_SPACE_ANIMATION_TIME / 1000, duration: EXTRA_SPACE_ANIMATION_TIME,
transition: 'easeInOutQuad', mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
onComplete: () => this.emit('space-closed') onComplete: () => this.emit('space-closed')
}); });
} }

28
js/ui/keyboard.js
View File

@ -1654,19 +1654,23 @@ var Keyboard = class Keyboard {
return; return;
if (show) { if (show) {
Tweener.addTween(windowActor, windowActor.ease({
{ y: windowActor.y - deltaY, y: windowActor.y - deltaY,
time: Layout.KEYBOARD_ANIMATION_TIME / 1000, duration: Layout.KEYBOARD_ANIMATION_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: this._windowSlideAnimationComplete, onComplete: () => {
onCompleteParams: [window, -deltaY] }); this._windowSlideAnimationComplete(window, -deltaY);
}
});
} else { } else {
Tweener.addTween(windowActor, windowActor.ease({
{ y: windowActor.y + deltaY, y: windowActor.y + deltaY,
time: Layout.KEYBOARD_ANIMATION_TIME / 1000, duration: Layout.KEYBOARD_ANIMATION_TIME,
transition: 'easeInQuad', mode: Clutter.AnimationMode.EASE_IN_QUAD,
onComplete: this._windowSlideAnimationComplete, onComplete: () => {
onCompleteParams: [window, deltaY] }); this._windowSlideAnimationComplete(window, deltaY);
}
});
} }
} }

61
js/ui/layout.js
View File

@ -11,7 +11,6 @@ const LoginManager = imports.misc.loginManager;
const DND = imports.ui.dnd; const DND = imports.ui.dnd;
const Main = imports.ui.main; const Main = imports.ui.main;
const Params = imports.misc.params; const Params = imports.misc.params;
const Tweener = imports.ui.tweener;
const Ripples = imports.ui.ripples; const Ripples = imports.ui.ripples;
var STARTUP_ANIMATION_TIME = 500; var STARTUP_ANIMATION_TIME = 500;
@ -464,10 +463,11 @@ var LayoutManager = GObject.registerClass({
let backgroundActor = this._bgManagers[i].backgroundActor; let backgroundActor = this._bgManagers[i].backgroundActor;
backgroundActor.show(); backgroundActor.show();
backgroundActor.opacity = 0; backgroundActor.opacity = 0;
Tweener.addTween(backgroundActor, backgroundActor.ease({
{ opacity: 255, opacity: 255,
time: BACKGROUND_FADE_ANIMATION_TIME / 1000, duration: BACKGROUND_FADE_ANIMATION_TIME,
transition: 'easeOutQuad' }); mode: Clutter.AnimationMode.EASE_OUT_QUAD
});
} }
} }
} }
@ -698,23 +698,23 @@ var LayoutManager = GObject.registerClass({
} }
_startupAnimationGreeter() { _startupAnimationGreeter() {
Tweener.addTween(this.panelBox, this.panelBox.ease({
{ translation_y: 0, translation_y: 0,
time: STARTUP_ANIMATION_TIME / 1000, duration: STARTUP_ANIMATION_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: this._startupAnimationComplete, onComplete: () => this._startupAnimationComplete()
onCompleteScope: this }); });
} }
_startupAnimationSession() { _startupAnimationSession() {
Tweener.addTween(this.uiGroup, this.uiGroup.ease({
{ scale_x: 1, scale_x: 1,
scale_y: 1, scale_y: 1,
opacity: 255, opacity: 255,
time: STARTUP_ANIMATION_TIME / 1000, duration: STARTUP_ANIMATION_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: this._startupAnimationComplete, onComplete: () => this._startupAnimationComplete()
onCompleteScope: this }); });
} }
_startupAnimationComplete() { _startupAnimationComplete() {
@ -740,13 +740,14 @@ var LayoutManager = GObject.registerClass({
showKeyboard() { showKeyboard() {
this.keyboardBox.show(); this.keyboardBox.show();
Tweener.addTween(this.keyboardBox, this.keyboardBox.ease({
{ anchor_y: this.keyboardBox.height, anchor_y: this.keyboardBox.height,
opacity: 255, opacity: 255,
time: KEYBOARD_ANIMATION_TIME / 1000, duration: KEYBOARD_ANIMATION_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: this._showKeyboardComplete, onComplete: () => {
onCompleteScope: this this._showKeyboardComplete();
}
}); });
this.emit('keyboard-visible-changed', true); this.emit('keyboard-visible-changed', true);
} }
@ -766,13 +767,15 @@ var LayoutManager = GObject.registerClass({
this.keyboardBox.disconnect(this._keyboardHeightNotifyId); this.keyboardBox.disconnect(this._keyboardHeightNotifyId);
this._keyboardHeightNotifyId = 0; this._keyboardHeightNotifyId = 0;
} }
Tweener.addTween(this.keyboardBox, this.keyboardBox.ease({
{ anchor_y: 0, anchor_y: 0,
opacity: 0, opacity: 0,
time: immediate ? 0 : KEYBOARD_ANIMATION_TIME / 1000, duration: immediate ? 0
transition: 'easeInQuad', : KEYBOARD_ANIMATION_TIME,
onComplete: this._hideKeyboardComplete, mode: Clutter.AnimationMode.EASE_IN_QUAD,
onCompleteScope: this onComplete: () => {
this._hideKeyboardComplete();
}
}); });
this.emit('keyboard-visible-changed', false); this.emit('keyboard-visible-changed', false);

20
js/ui/lightbox.js
View File

@ -168,11 +168,11 @@ var Lightbox = class Lightbox {
} }
}); });
} else { } else {
Tweener.removeTweens(this.actor); this.actor.remove_all_transitions();
Tweener.addTween(this.actor, this.actor.ease({
{ opacity: 255 * this._fadeFactor, opacity: 255 * this._fadeFactor,
time: fadeInTime / 1000, duration: fadeInTime,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => { onComplete: () => {
this.shown = true; this.shown = true;
this.emit('shown'); this.emit('shown');
@ -202,11 +202,11 @@ var Lightbox = class Lightbox {
} }
}); });
} else { } else {
Tweener.removeTweens(this.actor); this.actor.remove_all_transitions();
Tweener.addTween(this.actor, this.actor.ease({
{ opacity: 0, opacity: 0,
time: fadeOutTime / 1000, duration: fadeOutTime,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => { onComplete: () => {
this.actor.hide(); this.actor.hide();
} }

56
js/ui/lookingGlass.js
View File

@ -10,7 +10,6 @@ const System = imports.system;
const History = imports.misc.history; const History = imports.misc.history;
const ExtensionUtils = imports.misc.extensionUtils; const ExtensionUtils = imports.misc.extensionUtils;
const ShellEntry = imports.ui.shellEntry; const ShellEntry = imports.ui.shellEntry;
const Tweener = imports.ui.tweener;
const Main = imports.ui.main; const Main = imports.ui.main;
const JsParse = imports.misc.jsParse; const JsParse = imports.misc.jsParse;
@ -37,6 +36,8 @@ var AUTO_COMPLETE_DOUBLE_TAB_DELAY = 500;
var AUTO_COMPLETE_SHOW_COMPLETION_ANIMATION_DURATION = 200; var AUTO_COMPLETE_SHOW_COMPLETION_ANIMATION_DURATION = 200;
var AUTO_COMPLETE_GLOBAL_KEYWORDS = _getAutoCompleteGlobalKeywords(); var AUTO_COMPLETE_GLOBAL_KEYWORDS = _getAutoCompleteGlobalKeywords();
const LG_ANIMATION_TIME = 500;
function _getAutoCompleteGlobalKeywords() { function _getAutoCompleteGlobalKeywords() {
const keywords = ['true', 'false', 'null', 'new']; const keywords = ['true', 'false', 'null', 'new'];
// Don't add the private properties of window (i.e., ones starting with '_') // Don't add the private properties of window (i.e., ones starting with '_')
@ -419,9 +420,12 @@ var ObjInspector = class ObjInspector {
this.actor.show(); this.actor.show();
if (sourceActor) { if (sourceActor) {
this.actor.set_scale(0, 0); this.actor.set_scale(0, 0);
Tweener.addTween(this.actor, { scale_x: 1, scale_y: 1, this.actor.ease({
transition: 'easeOutQuad', scale_x: 1,
time: 0.2 }); scale_y: 1,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
time: 200
});
} else { } else {
this.actor.set_scale(1, 1); this.actor.set_scale(1, 1);
} }
@ -941,7 +945,7 @@ var LookingGlass = class LookingGlass {
this._completionActor.set_text(completions.join(', ')); this._completionActor.set_text(completions.join(', '));
// Setting the height to -1 allows us to get its actual preferred height rather than // Setting the height to -1 allows us to get its actual preferred height rather than
// whatever was last given in set_height by Tweener. // whatever was last set when animating
this._completionActor.set_height(-1); this._completionActor.set_height(-1);
let [, naturalHeight] = this._completionActor.get_preferred_height(this._resultsArea.get_width()); let [, naturalHeight] = this._completionActor.get_preferred_height(this._resultsArea.get_width());
@ -950,12 +954,14 @@ var LookingGlass = class LookingGlass {
this._completionActor.height = naturalHeight; this._completionActor.height = naturalHeight;
} else { } else {
let settings = St.Settings.get(); let settings = St.Settings.get();
let duration = AUTO_COMPLETE_SHOW_COMPLETION_ANIMATION_DURATION / settings.slow_down_factor;
this._completionActor.show(); this._completionActor.show();
Tweener.removeTweens(this._completionActor); this._completionActor.remove_all_transitions();
Tweener.addTween(this._completionActor, { time: AUTO_COMPLETE_SHOW_COMPLETION_ANIMATION_DURATION / (1000 * settings.slow_down_factor), this._completionActor.ease({
transition: 'easeOutQuad',
height: naturalHeight, height: naturalHeight,
opacity: 255 opacity: 255,
duration,
mode: Clutter.AnimationMode.EASE_OUT_QUAD
}); });
} }
} }
@ -963,11 +969,13 @@ var LookingGlass = class LookingGlass {
_hideCompletions() { _hideCompletions() {
if (this._completionActor) { if (this._completionActor) {
let settings = St.Settings.get(); let settings = St.Settings.get();
Tweener.removeTweens(this._completionActor); let duration = AUTO_COMPLETE_SHOW_COMPLETION_ANIMATION_DURATION / settings.slow_down_factor;
Tweener.addTween(this._completionActor, { time: AUTO_COMPLETE_SHOW_COMPLETION_ANIMATION_DURATION / (1000 * settings.slow_down_factor), this._completionActor.remove_all_transitions();
transition: 'easeOutQuad', this._completionActor.ease({
height: 0, height: 0,
opacity: 0, opacity: 0,
duration,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => { onComplete: () => {
this._completionActor.hide(); this._completionActor.hide();
} }
@ -1080,14 +1088,15 @@ var LookingGlass = class LookingGlass {
this._open = true; this._open = true;
this._history.lastItem(); this._history.lastItem();
Tweener.removeTweens(this.actor); this.actor.remove_all_transitions();
// We inverse compensate for the slow-down so you can change the factor // We inverse compensate for the slow-down so you can change the factor
// through LookingGlass without long waits. // through LookingGlass without long waits.
let settings = St.Settings.get(); let duration = LG_ANIMATION_TIME / St.Settings.get().slow_down_factor;
Tweener.addTween(this.actor, { time: 0.5 / settings.slow_down_factor, this.actor.ease({
transition: 'easeOutQuad', y: this._targetY,
y: this._targetY duration,
mode: Clutter.AnimationMode.EASE_OUT_QUAD
}); });
} }
@ -1098,19 +1107,20 @@ var LookingGlass = class LookingGlass {
this._objInspector.actor.hide(); this._objInspector.actor.hide();
this._open = false; this._open = false;
Tweener.removeTweens(this.actor); this.actor.remove_all_transitions();
this.setBorderPaintTarget(null); this.setBorderPaintTarget(null);
Main.popModal(this._entry); Main.popModal(this._entry);
let settings = St.Settings.get(); let settings = St.Settings.get();
Tweener.addTween(this.actor, { time: Math.min(0.5 / settings.slow_down_factor, 0.5), let duration = Math.min(LG_ANIMATION_TIME / settings.slow_down_factor,
transition: 'easeOutQuad', LG_ANIMATION_TIME);
this.actor.ease({
y: this._hiddenY, y: this._hiddenY,
onComplete: () => { duration,
this.actor.hide(); mode: Clutter.AnimationMode.EASE_OUT_QUAD,
} onComplete: () => this.actor.hide()
}); });
} }
}; };

74
js/ui/messageList.js
View File

@ -445,10 +445,11 @@ var Message = class Message {
time: MessageTray.ANIMATION_TIME / 1000, time: MessageTray.ANIMATION_TIME / 1000,
transition: 'easeOutQuad' }); transition: 'easeOutQuad' });
this._actionBin.scale_y = 0; this._actionBin.scale_y = 0;
Tweener.addTween(this._actionBin, this._actionBin.ease({
{ scale_y: 1, scale_y: 1,
time: MessageTray.ANIMATION_TIME / 1000, duration: MessageTray.ANIMATION_TIME,
transition: 'easeOutQuad' }); mode: Clutter.AnimationMode.EASE_OUT_QUAD
});
} else { } else {
this._bodyStack.layout_manager.expansion = 1; this._bodyStack.layout_manager.expansion = 1;
this._actionBin.scale_y = 1; this._actionBin.scale_y = 1;
@ -463,14 +464,15 @@ var Message = class Message {
{ expansion: 0, { expansion: 0,
time: MessageTray.ANIMATION_TIME / 1000, time: MessageTray.ANIMATION_TIME / 1000,
transition: 'easeOutQuad' }); transition: 'easeOutQuad' });
Tweener.addTween(this._actionBin, this._actionBin.ease({
{ scale_y: 0, scale_y: 0,
time: MessageTray.ANIMATION_TIME / 1000, duration: MessageTray.ANIMATION_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => { onComplete: () => {
this._actionBin.hide(); this._actionBin.hide();
this.expanded = false; this.expanded = false;
} }); }
});
} else { } else {
this._bodyStack.layout_manager.expansion = 0; this._bodyStack.layout_manager.expansion = 0;
this._actionBin.scale_y = 0; this._actionBin.scale_y = 0;
@ -581,10 +583,12 @@ var MessageListSection = class MessageListSection {
this._list.insert_child_at_index(obj.container, index); this._list.insert_child_at_index(obj.container, index);
if (animate) if (animate)
Tweener.addTween(obj.container, { scale_x: 1, obj.container.ease({
scale_x: 1,
scale_y: 1, scale_y: 1,
time: MESSAGE_ANIMATION_TIME / 1000, duration: MESSAGE_ANIMATION_TIME,
transition: 'easeOutQuad' }); mode: Clutter.AnimationMode.EASE_OUT_QUAD
});
} }
moveMessage(message, index, animate) { moveMessage(message, index, animate) {
@ -597,16 +601,20 @@ var MessageListSection = class MessageListSection {
let onComplete = () => { let onComplete = () => {
this._list.set_child_at_index(obj.container, index); this._list.set_child_at_index(obj.container, index);
Tweener.addTween(obj.container, { scale_x: 1, obj.container.ease({
scale_x: 1,
scale_y: 1, scale_y: 1,
time: MESSAGE_ANIMATION_TIME / 1000, duration: MESSAGE_ANIMATION_TIME,
transition: 'easeOutQuad' }); mode: Clutter.AnimationMode.EASE_OUT_QUAD
});
}; };
Tweener.addTween(obj.container, { scale_x: 0, obj.container.ease({
scale_x: 0,
scale_y: 0, scale_y: 0,
time: MESSAGE_ANIMATION_TIME / 1000, duration: MESSAGE_ANIMATION_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: onComplete }); onComplete
});
} }
removeMessage(message, animate) { removeMessage(message, animate) {
@ -619,13 +627,16 @@ var MessageListSection = class MessageListSection {
this._messages.delete(message); this._messages.delete(message);
if (animate) { if (animate) {
Tweener.addTween(obj.container, { scale_x: 0, scale_y: 0, obj.container.ease({
time: MESSAGE_ANIMATION_TIME / 1000, scale_x: 0,
transition: 'easeOutQuad', scale_y: 0,
onComplete() { duration: MESSAGE_ANIMATION_TIME,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => {
obj.container.destroy(); obj.container.destroy();
global.sync_pointer(); global.sync_pointer();
} }); }
});
} else { } else {
obj.container.destroy(); obj.container.destroy();
global.sync_pointer(); global.sync_pointer();
@ -647,15 +658,14 @@ var MessageListSection = class MessageListSection {
for (let i = 0; i < messages.length; i++) { for (let i = 0; i < messages.length; i++) {
let message = messages[i]; let message = messages[i];
let obj = this._messages.get(message); let obj = this._messages.get(message);
Tweener.addTween(obj.container, obj.container.ease({
{ anchor_x: this._list.width, anchor_x: this._list.width,
opacity: 0, opacity: 0,
time: MESSAGE_ANIMATION_TIME / 1000, duration: MESSAGE_ANIMATION_TIME,
delay: i * delay / 1000, delay: i * delay,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete() { onComplete: () => message.close()
message.close(); });
} });
} }
} }
} }

30
js/ui/messageTray.js
View File

@ -12,7 +12,6 @@ const GnomeSession = imports.misc.gnomeSession;
const Layout = imports.ui.layout; const Layout = imports.ui.layout;
const Main = imports.ui.main; const Main = imports.ui.main;
const Params = imports.misc.params; const Params = imports.misc.params;
const Tweener = imports.ui.tweener;
const SHELL_KEYBINDINGS_SCHEMA = 'org.gnome.shell.keybindings'; const SHELL_KEYBINDINGS_SCHEMA = 'org.gnome.shell.keybindings';
@ -1321,16 +1320,16 @@ var MessageTray = class MessageTray {
// notification is being shown. // notification is being shown.
this._notificationState = State.SHOWING; this._notificationState = State.SHOWING;
Tweener.removeTweens(this._bannerBin); this._bannerBin.remove_all_transitions();
Tweener.addTween(this._bannerBin, { this._bannerBin.ease({
opacity: 255, opacity: 255,
time: ANIMATION_TIME / 1000, duration: ANIMATION_TIME,
transition: 'linear' mode: Clutter.AnimationMode.LINEAR
}); });
Tweener.addTween(this._bannerBin, { this._bannerBin.ease({
y: 0, y: 0,
time: ANIMATION_TIME / 1000, duration: ANIMATION_TIME,
transition: 'easeOutBack', mode: Clutter.AnimationMode.EASE_OUT_BACK,
onComplete: () => { onComplete: () => {
this._notificationState = State.SHOWN; this._notificationState = State.SHOWN;
this._showNotificationCompleted(); this._showNotificationCompleted();
@ -1394,19 +1393,19 @@ var MessageTray = class MessageTray {
} }
this._resetNotificationLeftTimeout(); this._resetNotificationLeftTimeout();
this._bannerBin.remove_all_transitions();
if (animate) { if (animate) {
this._notificationState = State.HIDING; this._notificationState = State.HIDING;
Tweener.removeTweens(this._bannerBin); this._bannerBin.ease({
Tweener.addTween(this._bannerBin, {
opacity: 0, opacity: 0,
time: ANIMATION_TIME / 1000, duration: ANIMATION_TIME,
transition: 'linear' mode: Clutter.AnimationMode.EASE_OUT_BACK
}); });
Tweener.addTween(this._bannerBin, { this._bannerBin.ease({
y: -this._bannerBin.height, y: -this._bannerBin.height,
time: ANIMATION_TIME / 1000, duration: ANIMATION_TIME,
transition: 'easeOutBack', mode: Clutter.AnimationMode.EASE_OUT_BACK,
onComplete: () => { onComplete: () => {
this._notificationState = State.HIDDEN; this._notificationState = State.HIDDEN;
this._hideNotificationCompleted(); this._hideNotificationCompleted();
@ -1414,7 +1413,6 @@ var MessageTray = class MessageTray {
} }
}); });
} else { } else {
Tweener.removeTweens(this._bannerBin);
this._bannerBin.y = -this._bannerBin.height; this._bannerBin.y = -this._bannerBin.height;
this._bannerBin.opacity = 0; this._bannerBin.opacity = 0;
this._notificationState = State.HIDDEN; this._notificationState = State.HIDDEN;

36
js/ui/modalDialog.js
View File

@ -8,7 +8,6 @@ const Layout = imports.ui.layout;
const Lightbox = imports.ui.lightbox; const Lightbox = imports.ui.lightbox;
const Main = imports.ui.main; const Main = imports.ui.main;
const Params = imports.misc.params; const Params = imports.misc.params;
const Tweener = imports.ui.tweener;
var OPEN_AND_CLOSE_TIME = 100; var OPEN_AND_CLOSE_TIME = 100;
var FADE_OUT_DIALOG_TIME = 1000; var FADE_OUT_DIALOG_TIME = 1000;
@ -125,10 +124,10 @@ var ModalDialog = GObject.registerClass({
this._lightbox.show(); this._lightbox.show();
this.opacity = 0; this.opacity = 0;
this.show(); this.show();
Tweener.addTween(this, this.ease({
{ opacity: 255, opacity: 255,
time: this._shouldFadeIn ? OPEN_AND_CLOSE_TIME / 1000 : 0, duration: this._shouldFadeIn ? OPEN_AND_CLOSE_TIME : 0,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => { onComplete: () => {
this._setState(State.OPENED); this._setState(State.OPENED);
this.emit('opened'); this.emit('opened');
@ -176,16 +175,17 @@ var ModalDialog = GObject.registerClass({
this.popModal(timestamp); this.popModal(timestamp);
this._savedKeyFocus = null; this._savedKeyFocus = null;
if (this._shouldFadeOut) if (this._shouldFadeOut) {
Tweener.addTween(this, this.ease({
{ opacity: 0, opacity: 0,
time: OPEN_AND_CLOSE_TIME / 1000, duration: OPEN_AND_CLOSE_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: this._closeComplete.bind(this) onComplete: () => this._closeComplete()
}); });
else } else {
this._closeComplete(); this._closeComplete();
} }
}
// Drop modal status without closing the dialog; this makes the // Drop modal status without closing the dialog; this makes the
// dialog insensitive as well, so it needs to be followed shortly // dialog insensitive as well, so it needs to be followed shortly
@ -249,13 +249,11 @@ var ModalDialog = GObject.registerClass({
return; return;
this.popModal(timestamp); this.popModal(timestamp);
Tweener.addTween(this.dialogLayout, this.dialogLayout.ease({
{ opacity: 0, opacity: 0,
time: FADE_OUT_DIALOG_TIME / 1000, duration: FADE_OUT_DIALOG_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => { onComplete: () => this.state = State.FADED_OUT
this._setState(State.FADED_OUT);
}
}); });
} }
}); });

17
js/ui/osdWindow.js
View File

@ -133,10 +133,11 @@ var OsdWindow = class {
this.actor.opacity = 0; this.actor.opacity = 0;
this.actor.get_parent().set_child_above_sibling(this.actor, null); this.actor.get_parent().set_child_above_sibling(this.actor, null);
Tweener.addTween(this.actor, this.actor.ease({
{ opacity: 255, opacity: 255,
time: FADE_TIME / 1000, duration: FADE_TIME,
transition: 'easeOutQuad' }); mode: Clutter.AnimationMode.EASE_OUT_QUAD
});
} }
if (this._hideTimeoutId) if (this._hideTimeoutId)
@ -156,10 +157,10 @@ var OsdWindow = class {
_hide() { _hide() {
this._hideTimeoutId = 0; this._hideTimeoutId = 0;
Tweener.addTween(this.actor, this.actor.ease({
{ opacity: 0, opacity: 0,
time: FADE_TIME / 1000, duration: FADE_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => { onComplete: () => {
this._reset(); this._reset();
Meta.enable_unredirect_for_display(global.display); Meta.enable_unredirect_for_display(global.display);

39
js/ui/overview.js
View File

@ -427,10 +427,11 @@ var Overview = class {
fadeInDesktop() { fadeInDesktop() {
this._desktopFade.opacity = 0; this._desktopFade.opacity = 0;
this._desktopFade.show(); this._desktopFade.show();
Tweener.addTween(this._desktopFade, this._desktopFade.ease({
{ opacity: 255, opacity: 255,
time: ANIMATION_TIME / 1000, mode: Clutter.AnimationMode.EASE_OUT_QUAD,
transition: 'easeOutQuad' }); duration: ANIMATION_TIME
});
} }
fadeOutDesktop() { fadeOutDesktop() {
@ -444,10 +445,10 @@ var Overview = class {
this._desktopFade.opacity = 255; this._desktopFade.opacity = 255;
this._desktopFade.show(); this._desktopFade.show();
Tweener.addTween(this._desktopFade, this._desktopFade.ease({
{ opacity: 0, opacity: 0,
time: ANIMATION_TIME / 1000, mode: Clutter.Animates.EASE_OUT_QUAD,
transition: 'easeOutQuad' duration: ANIMATION_TIME
}); });
} }
@ -528,12 +529,11 @@ var Overview = class {
this.viewSelector.show(); this.viewSelector.show();
this._overview.opacity = 0; this._overview.opacity = 0;
Tweener.addTween(this._overview, this._overview.ease({
{ opacity: 255, opacity: 255,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
time: ANIMATION_TIME / 1000, duration: ANIMATION_TIME,
onComplete: this._showDone, onComplete: () => this._showDone()
onCompleteScope: this
}); });
this._shadeBackgrounds(); this._shadeBackgrounds();
@ -592,12 +592,11 @@ var Overview = class {
this.viewSelector.animateFromOverview(); this.viewSelector.animateFromOverview();
// Make other elements fade out. // Make other elements fade out.
Tweener.addTween(this._overview, this._overview.ease({
{ opacity: 0, opacity: 0,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
time: ANIMATION_TIME / 1000, duration: ANIMATION_TIME,
onComplete: this._hideDone, onComplete: () => this._hideDone()
onCompleteScope: this
}); });
this._unshadeBackgrounds(); this._unshadeBackgrounds();

14
js/ui/overviewControls.js
View File

@ -196,16 +196,18 @@ var SlidingControl = class {
} }
fadeIn() { fadeIn() {
Tweener.addTween(this.actor, { opacity: 255, this.actor.ease({
time: SIDE_CONTROLS_ANIMATION_TIME / (2 * 1000), opacity: 255,
transition: 'easeInQuad' duration: SIDE_CONTROLS_ANIMATION_TIME / 2,
mode: Clutter.AnimationMode.EASE_IN_QUAD
}); });
} }
fadeHalf() { fadeHalf() {
Tweener.addTween(this.actor, { opacity: 128, this.actor.ease({
time: SIDE_CONTROLS_ANIMATION_TIME / (2 * 1000), opacity: 128,
transition: 'easeOutQuad' duration: SIDE_CONTROLS_ANIMATION_TIME / 2,
mode: Clutter.AnimationMode.EASE_OUT_QUAD
}); });
} }

11
js/ui/pageIndicators.js
View File

@ -3,7 +3,6 @@
const { Clutter, GLib, GObject, Meta, St } = imports.gi; const { Clutter, GLib, GObject, Meta, St } = imports.gi;
const Tweener = imports.ui.tweener;
const { ANIMATION_TIME_OUT, ANIMATION_MAX_DELAY_OUT_FOR_ITEM, AnimationDirection } = imports.ui.iconGrid; const { ANIMATION_TIME_OUT, ANIMATION_MAX_DELAY_OUT_FOR_ITEM, AnimationDirection } = imports.ui.iconGrid;
var INDICATORS_BASE_TIME = 250; var INDICATORS_BASE_TIME = 250;
@ -118,7 +117,7 @@ class AnimatedPageIndicators extends PageIndicators {
return; return;
for (let i = 0; i < this._nPages; i++) for (let i = 0; i < this._nPages; i++)
Tweener.removeTweens(children[i]); children[i].remove_all_transitions();
let offset; let offset;
if (this.get_text_direction() == Clutter.TextDirection.RTL) if (this.get_text_direction() == Clutter.TextDirection.RTL)
@ -138,11 +137,11 @@ class AnimatedPageIndicators extends PageIndicators {
for (let i = 0; i < this._nPages; i++) { for (let i = 0; i < this._nPages; i++) {
children[i].translation_x = isAnimationIn ? offset : 0; children[i].translation_x = isAnimationIn ? offset : 0;
Tweener.addTween(children[i], { children[i].ease({
translation_x: isAnimationIn ? 0 : offset, translation_x: isAnimationIn ? 0 : offset,
time: (baseTime + delay * i) / 1000, duration: baseTime + delay * i,
transition: 'easeInOutQuad', mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
delay: isAnimationIn ? ANIMATION_DELAY / 1000 : 0 delay: isAnimationIn ? ANIMATION_DELAY : 0
}); });
} }
} }

27
js/ui/panel.js
View File

@ -13,7 +13,6 @@ const Overview = imports.ui.overview;
const PopupMenu = imports.ui.popupMenu; const PopupMenu = imports.ui.popupMenu;
const PanelMenu = imports.ui.panelMenu; const PanelMenu = imports.ui.panelMenu;
const Main = imports.ui.main; const Main = imports.ui.main;
const Tweener = imports.ui.tweener;
var PANEL_ICON_SIZE = 16; var PANEL_ICON_SIZE = 16;
var APP_MENU_ICON_MARGIN = 0; var APP_MENU_ICON_MARGIN = 0;
@ -262,11 +261,12 @@ var AppMenuButton = GObject.registerClass({
this._visible = true; this._visible = true;
this.reactive = true; this.reactive = true;
this.show(); this.show();
Tweener.removeTweens(this); this.remove_all_transitions();
Tweener.addTween(this, this.ease({
{ opacity: 255, opacity: 255,
time: Overview.ANIMATION_TIME / 1000, duration: Overview.ANIMATION_TIME,
transition: 'easeOutQuad' }); mode: Clutter.AnimationMode.EASE_OUT_QUAD
});
} }
fadeOut() { fadeOut() {
@ -275,14 +275,13 @@ var AppMenuButton = GObject.registerClass({
this._visible = false; this._visible = false;
this.reactive = false; this.reactive = false;
Tweener.removeTweens(this); this.remove_all_transitions();
Tweener.addTween(this, this.ease({
{ opacity: 0, opacity: 0,
time: Overview.ANIMATION_TIME / 1000, mode: Clutter.Animation.EASE_OUT_QUAD,
transition: 'easeOutQuad', duration: Overview.ANIMATION_TIME,
onComplete: () => { onComplete: () => this.hide()
this.hide(); });
} });
} }
_syncIcon() { _syncIcon() {

13
js/ui/pointerA11yTimeout.js
View File

@ -1,6 +1,5 @@
/* exported PointerA11yTimeout */ /* exported PointerA11yTimeout */
const { Clutter, GLib, GObject, Meta, St } = imports.gi; const { Clutter, GLib, GObject, Meta, St } = imports.gi;
const Tweener = imports.ui.tweener;
const Main = imports.ui.main; const Main = imports.ui.main;
const Cairo = imports.cairo; const Cairo = imports.cairo;
@ -57,7 +56,7 @@ class PieTimer extends St.DrawingArea {
} }
start(x, y, duration) { start(x, y, duration) {
Tweener.removeTweens(this); this.remove_all_transitions();
this.x = x - this.width / 2; this.x = x - this.width / 2;
this.y = y - this.height / 2; this.y = y - this.height / 2;
@ -67,16 +66,16 @@ class PieTimer extends St.DrawingArea {
this._startTime = GLib.get_monotonic_time() / 1000.0; this._startTime = GLib.get_monotonic_time() / 1000.0;
this._duration = duration; this._duration = duration;
Tweener.addTween(this, this.ease({
{ opacity: 255, opacity: 255,
time: duration / 1000, duration,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => this.stop() onComplete: () => this.stop()
}); });
} }
stop() { stop() {
Tweener.removeTweens(this); this.remove_all_transitions();
this.hide(); this.hide();
} }
}); });

37
js/ui/popupMenu.js
View File

@ -10,7 +10,6 @@ const BoxPointer = imports.ui.boxpointer;
const GrabHelper = imports.ui.grabHelper; const GrabHelper = imports.ui.grabHelper;
const Main = imports.ui.main; const Main = imports.ui.main;
const Params = imports.misc.params; const Params = imports.misc.params;
const Tweener = imports.ui.tweener;
var Ornament = { var Ornament = {
NONE: 0, NONE: 0,
@ -1013,16 +1012,17 @@ var PopupSubMenu = class extends PopupMenuBase {
if (animate) { if (animate) {
let [, naturalHeight] = this.actor.get_preferred_height(-1); let [, naturalHeight] = this.actor.get_preferred_height(-1);
this.actor.height = 0; this.actor.height = 0;
Tweener.addTween(this.actor, this.actor.ease({
{ height: naturalHeight, height: naturalHeight,
time: 0.25, duration: 250,
onComplete: () => { mode: Clutter.AnimationMode.EASE_OUT_EXPO,
this.actor.set_height(-1); onComplete: () => this.actor.set_height(-1)
} });
this._arrow.ease({
rotation_angle_z: targetAngle,
duration: 250,
mode: Clutter.AnimationMode.EASE_OUT_EXPO
}); });
Tweener.addTween(this._arrow,
{ rotation_angle_z: targetAngle,
time: 0.25 });
} else { } else {
this._arrow.rotation_angle_z = targetAngle; this._arrow.rotation_angle_z = targetAngle;
} }
@ -1042,17 +1042,20 @@ var PopupSubMenu = class extends PopupMenuBase {
animate = false; animate = false;
if (animate) { if (animate) {
Tweener.addTween(this.actor, this.actor.ease({
{ height: 0, height: 0,
time: 0.25, duration: 250,
mode: Clutter.AnimationMode.EASE_OUT_EXPO,
onComplete: () => { onComplete: () => {
this.actor.hide(); this.actor.hide();
this.actor.set_height(-1); this.actor.set_height(-1);
}, }
});
this._arrow.ease({
rotation_angle_z: 0,
duration: 250,
mode: Clutter.AnimationMode.EASE_OUT_EXPO
}); });
Tweener.addTween(this._arrow,
{ rotation_angle_z: 0,
time: 0.25 });
} else { } else {
this._arrow.rotation_angle_z = 0; this._arrow.rotation_angle_z = 0;
this.actor.hide(); this.actor.hide();

33
js/ui/ripples.js
View File

@ -1,8 +1,7 @@
// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*- // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
/* exported Ripples */ /* exported Ripples */
const { St } = imports.gi; const { Clutter, St } = imports.gi;
const Tweener = imports.ui.tweener;
// Shamelessly copied from the layout "hotcorner" ripples implementation // Shamelessly copied from the layout "hotcorner" ripples implementation
var Ripples = class Ripples { var Ripples = class Ripples {
@ -35,7 +34,7 @@ var Ripples = class Ripples {
this._ripple3.set_pivot_point(px, py); this._ripple3.set_pivot_point(px, py);
} }
_animRipple(ripple, delay, time, startScale, startOpacity, finalScale) { _animRipple(ripple, delay, duration, startScale, startOpacity, finalScale) {
// We draw a ripple by using a source image and animating it scaling // We draw a ripple by using a source image and animating it scaling
// outwards and fading away. We want the ripples to move linearly // outwards and fading away. We want the ripples to move linearly
// or it looks unrealistic, but if the opacity of the ripple goes // or it looks unrealistic, but if the opacity of the ripple goes
@ -50,16 +49,20 @@ var Ripples = class Ripples {
ripple.scale_x = ripple.scale_y = startScale; ripple.scale_x = ripple.scale_y = startScale;
ripple.set_translation( - this._px * ripple.width, - this._py * ripple.height, 0.0); ripple.set_translation( - this._px * ripple.width, - this._py * ripple.height, 0.0);
Tweener.addTween(ripple, { opacity: 0, ripple.ease({
delay: delay, opacity: 0,
time: time, delay,
transition: 'easeInQuad' }); duration,
Tweener.addTween(ripple, { scale_x: finalScale, mode: Clutter.AnimationMode.EASE_IN_QUAD
});
ripple.ease({
scale_x: finalScale,
scale_y: finalScale, scale_y: finalScale,
delay: delay, delay,
time: time, duration,
transition: 'linear', mode: Clutter.AnimationMode.LINEAR,
onComplete: () => ripple.visible = false }); onComplete: () => ripple.visible = false
});
} }
addTo(stage) { addTo(stage) {
@ -88,8 +91,8 @@ var Ripples = class Ripples {
// for them to make perfect sense mathematically // for them to make perfect sense mathematically
// delay time scale opacity => scale // delay time scale opacity => scale
this._animRipple(this._ripple1, 0.0, 0.83, 0.25, 1.0, 1.5); this._animRipple(this._ripple1, 0, 830, 0.25, 1.0, 1.5);
this._animRipple(this._ripple2, 0.05, 1.0, 0.0, 0.7, 1.25); this._animRipple(this._ripple2, 50, 1000, 0.0, 0.7, 1.25);
this._animRipple(this._ripple3, 0.35, 1.0, 0.0, 0.3, 1); this._animRipple(this._ripple3, 350, 1000, 0.0, 0.3, 1);
} }
}; };

10
js/ui/runDialog.js
View File

@ -6,7 +6,6 @@ const { Clutter, Gio, GLib, GObject, Meta, Shell, St } = imports.gi;
const Main = imports.ui.main; const Main = imports.ui.main;
const ModalDialog = imports.ui.modalDialog; const ModalDialog = imports.ui.modalDialog;
const ShellEntry = imports.ui.shellEntry; const ShellEntry = imports.ui.shellEntry;
const Tweener = imports.ui.tweener;
const Util = imports.misc.util; const Util = imports.misc.util;
const History = imports.misc.history; const History = imports.misc.history;
@ -243,10 +242,11 @@ class RunDialog extends ModalDialog.ModalDialog {
let [, errorBoxNaturalHeight] = this._errorBox.get_preferred_height(-1); let [, errorBoxNaturalHeight] = this._errorBox.get_preferred_height(-1);
let parentActor = this._errorBox.get_parent(); let parentActor = this._errorBox.get_parent();
Tweener.addTween(parentActor, let height = parentActor.height + errorBoxNaturalHeight;
{ height: parentActor.height + errorBoxNaturalHeight, parentActor.ease({
time: DIALOG_GROW_TIME / 1000, height,
transition: 'easeOutQuad', duration: DIALOG_GROW_TIME,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => { onComplete: () => {
parentActor.set_height(-1); parentActor.set_height(-1);
this._errorBox.show(); this._errorBox.show();

75
js/ui/screenShield.js
View File

@ -17,7 +17,6 @@ const Overview = imports.ui.overview;
const MessageTray = imports.ui.messageTray; const MessageTray = imports.ui.messageTray;
const ShellDBus = imports.ui.shellDBus; const ShellDBus = imports.ui.shellDBus;
const SmartcardManager = imports.misc.smartcardManager; const SmartcardManager = imports.misc.smartcardManager;
const Tweener = imports.ui.tweener;
const SCREENSAVER_SCHEMA = 'org.gnome.desktop.screensaver'; const SCREENSAVER_SCHEMA = 'org.gnome.desktop.screensaver';
const LOCK_ENABLED_KEY = 'lock-enabled'; const LOCK_ENABLED_KEY = 'lock-enabled';
@ -250,10 +249,10 @@ var NotificationsBox = class {
let widget = obj.sourceBox; let widget = obj.sourceBox;
let [, natHeight] = widget.get_preferred_height(-1); let [, natHeight] = widget.get_preferred_height(-1);
widget.height = 0; widget.height = 0;
Tweener.addTween(widget, widget.ease({
{ height: natHeight, height: natHeight,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
time: 0.25, duration: 250,
onComplete: () => { onComplete: () => {
this._scrollView.vscrollbar_policy = St.PolicyType.AUTOMATIC; this._scrollView.vscrollbar_policy = St.PolicyType.AUTOMATIC;
widget.set_height(-1); widget.set_height(-1);
@ -734,16 +733,16 @@ var ScreenShield = class {
let maxOpacity = 255 * ARROW_ANIMATION_PEAK_OPACITY; let maxOpacity = 255 * ARROW_ANIMATION_PEAK_OPACITY;
for (let i = 0; i < arrows.length; i++) { for (let i = 0; i < arrows.length; i++) {
arrows[i].opacity = 0; arrows[i].opacity = 0;
Tweener.addTween(arrows[i], arrows[i].ease({
{ opacity: maxOpacity, opacity: maxOpacity,
delay: (unitaryDelay * (N_ARROWS - (i + 1))) / 1000, delay: unitaryDelay * (N_ARROWS - (i + 1)),
time: ARROW_ANIMATION_TIME / (2 * 1000), duration: ARROW_ANIMATION_TIME / 2,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => { onComplete: () => {
Tweener.addTween(arrors[i], { arrows[i].ease({
opacity: 0, opacity: 0,
time: ARROW_ANIMATION_TIME / (2 * 1000), duration: ARROW_ANIMATION_TIME / 2,
transition: 'easeInQuad' mode: Clutter.AnimationMode.EASE_IN_QUAD
}); });
} }
}); });
@ -753,7 +752,7 @@ var ScreenShield = class {
} }
_onDragBegin() { _onDragBegin() {
Tweener.removeTweens(this._lockScreenGroup); this._lockScreenGroup.remove_all_transitions();
this._lockScreenState = MessageTray.State.HIDING; this._lockScreenState = MessageTray.State.HIDING;
if (this._isLocked) if (this._isLocked)
@ -785,12 +784,12 @@ var ScreenShield = class {
// restore the lock screen to its original place // restore the lock screen to its original place
// try to use the same speed as the normal animation // try to use the same speed as the normal animation
let h = global.stage.height; let h = global.stage.height;
let time = MANUAL_FADE_TIME * (-this._lockScreenGroup.y) / h; let duration = MANUAL_FADE_TIME * (-this._lockScreenGroup.y) / h;
Tweener.removeTweens(this._lockScreenGroup); this._lockScreenGroup.remove_all_transitions();
Tweener.addTween(this._lockScreenGroup, this._lockScreenGroup.ease({
{ y: 0, y: 0,
time: time / 1000, duration,
transition: 'easeInQuad', mode: Clutter.AnimationMode.EASE_IN_QUAD,
onComplete: () => { onComplete: () => {
this._lockScreenGroup.fixed_position_set = false; this._lockScreenGroup.fixed_position_set = false;
this._lockScreenState = MessageTray.State.SHOWN; this._lockScreenState = MessageTray.State.SHOWN;
@ -925,7 +924,7 @@ var ScreenShield = class {
this._lockScreenState = MessageTray.State.HIDING; this._lockScreenState = MessageTray.State.HIDING;
Tweener.removeTweens(this._lockScreenGroup); this._lockScreenGroup.remove_all_transitions();
if (animate) { if (animate) {
// Tween the lock screen out of screen // Tween the lock screen out of screen
@ -937,13 +936,13 @@ var ScreenShield = class {
let minVelocity = global.stage.height / CURTAIN_SLIDE_TIME; let minVelocity = global.stage.height / CURTAIN_SLIDE_TIME;
velocity = Math.max(minVelocity, velocity); velocity = Math.max(minVelocity, velocity);
let time = delta / velocity; let duration = delta / velocity;
Tweener.addTween(this._lockScreenGroup, this._lockScreenGroup.ease({
{ y: -h, y: -h,
time: time / 1000, duration,
transition: 'easeInQuad', mode: Clutter.AnimationMode.EASE_IN_QUAD,
onComplete: this._hideLockScreenComplete.bind(this), onComplete: () => this._hideLockScreenComplete()
}); });
} else { } else {
this._hideLockScreenComplete(); this._hideLockScreenComplete();
@ -1004,14 +1003,13 @@ var ScreenShield = class {
if (params.animateLockScreen) { if (params.animateLockScreen) {
this._lockScreenGroup.y = -global.screen_height; this._lockScreenGroup.y = -global.screen_height;
Tweener.removeTweens(this._lockScreenGroup); this._lockScreenGroup.remove_all_transitions();
Tweener.addTween(this._lockScreenGroup, this._lockScreenGroup.ease({
{ y: 0, y: 0,
time: MANUAL_FADE_TIME / 1000, duration: MANUAL_FADE_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => { onComplete: () => {
this._lockScreenShown({ fadeToBlack: fadeToBlack, this._lockScreenShown({ fadeToBlack, animateFade: true });
animateFade: true });
} }
}); });
} else { } else {
@ -1217,13 +1215,12 @@ var ScreenShield = class {
this._isModal = false; this._isModal = false;
} }
Tweener.addTween(this._lockDialogGroup, { this._lockDialogGroup.ease({
scale_x: 0, scale_x: 0,
scale_y: 0, scale_y: 0,
time: animate ? Overview.ANIMATION_TIME / 1000 : 0, duration: animate ? Overview.ANIMATION_TIME : 0,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: this._completeDeactivate.bind(this), onComplete: () => this._completeDeactivate()
onCompleteScope: this
}); });
} }

21
js/ui/screenshot.js
View File

@ -7,7 +7,6 @@ const Signals = imports.signals;
const GrabHelper = imports.ui.grabHelper; const GrabHelper = imports.ui.grabHelper;
const Lightbox = imports.ui.lightbox; const Lightbox = imports.ui.lightbox;
const Main = imports.ui.main; const Main = imports.ui.main;
const Tweener = imports.ui.tweener;
const { loadInterfaceXML } = imports.misc.fileUtils; const { loadInterfaceXML } = imports.misc.fileUtils;
@ -298,13 +297,11 @@ var SelectArea = class {
_onButtonRelease() { _onButtonRelease() {
this._result = this._getGeometry(); this._result = this._getGeometry();
Tweener.addTween(this._group, this._group.ease({
{ opacity: 0, opacity: 0,
time: 0.2, duration: 200,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => { onComplete: () => this._grabHelper.ungrab()
this._grabHelper.ungrab();
}
}); });
return Clutter.EVENT_PROPAGATE; return Clutter.EVENT_PROPAGATE;
} }
@ -382,10 +379,10 @@ var Flashspot = class extends Lightbox.Lightbox {
fire(doneCallback) { fire(doneCallback) {
this.actor.show(); this.actor.show();
this.actor.opacity = 255; this.actor.opacity = 255;
Tweener.addTween(this.actor, this.actor.ease({
{ opacity: 0, opacity: 0,
time: FLASHSPOT_ANIMATION_OUT_TIME / 1000, duration: FLASHSPOT_ANIMATION_OUT_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => { onComplete: () => {
if (doneCallback) if (doneCallback)
doneCallback(); doneCallback();

13
js/ui/switcherPopup.js
View File

@ -5,7 +5,6 @@ const { Clutter, GLib, GObject, Meta, St } = imports.gi;
const Mainloop = imports.mainloop; const Mainloop = imports.mainloop;
const Main = imports.ui.main; const Main = imports.ui.main;
const Tweener = imports.ui.tweener;
var POPUP_DELAY_TIMEOUT = 150; // milliseconds var POPUP_DELAY_TIMEOUT = 150; // milliseconds
@ -284,13 +283,11 @@ var SwitcherPopup = GObject.registerClass({
fadeAndDestroy() { fadeAndDestroy() {
this._popModal(); this._popModal();
if (this.opacity > 0) { if (this.opacity > 0) {
Tweener.addTween(this, this.ease({
{ opacity: 0, opacity: 0,
time: POPUP_FADE_OUT_TIME / 1000, duration: POPUP_FADE_OUT_TIME,
transition: 'easeOutQuad', mode: Clutter.Animation.EASE_OUT_QUAD,
onComplete: () => { onComplete: () => this.destroy()
this.destroy();
}
}); });
} else { } else {
this.destroy(); this.destroy();

35
js/ui/viewSelector.js
View File

@ -10,7 +10,6 @@ const OverviewControls = imports.ui.overviewControls;
const Params = imports.misc.params; const Params = imports.misc.params;
const Search = imports.ui.search; const Search = imports.ui.search;
const ShellEntry = imports.ui.shellEntry; const ShellEntry = imports.ui.shellEntry;
const Tweener = imports.ui.tweener;
const WorkspacesView = imports.ui.workspacesView; const WorkspacesView = imports.ui.workspacesView;
const EdgeDragAction = imports.ui.edgeDragAction; const EdgeDragAction = imports.ui.edgeDragAction;
const IconGrid = imports.ui.iconGrid; const IconGrid = imports.ui.iconGrid;
@ -322,22 +321,20 @@ var ViewSelector = class {
} }
_fadePageIn() { _fadePageIn() {
Tweener.addTween(this._activePage, this._activePage.ease({
{ opacity: 255, opacity: 255,
time: OverviewControls.SIDE_CONTROLS_ANIMATION_TIME / 1000, duration: OverviewControls.SIDE_CONTROLS_ANIMATION_TIME,
transition: 'easeOutQuad' mode: Clutter.AnimationMode.EASE_OUT_QUAD
}); });
} }
_fadePageOut(page) { _fadePageOut(page) {
let oldPage = page; let oldPage = page;
Tweener.addTween(page, page.ease({
{ opacity: 0, opacity: 0,
time: OverviewControls.SIDE_CONTROLS_ANIMATION_TIME / 1000, duration: OverviewControls.SIDE_CONTROLS_ANIMATION_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => { onComplete: () => this._animateIn(oldPage)
this._animateIn(oldPage);
}
}); });
} }
@ -605,17 +602,19 @@ var ViewSelector = class {
fadeIn() { fadeIn() {
let actor = this._activePage; let actor = this._activePage;
Tweener.addTween(actor, { opacity: 255, actor.ease({
time: OverviewControls.SIDE_CONTROLS_ANIMATION_TIME / (2 * 1000), opacity: 255,
transition: 'easeInQuad' duration: OverviewControls.SIDE_CONTROLS_ANIMATION_TIME / 2,
mode: Clutter.AnimationMode.EASE_IN_QUAD
}); });
} }
fadeHalf() { fadeHalf() {
let actor = this._activePage; let actor = this._activePage;
Tweener.addTween(actor, { opacity: 128, actor.ease({
time: OverviewControls.SIDE_CONTROLS_ANIMATION_TIME / (2 * 1000), opacity: 128,
transition: 'easeOutQuad' duration: OverviewControls.SIDE_CONTROLS_ANIMATION_TIME / 2,
mode: Clutter.AnimationMode.EASE_OUT_QUAD
}); });
} }
}; };

235
js/ui/windowManager.js
View File

@ -414,14 +414,14 @@ var TilePreview = class {
this._showing = true; this._showing = true;
this.actor.show(); this.actor.show();
Tweener.addTween(this.actor, this.actor.ease({
{ x: tileRect.x, x: tileRect.x,
y: tileRect.y, y: tileRect.y,
width: tileRect.width, width: tileRect.width,
height: tileRect.height, height: tileRect.height,
opacity: 255, opacity: 255,
time: WINDOW_ANIMATION_TIME / 1000, duration: WINDOW_ANIMATION_TIME,
transition: 'easeOutQuad' mode: Clutter.AnimationMode.EASE_OUT_QUAD
}); });
} }
@ -430,11 +430,11 @@ var TilePreview = class {
return; return;
this._showing = false; this._showing = false;
Tweener.addTween(this.actor, this.actor.ease({
{ opacity: 0, opacity: 0,
time: WINDOW_ANIMATION_TIME / 1000, duration: WINDOW_ANIMATION_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: this._reset.bind(this) onComplete: () => this._reset()
}); });
} }
@ -1137,14 +1137,12 @@ var WindowManager = class {
return; return;
let switchData = this._switchData; let switchData = this._switchData;
this._switchData = null; this._switchData = null;
Tweener.addTween(switchData.container, switchData.container.ease({
{ x: 0, x: 0,
y: 0, y: 0,
time: WINDOW_ANIMATION_TIME / 1000, duration: WINDOW_ANIMATION_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: this._finishWorkspaceSwitch, onComplete: () => this._finishWorkspaceSwitch(switchData)
onCompleteScope: this,
onCompleteParams: [switchData],
}); });
} }
@ -1283,16 +1281,16 @@ var WindowManager = class {
this._minimizing.push(actor); this._minimizing.push(actor);
if (actor.meta_window.is_monitor_sized()) { if (actor.meta_window.is_monitor_sized()) {
Tweener.addTween(actor, actor.ease({
{ opacity: 0, opacity: 0,
time: MINIMIZE_WINDOW_ANIMATION_TIME / 1000, duration: MINIMIZE_WINDOW_ANIMATION_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: this._minimizeWindowDone, onStopped: isFinished => {
onCompleteScope: this, if (isFinished)
onCompleteParams: [shellwm, actor], this._minimizeWindowDone(shellwm, actor);
onOverwrite: this._minimizeWindowOverwritten, else
onOverwriteScope: this, this._minimizeWindowOverwritten(shellwm, actor);
onOverwriteParams: [shellwm, actor] }
}); });
} else { } else {
let xDest, yDest, xScale, yScale; let xDest, yDest, xScale, yScale;
@ -1316,26 +1314,26 @@ var WindowManager = class {
yScale = 0; yScale = 0;
} }
Tweener.addTween(actor, actor.ease({
{ scale_x: xScale, scale_x: xScale,
scale_y: yScale, scale_y: yScale,
x: xDest, x: xDest,
y: yDest, y: yDest,
time: MINIMIZE_WINDOW_ANIMATION_TIME / 1000, duration: MINIMIZE_WINDOW_ANIMATION_TIME,
transition: 'easeInExpo', mode: Clutter.AnimationMode.EASE_IN_EXPO,
onComplete: this._minimizeWindowDone, onStopped: isFinished => {
onCompleteScope: this, if (isFinished)
onCompleteParams: [shellwm, actor], this._minimizeWindowDone(shellwm, actor);
onOverwrite: this._minimizeWindowOverwritten, else
onOverwriteScope: this, this._minimizeWindowOverwritten(shellwm, actor);
onOverwriteParams: [shellwm, actor] }
}); });
} }
} }
_minimizeWindowDone(shellwm, actor) { _minimizeWindowDone(shellwm, actor) {
if (this._removeEffect(this._minimizing, actor)) { if (this._removeEffect(this._minimizing, actor)) {
Tweener.removeTweens(actor); actor.remove_all_transitions();
actor.set_scale(1.0, 1.0); actor.set_scale(1.0, 1.0);
actor.set_opacity(255); actor.set_opacity(255);
actor.set_pivot_point(0, 0); actor.set_pivot_point(0, 0);
@ -1364,16 +1362,16 @@ var WindowManager = class {
if (actor.meta_window.is_monitor_sized()) { if (actor.meta_window.is_monitor_sized()) {
actor.opacity = 0; actor.opacity = 0;
actor.set_scale(1.0, 1.0); actor.set_scale(1.0, 1.0);
Tweener.addTween(actor, actor.ease({
{ opacity: 255, opacity: 255,
time: MINIMIZE_WINDOW_ANIMATION_TIME / 1000, duration: MINIMIZE_WINDOW_ANIMATION_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: this._unminimizeWindowDone, onStopped: isFinished => {
onCompleteScope: this, if (isFinished)
onCompleteParams: [shellwm, actor], this._unminimizeWindowDone(shellwm, actor);
onOverwrite: this._unminimizeWindowOverwritten, else
onOverwriteScope: this, this._unminimizeWindowOverwritten(shellwm, actor);
onOverwriteParams: [shellwm, actor] }
}); });
} else { } else {
let [success, geom] = actor.meta_window.get_icon_geometry(); let [success, geom] = actor.meta_window.get_icon_geometry();
@ -1398,26 +1396,26 @@ var WindowManager = class {
let [xDest, yDest] = [rect.x, rect.y]; let [xDest, yDest] = [rect.x, rect.y];
actor.show(); actor.show();
Tweener.addTween(actor, actor.ease({
{ scale_x: 1.0, scale_x: 1,
scale_y: 1.0, scale_y: 1,
x: xDest, x: xDest,
y: yDest, y: yDest,
time: MINIMIZE_WINDOW_ANIMATION_TIME / 1000, duration: MINIMIZE_WINDOW_ANIMATION_TIME,
transition: 'easeInExpo', mode: Clutter.AnimationMode.EASE_IN_EXPO,
onComplete: this._unminimizeWindowDone, onStopped: isFinished => {
onCompleteScope: this, if (isFinished)
onCompleteParams: [shellwm, actor], this._unminimizeWindowDone(shellwm, actor);
onOverwrite: this._unminimizeWindowOverwritten, else
onOverwriteScope: this, this._unminimizeWindowOverwritten(shellwm, actor);
onOverwriteParams: [shellwm, actor] }
}); });
} }
} }
_unminimizeWindowDone(shellwm, actor) { _unminimizeWindowDone(shellwm, actor) {
if (this._removeEffect(this._unminimizing, actor)) { if (this._removeEffect(this._unminimizing, actor)) {
Tweener.removeTweens(actor); actor.remove_all_transitions();
actor.set_scale(1.0, 1.0); actor.set_scale(1.0, 1.0);
actor.set_opacity(255); actor.set_opacity(255);
actor.set_pivot_point(0, 0); actor.set_pivot_point(0, 0);
@ -1483,14 +1481,14 @@ var WindowManager = class {
this._resizing.push(actor); this._resizing.push(actor);
// Now scale and fade out the clone // Now scale and fade out the clone
Tweener.addTween(actorClone, actorClone.ease({
{ x: targetRect.x, x: targetRect.x,
y: targetRect.y, y: targetRect.y,
scale_x: scaleX, scale_x: scaleX,
scale_y: scaleY, scale_y: scaleY,
opacity: 0, opacity: 0,
time: WINDOW_ANIMATION_TIME / 1000, duration: WINDOW_ANIMATION_TIME,
transition: 'easeOutQuad' mode: Clutter.AnimationMode.EASE_OUT_QUAD
}); });
actor.translation_x = -targetRect.x + sourceRect.x; actor.translation_x = -targetRect.x + sourceRect.x;
@ -1501,19 +1499,19 @@ var WindowManager = class {
actor.scale_y = 1 / scaleY; actor.scale_y = 1 / scaleY;
// Scale it to its actual new size // Scale it to its actual new size
Tweener.addTween(actor, actor.ease({
{ scale_x: 1.0, scale_x: 1,
scale_y: 1.0, scale_y: 1,
translation_x: 0, translation_x: 0,
translation_y: 0, translation_y: 0,
time: WINDOW_ANIMATION_TIME / 1000, duration: WINDOW_ANIMATION_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: this._sizeChangeWindowDone, onStopped: isFinished => {
onCompleteScope: this, if (isFinished)
onCompleteParams: [shellwm, actor], this._sizeChangeWindowDone(shellwm, actor);
onOverwrite: this._sizeChangeWindowOverwritten, else
onOverwriteScope: this, this._sizeChangeWindowOverwritten(shellwm, actor);
onOverwriteParams: [shellwm, actor] }
}); });
// Now unfreeze actor updates, to get it to the new size. // Now unfreeze actor updates, to get it to the new size.
@ -1534,7 +1532,7 @@ var WindowManager = class {
_sizeChangeWindowDone(shellwm, actor) { _sizeChangeWindowDone(shellwm, actor) {
if (this._removeEffect(this._resizing, actor)) { if (this._removeEffect(this._resizing, actor)) {
Tweener.removeTweens(actor); actor.remove_all_transitions();
actor.scale_x = 1.0; actor.scale_x = 1.0;
actor.scale_y = 1.0; actor.scale_y = 1.0;
actor.translation_x = 0; actor.translation_x = 0;
@ -1652,18 +1650,18 @@ var WindowManager = class {
actor.show(); actor.show();
this._mapping.push(actor); this._mapping.push(actor);
Tweener.addTween(actor, actor.ease({
{ opacity: 255, opacity: 255,
scale_x: 1, scale_x: 1,
scale_y: 1, scale_y: 1,
time: SHOW_WINDOW_ANIMATION_TIME / 1000, duration: SHOW_WINDOW_ANIMATION_TIME,
transition: 'easeOutExpo', mode: Clutter.AnimationMode.EASE_OUT_EXPO,
onComplete: this._mapWindowDone, onStopped: isFinished => {
onCompleteScope: this, if (isFinished)
onCompleteParams: [shellwm, actor], this._mapWindowDone(shellwm, actor);
onOverwrite: this._mapWindowOverwrite, else
onOverwriteScope: this, this._mapWindowOverwrite(shellwm, actor);
onOverwriteParams: [shellwm, actor] }
}); });
break; break;
case Meta.WindowType.MODAL_DIALOG: case Meta.WindowType.MODAL_DIALOG:
@ -1674,18 +1672,18 @@ var WindowManager = class {
actor.show(); actor.show();
this._mapping.push(actor); this._mapping.push(actor);
Tweener.addTween(actor, actor.ease({
{ opacity: 255, opacity: 255,
scale_x: 1, scale_x: 1,
scale_y: 1, scale_y: 1,
time: DIALOG_SHOW_WINDOW_ANIMATION_TIME / 1000, duration: DIALOG_SHOW_WINDOW_ANIMATION_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: this._mapWindowDone, onStopped: isFinished => {
onCompleteScope: this, if (isFinished)
onCompleteParams: [shellwm, actor], this._mapWindowDone(shellwm, actor);
onOverwrite: this._mapWindowOverwrite, else
onOverwriteScope: this, this._mapWindowOverwrite(shellwm, actor);
onOverwriteParams: [shellwm, actor] }
}); });
break; break;
default: default:
@ -1696,7 +1694,7 @@ var WindowManager = class {
_mapWindowDone(shellwm, actor) { _mapWindowDone(shellwm, actor) {
if (this._removeEffect(this._mapping, actor)) { if (this._removeEffect(this._mapping, actor)) {
Tweener.removeTweens(actor); actor.remove_all_transitions();
actor.opacity = 255; actor.opacity = 255;
actor.set_pivot_point(0, 0); actor.set_pivot_point(0, 0);
actor.scale_y = 1; actor.scale_y = 1;
@ -1740,18 +1738,13 @@ var WindowManager = class {
actor.set_pivot_point(0.5, 0.5); actor.set_pivot_point(0.5, 0.5);
this._destroying.push(actor); this._destroying.push(actor);
Tweener.addTween(actor, actor.ease({
{ opacity: 0, opacity: 0,
scale_x: 0.8, scale_x: 0.8,
scale_y: 0.8, scale_y: 0.8,
time: DESTROY_WINDOW_ANIMATION_TIME / 1000, duration: DESTROY_WINDOW_ANIMATION_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: this._destroyWindowDone, onStopped: () => this._destroyWindowDone(shellwm, actor)
onCompleteScope: this,
onCompleteParams: [shellwm, actor],
onOverwrite: this._destroyWindowDone,
onOverwriteScope: this,
onOverwriteParams: [shellwm, actor]
}); });
break; break;
case Meta.WindowType.MODAL_DIALOG: case Meta.WindowType.MODAL_DIALOG:
@ -1762,21 +1755,16 @@ var WindowManager = class {
if (window.is_attached_dialog()) { if (window.is_attached_dialog()) {
let parent = window.get_transient_for(); let parent = window.get_transient_for();
actor._parentDestroyId = parent.connect('unmanaged', () => { actor._parentDestroyId = parent.connect('unmanaged', () => {
Tweener.removeTweens(actor); actor.remove_all_transitions();
this._destroyWindowDone(shellwm, actor); this._destroyWindowDone(shellwm, actor);
}); });
} }
Tweener.addTween(actor, actor.ease({
{ scale_y: 0, scale_y: 0,
time: DIALOG_DESTROY_WINDOW_ANIMATION_TIME / 1000, duration: DIALOG_DESTROY_WINDOW_ANIMATION_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: this._destroyWindowDone, onStopped: () => this._destroyWindowDone(shellwm, actor)
onCompleteScope: this,
onCompleteParams: [shellwm, actor],
onOverwrite: this._destroyWindowDone,
onOverwriteScope: this,
onOverwriteParams: [shellwm, actor]
}); });
break; break;
default: default:
@ -1982,7 +1970,6 @@ var WindowManager = class {
global.workspace_manager.get_active_workspace()) global.workspace_manager.get_active_workspace())
w.window.hide(); w.window.hide();
} }
Tweener.removeTweens(switchData.container);
switchData.container.destroy(); switchData.container.destroy();
switchData.movingWindowBin.destroy(); switchData.movingWindowBin.destroy();
@ -2015,14 +2002,12 @@ var WindowManager = class {
xDest = -xDest; xDest = -xDest;
yDest = -yDest; yDest = -yDest;
Tweener.addTween(this._switchData.container, this._switchData.container.ease({
{ x: xDest, x: xDest,
y: yDest, y: yDest,
time: WINDOW_ANIMATION_TIME / 1000, duration: WINDOW_ANIMATION_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: this._switchWorkspaceDone, onComplete: () => this._switchWorkspaceDone(shellwm)
onCompleteScope: this,
onCompleteParams: [shellwm]
}); });
} }

104
js/ui/workspace.js
View File

@ -8,14 +8,13 @@ const Signals = imports.signals;
const DND = imports.ui.dnd; const DND = imports.ui.dnd;
const Main = imports.ui.main; const Main = imports.ui.main;
const Overview = imports.ui.overview; const Overview = imports.ui.overview;
const Tweener = imports.ui.tweener;
var WINDOW_DND_SIZE = 256; var WINDOW_DND_SIZE = 256;
var WINDOW_CLONE_MAXIMUM_SCALE = 1.0; var WINDOW_CLONE_MAXIMUM_SCALE = 1.0;
var WINDOW_OVERLAY_IDLE_HIDE_TIMEOUT = 750; var WINDOW_OVERLAY_IDLE_HIDE_TIMEOUT = 750;
var WINDOW_OVERLAY_FADE_TIME = 0.1; var WINDOW_OVERLAY_FADE_TIME = 100;
var WINDOW_REPOSITIONING_DELAY = 750; var WINDOW_REPOSITIONING_DELAY = 750;
@ -541,9 +540,9 @@ var WindowOverlay = class {
let title = this.title; let title = this.title;
let border = this.border; let border = this.border;
Tweener.removeTweens(button); button.remove_all_transitions();
Tweener.removeTweens(border); border.remove_all_transitions();
Tweener.removeTweens(title); title.remove_all_transitions();
let [cloneX, cloneY, cloneWidth, cloneHeight] = this._windowClone.slot; let [cloneX, cloneY, cloneWidth, cloneHeight] = this._windowClone.slot;
@ -610,16 +609,16 @@ var WindowOverlay = class {
} }
_animateOverlayActor(actor, x, y, width, height) { _animateOverlayActor(actor, x, y, width, height) {
let params = { x: x, let params = {
y: y, x, y, width,
width: width, duration: Overview.ANIMATION_TIME,
time: Overview.ANIMATION_TIME / 1000, mode: Clutter.AnimationMode.EASE_OUT_QUAD
transition: 'easeOutQuad' }; };
if (height !== undefined) if (height !== undefined)
params.height = height; params.height = height;
Tweener.addTween(actor, params); actor.ease(params);
} }
_windowCanClose() { _windowCanClose() {
@ -648,20 +647,22 @@ var WindowOverlay = class {
toAnimate.forEach(a => { toAnimate.forEach(a => {
a.show(); a.show();
a.opacity = 0; a.opacity = 0;
Tweener.addTween(a, a.ease({
{ opacity: 255, opacity: 255,
time: WINDOW_OVERLAY_FADE_TIME / 1000, duration: WINDOW_OVERLAY_FADE_TIME,
transition: 'easeOutQuad' }); mode: Clutter.AnimationMode.EASE_OUT_QUAD
});
}); });
} }
_animateInvisible() { _animateInvisible() {
[this.closeButton, this.border, this.title].forEach(a => { [this.closeButton, this.border, this.title].forEach(a => {
a.opacity = 255; a.opacity = 255;
Tweener.addTween(a, a.ease({
{ opacity: 0, opacity: 0,
time: WINDOW_OVERLAY_FADE_TIME / 1000, duration: WINDOW_OVERLAY_FADE_TIME,
transition: 'easeInQuad' }); mode: Clutter.AnimationMode.EASE_IN_QUAD
});
}); });
} }
@ -1344,17 +1345,17 @@ var Workspace = class {
clone.y = y; clone.y = y;
} }
Tweener.addTween(clone, clone.ease({
{ opacity: 255, opacity: 255,
time: Overview.ANIMATION_TIME / 1000, mode: Clutter.AnimationMode.EASE_IN_QUAD,
transition: 'easeInQuad' duration: Overview.ANIMATION_TIME
}); });
} }
this._animateClone(clone, clone.overlay, x, y, scale); this._animateClone(clone, clone.overlay, x, y, scale);
} else { } else {
// cancel any active tweens (otherwise they might override our changes) // cancel any active tweens (otherwise they might override our changes)
Tweener.removeTweens(clone); clone.remove_all_transitions();
clone.set_position(x, y); clone.set_position(x, y);
clone.set_scale(scale, scale); clone.set_scale(scale, scale);
clone.set_opacity(255); clone.set_opacity(255);
@ -1384,18 +1385,16 @@ var Workspace = class {
} }
_animateClone(clone, overlay, x, y, scale) { _animateClone(clone, overlay, x, y, scale) {
Tweener.addTween(clone, clone.ease({
{ x: x, x, y,
y: y,
scale_x: scale, scale_x: scale,
scale_y: scale, scale_y: scale,
time: Overview.ANIMATION_TIME / 1000, duration: Overview.ANIMATION_TIME,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => { onComplete: () => {
this._showWindowOverlay(clone, overlay); this._showWindowOverlay(clone, overlay);
} }
}); });
clone.overlay.relayout(true); clone.overlay.relayout(true);
} }
@ -1629,10 +1628,8 @@ var Workspace = class {
if (this._windows.length == 0) if (this._windows.length == 0)
return; return;
for (let i = 0; i < this._windows.length; i++) { for (let i = 0; i < this._windows.length; i++)
let clone = this._windows[i]; this._windows[i].remove_all_transitions();
Tweener.removeTweens(clone);
}
if (this._repositionWindowsId > 0) { if (this._repositionWindowsId > 0) {
Mainloop.source_remove(this._repositionWindowsId); Mainloop.source_remove(this._repositionWindowsId);
@ -1681,7 +1678,7 @@ var Workspace = class {
} }
} }
_fadeWindow(index, time, opacity) { _fadeWindow(index, duration, opacity) {
let clone = this._windows[index]; let clone = this._windows[index];
let overlay = this._windowOverlays[index]; let overlay = this._windowOverlays[index];
@ -1694,10 +1691,10 @@ var Workspace = class {
clone.scale_y = 1; clone.scale_y = 1;
clone.x = origX; clone.x = origX;
clone.y = origY; clone.y = origY;
Tweener.addTween(clone, clone.ease({
{ time: time / 1000, opacity,
opacity: opacity, duration,
transition: 'easeOutQuad' mode: Clutter.AnimationMode.EASE_OUT_QUAD
}); });
} else { } else {
// The window is hidden // The window is hidden
@ -1716,10 +1713,8 @@ var Workspace = class {
this.leavingOverview = true; this.leavingOverview = true;
for (let i = 0; i < this._windows.length; i++) { for (let i = 0; i < this._windows.length; i++)
let clone = this._windows[i]; this._windows[i].remove_all_transitions();
Tweener.removeTweens(clone);
}
if (this._repositionWindowsId > 0) { if (this._repositionWindowsId > 0) {
Mainloop.source_remove(this._repositionWindowsId); Mainloop.source_remove(this._repositionWindowsId);
@ -1744,23 +1739,23 @@ var Workspace = class {
if (clone.metaWindow.showing_on_its_workspace()) { if (clone.metaWindow.showing_on_its_workspace()) {
let [origX, origY] = clone.getOriginalPosition(); let [origX, origY] = clone.getOriginalPosition();
Tweener.addTween(clone, clone.ease({
{ x: origX, x: origX,
y: origY, y: origY,
scale_x: 1.0, scale_x: 1,
scale_y: 1.0, scale_y: 1,
time: Overview.ANIMATION_TIME / 1000,
opacity: 255, opacity: 255,
transition: 'easeOutQuad' duration: Overview.ANIMATION_TIME,
mode: Clutter.AnimationMode.EASE_OUT_QUAD
}); });
} else { } else {
// The window is hidden, make it shrink and fade it out // The window is hidden, make it shrink and fade it out
Tweener.addTween(clone, clone.ease({
{ scale_x: 0, scale_x: 0,
scale_y: 0, scale_y: 0,
opacity: 0, opacity: 0,
time: Overview.ANIMATION_TIME / 1000, duration: Overview.ANIMATION_TIME,
transition: 'easeOutQuad' mode: Clutter.AnimationMode.EASE_OUT_QUAD
}); });
} }
} }
@ -1769,12 +1764,11 @@ var Workspace = class {
this.actor.destroy(); this.actor.destroy();
} }
_onDestroy(actor) { _onDestroy() {
if (this._overviewHiddenId) { if (this._overviewHiddenId) {
Main.overview.disconnect(this._overviewHiddenId); Main.overview.disconnect(this._overviewHiddenId);
this._overviewHiddenId = 0; this._overviewHiddenId = 0;
} }
Tweener.removeTweens(actor);
if (this.metaWorkspace) { if (this.metaWorkspace) {
this.metaWorkspace.disconnect(this._windowAddedId); this.metaWorkspace.disconnect(this._windowAddedId);

15
js/ui/workspaceSwitcherPopup.js
View File

@ -5,7 +5,6 @@ const { Clutter, GLib, GObject, Meta, St } = imports.gi;
const Mainloop = imports.mainloop; const Mainloop = imports.mainloop;
const Main = imports.ui.main; const Main = imports.ui.main;
const Tweener = imports.ui.tweener;
var ANIMATION_TIME = 100; var ANIMATION_TIME = 100;
var DISPLAY_TIMEOUT = 600; var DISPLAY_TIMEOUT = 600;
@ -182,9 +181,10 @@ class WorkspaceSwitcherPopup extends St.Widget {
} }
_show() { _show() {
Tweener.addTween(this._container, { opacity: 255, this._container.ease({
time: ANIMATION_TIME / 1000, opacity: 255,
transition: 'easeOutQuad' duration: ANIMATION_TIME,
mode: Clutter.AnimationMode.EASE_OUT_QUAD
}); });
this.show(); this.show();
} }
@ -204,9 +204,10 @@ class WorkspaceSwitcherPopup extends St.Widget {
_onTimeout() { _onTimeout() {
Mainloop.source_remove(this._timeoutId); Mainloop.source_remove(this._timeoutId);
this._timeoutId = 0; this._timeoutId = 0;
Tweener.addTween(this._container, { opacity: 0.0, this._container.ease({
time: ANIMATION_TIME / 1000, opacity: 0.0,
transition: 'easeOutQuad', duration: ANIMATION_TIME,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => this.destroy() onComplete: () => this.destroy()
}); });
return GLib.SOURCE_REMOVE; return GLib.SOURCE_REMOVE;

12
js/ui/workspacesView.js
View File

@ -188,7 +188,7 @@ var WorkspacesView = class extends WorkspacesViewBase {
for (let w = 0; w < this._workspaces.length; w++) { for (let w = 0; w < this._workspaces.length; w++) {
let workspace = this._workspaces[w]; let workspace = this._workspaces[w];
Tweener.removeTweens(workspace.actor); workspace.actor.remove_all_transitions();
let params = {}; let params = {};
if (workspaceManager.layout_rows == -1) if (workspaceManager.layout_rows == -1)
@ -199,21 +199,21 @@ var WorkspacesView = class extends WorkspacesViewBase {
params.x = (w - active) * this._fullGeometry.width; params.x = (w - active) * this._fullGeometry.width;
if (showAnimation) { if (showAnimation) {
let tweenParams = Object.assign(params, { let easeParams = Object.assign(params, {
time: WORKSPACE_SWITCH_TIME / 1000, duration: WORKSPACE_SWITCH_TIME,
transition: 'easeOutQuad' mode: Clutter.AnimationMode.EASE_OUT_QUAD
}); });
// we have to call _updateVisibility() once before the // we have to call _updateVisibility() once before the
// animation and once afterwards - it does not really // animation and once afterwards - it does not really
// matter which tween we use, so we pick the first one ... // matter which tween we use, so we pick the first one ...
if (w == 0) { if (w == 0) {
this._updateVisibility(); this._updateVisibility();
tweenParams.onComplete = () => { easeParams.onComplete = () => {
this._animating = false; this._animating = false;
this._updateVisibility(); this._updateVisibility();
}; };
} }
Tweener.addTween(workspace.actor, tweenParams); workspace.actor.ease(easeParams);
} else { } else {
workspace.actor.set(params); workspace.actor.set(params);
if (w == 0) if (w == 0)

12
src/gnome-shell-extension-tool.in
View File

@ -23,7 +23,6 @@ SAMPLE_EXTENSION_FILES = {
"extension.js": """ "extension.js": """
const St = imports.gi.St; const St = imports.gi.St;
const Main = imports.ui.main; const Main = imports.ui.main;
const Tweener = imports.ui.tweener;
let text, button; let text, button;
@ -45,11 +44,12 @@ function _showHello() {
text.set_position(monitor.x + Math.floor(monitor.width / 2 - text.width / 2), text.set_position(monitor.x + Math.floor(monitor.width / 2 - text.width / 2),
monitor.y + Math.floor(monitor.height / 2 - text.height / 2)); monitor.y + Math.floor(monitor.height / 2 - text.height / 2));
Tweener.addTween(text, text.ease({
{ opacity: 0, opacity: 0,
time: 2, duration: 2000,
transition: 'easeOutQuad', mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: _hideHello }); onComplete: () => _hideHello()
});
} }
function init() { function init() {