[gnome-shell] js: Ease non-animatable actor properties
- From: Georges Basile Stavracas Neto <gbsneto src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell] js: Ease non-animatable actor properties
- Date: Tue, 6 Aug 2019 22:41:35 +0000 (UTC)
commit fffe7bdf9cde5817736cb5f7fbe777b5c08d122a
Author: Florian Müllner <fmuellner gnome org>
Date: Thu Jul 25 02:06:05 2019 +0200
js: Ease non-animatable actor properties
Properties that aren't marked as animatable don't support *implicit*
animations, but they can still be animated with explicit transitions.
Use the newly added convenience method to cut down further on Tweener
usage.
https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/666
js/ui/keyboard.js | 27 ++++++-------
js/ui/lightbox.js | 68 ++++++++++++++++----------------
js/ui/messageList.js | 19 ++++-----
js/ui/osdWindow.js | 9 ++---
js/ui/overview.js | 29 +++++++-------
js/ui/overviewControls.js | 15 ++++----
js/ui/windowManager.js | 37 +++++++-----------
js/ui/workspaceThumbnail.js | 94 ++++++++++++++++++++-------------------------
8 files changed, 138 insertions(+), 160 deletions(-)
---
diff --git a/js/ui/keyboard.js b/js/ui/keyboard.js
index 1d26e6143..462d860c4 100644
--- a/js/ui/keyboard.js
+++ b/js/ui/keyboard.js
@@ -11,7 +11,6 @@ const Layout = imports.ui.layout;
const Main = imports.ui.main;
const PageIndicators = imports.ui.pageIndicators;
const PopupMenu = imports.ui.popupMenu;
-const Tweener = imports.ui.tweener;
var KEYBOARD_REST_TIME = Layout.KEYBOARD_ANIMATION_TIME * 2;
var KEY_LONG_PRESS_TIME = 250;
@@ -712,15 +711,13 @@ var EmojiPager = GObject.registerClass({
let relDelta = Math.abs(this._delta - value) / this._width;
let time = PANEL_SWITCH_ANIMATION_TIME * Math.abs(relDelta);
- Tweener.removeTweens(this);
- Tweener.addTween(this,
- { delta: value,
- time: time / 1000,
- transition: 'easeInOutQuad',
- onComplete() {
- this.setCurrentPage(this.getFollowingPage());
- }
- });
+ this.remove_all_transitions();
+ this.ease_property('delta', value, {
+ duration: time,
+ onComplete: () => {
+ this.setCurrentPage(this.getFollowingPage());
+ }
+ });
}
}
@@ -728,12 +725,10 @@ var EmojiPager = GObject.registerClass({
let relDelta = Math.abs(this._delta) / this.width;
let time = PANEL_SWITCH_ANIMATION_TIME * Math.abs(relDelta);
- Tweener.removeTweens(this);
- Tweener.addTween(this,
- { delta: 0,
- time: time / 1000,
- transition: 'easeInOutQuad',
- });
+ this.remove_all_transitions();
+ this.ease_property('delta', 0, {
+ duration: time,
+ });
}
_initPagingInfo() {
diff --git a/js/ui/lightbox.js b/js/ui/lightbox.js
index 0f2578154..fbbc01168 100644
--- a/js/ui/lightbox.js
+++ b/js/ui/lightbox.js
@@ -5,7 +5,6 @@ const { Clutter, GObject, Shell, St } = imports.gi;
const Signals = imports.signals;
const Params = imports.misc.params;
-const Tweener = imports.ui.tweener;
var DEFAULT_FADE_FACTOR = 0.4;
var VIGNETTE_BRIGHTNESS = 0.2;
@@ -175,29 +174,31 @@ var Lightbox = class Lightbox {
show(fadeInTime) {
fadeInTime = fadeInTime || 0;
+ this.actor.remove_all_transitions();
+
+ let onComplete = () => {
+ this.shown = true;
+ this.emit('shown');
+ };
+
if (this._radialEffect) {
- let effect = this.actor.get_effect('radial');
- Tweener.removeTweens(effect);
- Tweener.addTween(effect,
- { brightness: VIGNETTE_BRIGHTNESS,
- sharpness: VIGNETTE_SHARPNESS,
- time: fadeInTime / 1000,
- transition: 'easeOutQuad',
- onComplete: () => {
- this.shown = true;
- this.emit('shown');
- }
- });
+ this.actor.ease_property(
+ '@effects.radial.brightness', VIGNETTE_BRIGHTNESS, {
+ duration: fadeInTime,
+ mode: Clutter.AnimationMode.EASE_OUT_QUAD
+ });
+ this.actor.ease_property(
+ '@effects.radial.sharpness', VIGNETTE_SHARPNESS, {
+ duration: fadeInTime,
+ mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+ onComplete
+ });
} else {
- this.actor.remove_all_transitions();
this.actor.ease({
opacity: 255 * this._fadeFactor,
duration: fadeInTime,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
- onComplete: () => {
- this.shown = true;
- this.emit('shown');
- }
+ onComplete
});
}
@@ -208,29 +209,28 @@ var Lightbox = class Lightbox {
fadeOutTime = fadeOutTime || 0;
this.shown = false;
+ this.actor.remove_all_transitions();
+
+ let onComplete = () => this.actor.hide();
if (this._radialEffect) {
- let effect = this.actor.get_effect('radial');
- Tweener.removeTweens(effect);
- Tweener.addTween(effect,
- { brightness: 1.0,
- sharpness: 0.0,
- opacity: 0,
- time: fadeOutTime / 1000,
- transition: 'easeOutQuad',
- onComplete: () => {
- this.actor.hide();
- }
- });
+ this.actor.ease_property(
+ '@effects.radial.brightness', 1.0, {
+ duration: fadeOutTime,
+ mode: Clutter.AnimationMode.EASE_OUT_QUAD
+ });
+ this.actor.ease_property(
+ '@effects.radial.sharpness', 0.0, {
+ duration: fadeOutTime,
+ mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+ onComplete
+ });
} else {
- this.actor.remove_all_transitions();
this.actor.ease({
opacity: 0,
duration: fadeOutTime,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
- onComplete: () => {
- this.actor.hide();
- }
+ onComplete
});
}
}
diff --git a/js/ui/messageList.js b/js/ui/messageList.js
index 8fbd79a84..4dcdb6d7f 100644
--- a/js/ui/messageList.js
+++ b/js/ui/messageList.js
@@ -4,7 +4,6 @@ const MessageTray = imports.ui.messageTray;
const Signals = imports.signals;
const Calendar = imports.ui.calendar;
-const Tweener = imports.ui.tweener;
const Util = imports.misc.util;
var MESSAGE_ANIMATION_TIME = 100;
@@ -440,10 +439,11 @@ var Message = class Message {
}
if (animate) {
- Tweener.addTween(this._bodyStack.layout_manager,
- { expansion: 1,
- time: MessageTray.ANIMATION_TIME / 1000,
- transition: 'easeOutQuad' });
+ this._bodyStack.ease_property('@layout.expansion', 1, {
+ progress_mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+ duration: MessageTray.ANIMATION_TIME,
+ });
+
this._actionBin.scale_y = 0;
this._actionBin.ease({
scale_y: 1,
@@ -460,10 +460,11 @@ var Message = class Message {
unexpand(animate) {
if (animate) {
- Tweener.addTween(this._bodyStack.layout_manager,
- { expansion: 0,
- time: MessageTray.ANIMATION_TIME / 1000,
- transition: 'easeOutQuad' });
+ this._bodyStack.ease_property('@layout.expansion', 0, {
+ progress_mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+ duration: MessageTray.ANIMATION_TIME,
+ });
+
this._actionBin.ease({
scale_y: 0,
duration: MessageTray.ANIMATION_TIME,
diff --git a/js/ui/osdWindow.js b/js/ui/osdWindow.js
index cdcd36a18..0f85dce38 100644
--- a/js/ui/osdWindow.js
+++ b/js/ui/osdWindow.js
@@ -7,7 +7,6 @@ const Mainloop = imports.mainloop;
const BarLevel = imports.ui.barLevel;
const Layout = imports.ui.layout;
const Main = imports.ui.main;
-const Tweener = imports.ui.tweener;
var HIDE_TIMEOUT = 1500;
var FADE_TIME = 100;
@@ -113,10 +112,10 @@ var OsdWindow = class {
this._level.visible = (value != undefined);
if (value != undefined) {
if (this.actor.visible)
- Tweener.addTween(this._level,
- { value: value,
- time: LEVEL_ANIMATION_TIME / 1000,
- transition: 'easeOutQuad' });
+ this._level.ease_property('value', value, {
+ mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+ duration: LEVEL_ANIMATION_TIME
+ });
else
this._level.value = value;
}
diff --git a/js/ui/overview.js b/js/ui/overview.js
index 57dcca278..1325eff6b 100644
--- a/js/ui/overview.js
+++ b/js/ui/overview.js
@@ -13,7 +13,6 @@ const Main = imports.ui.main;
const MessageTray = imports.ui.messageTray;
const OverviewControls = imports.ui.overviewControls;
const Params = imports.misc.params;
-const Tweener = imports.ui.tweener;
const WorkspaceThumbnail = imports.ui.workspaceThumbnail;
// Time for initial animation going into Overview mode
@@ -174,24 +173,28 @@ var Overview = class {
_unshadeBackgrounds() {
let backgrounds = this._backgroundGroup.get_children();
for (let i = 0; i < backgrounds.length; i++) {
- Tweener.addTween(backgrounds[i],
- { brightness: 1.0,
- vignette_sharpness: 0.0,
- time: SHADE_ANIMATION_TIME / 1000,
- transition: 'easeOutQuad'
- });
+ backgrounds[i].ease_property('brightness', 1.0, {
+ duration: SHADE_ANIMATION_TIME,
+ mode: Clutter.AnimationMode.EASE_OUT_QUAD
+ });
+ backgrounds[i].ease_property('vignette-sharpness', 0.0, {
+ duration: SHADE_ANIMATION_TIME,
+ mode: Clutter.AnimationMode.EASE_OUT_QUAD
+ });
}
}
_shadeBackgrounds() {
let backgrounds = this._backgroundGroup.get_children();
for (let i = 0; i < backgrounds.length; i++) {
- Tweener.addTween(backgrounds[i],
- { brightness: Lightbox.VIGNETTE_BRIGHTNESS,
- vignette_sharpness: Lightbox.VIGNETTE_SHARPNESS,
- time: SHADE_ANIMATION_TIME / 1000,
- transition: 'easeOutQuad'
- });
+ backgrounds[i].ease_property('brightness', Lightbox.VIGNETTE_BRIGHTNESS, {
+ duration: SHADE_ANIMATION_TIME,
+ mode: Clutter.AnimationMode.EASE_OUT_QUAD
+ });
+ backgrounds[i].ease_property('vignette-sharpness', Lightbox.VIGNETTE_SHARPNESS, {
+ duration: SHADE_ANIMATION_TIME,
+ mode: Clutter.AnimationMode.EASE_OUT_QUAD
+ });
}
}
diff --git a/js/ui/overviewControls.js b/js/ui/overviewControls.js
index 30cd1e108..c9f9872c8 100644
--- a/js/ui/overviewControls.js
+++ b/js/ui/overviewControls.js
@@ -6,7 +6,6 @@ const { Clutter, GObject, Meta, St } = imports.gi;
const Dash = imports.ui.dash;
const Main = imports.ui.main;
const Params = imports.misc.params;
-const Tweener = imports.ui.tweener;
const ViewSelector = imports.ui.viewSelector;
const WorkspaceThumbnail = imports.ui.workspaceThumbnail;
@@ -147,9 +146,10 @@ var SlidingControl = class {
}
_updateSlide() {
- Tweener.addTween(this.layout, { slide_x: this._getSlide(),
- time: SIDE_CONTROLS_ANIMATION_TIME / 1000,
- transition: 'easeOutQuad' });
+ this.actor.ease_property('@layout.slide-x', this._getSlide(), {
+ mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+ duration: SIDE_CONTROLS_ANIMATION_TIME,
+ });
}
getVisibleWidth() {
@@ -185,9 +185,10 @@ var SlidingControl = class {
return;
this.layout.translation_x = translationStart;
- Tweener.addTween(this.layout, { translation_x: translationEnd,
- time: SIDE_CONTROLS_ANIMATION_TIME / 1000,
- transition: 'easeOutQuad' });
+ this.actor.ease_property('@layout.translation-x', translationEnd, {
+ mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+ duration: SIDE_CONTROLS_ANIMATION_TIME,
+ });
}
_onOverviewHiding() {
diff --git a/js/ui/windowManager.js b/js/ui/windowManager.js
index 1d1f244ad..c6eb37352 100644
--- a/js/ui/windowManager.js
+++ b/js/ui/windowManager.js
@@ -12,7 +12,6 @@ const WorkspaceSwitcherPopup = imports.ui.workspaceSwitcherPopup;
const InhibitShortcutsDialog = imports.ui.inhibitShortcutsDialog;
const Main = imports.ui.main;
const ModalDialog = imports.ui.modalDialog;
-const Tweener = imports.ui.tweener;
const WindowMenu = imports.ui.windowMenu;
const PadOsd = imports.ui.padOsd;
const EdgeDragAction = imports.ui.edgeDragAction;
@@ -118,17 +117,18 @@ class DisplayChangeDialog extends ModalDialog.ModalDialog {
var WindowDimmer = class {
constructor(actor) {
this._brightnessEffect = new Clutter.BrightnessContrastEffect({
+ name: 'dim',
enabled: false
});
actor.add_effect(this._brightnessEffect);
this.actor = actor;
this._enabled = true;
- this._dimFactor = 0.0;
}
_syncEnabled() {
+ let animating = this.actor.get_transition('@effects.dim.brightness') != null;
let dimmed = this._brightnessEffect.brightness.red != 127;
- this._brightnessEffect.enabled = (this._enabled && dimmed);
+ this._brightnessEffect.enabled = this._enabled && (animating || dimmed);
}
setEnabled(enabled) {
@@ -137,27 +137,16 @@ var WindowDimmer = class {
}
setDimmed(dimmed, animate) {
- let factor = dimmed ? 1.0 : 0.0;
-
- if (animate) {
- Tweener.addTween(this, {
- _dimFactor: factor,
- time: (dimmed ? DIM_TIME : UNDIM_TIME) / 1000,
- transition: 'linear',
- onUpdate: () => {
- let val = 127 * (1 + this._dimFactor * DIM_BRIGHTNESS);
- let color = Clutter.Color.new(val, val, val, 255);
- this._brightnessEffect.brightness = color;
- this._syncEnabled();
- }
- });
- } else {
- this._dimFactor = factor;
- let val = 127 * (1 + this._dimFactor * DIM_BRIGHTNESS);
- let color = Clutter.Color.new(val, val, val, 255);
- this._brightnessEffect.brightness = color;
- this._syncEnabled();
- }
+ let val = 127 * (1 + (dimmed ? 1 : 0) * DIM_BRIGHTNESS);
+ let color = Clutter.Color.new(val, val, val, 255);
+
+ this.actor.ease_property('@effects.dim.brightness', color, {
+ mode: Clutter.AnimationMode.LINEAR,
+ duration: (dimmed ? DIM_TIME : UNDIM_TIME) * (animate ? 1 : 0),
+ onComplete: () => this._syncEnabled()
+ });
+
+ this._syncEnabled();
}
};
diff --git a/js/ui/workspaceThumbnail.js b/js/ui/workspaceThumbnail.js
index 989f088d7..c516934c9 100644
--- a/js/ui/workspaceThumbnail.js
+++ b/js/ui/workspaceThumbnail.js
@@ -8,7 +8,6 @@ const Signals = imports.signals;
const Background = imports.ui.background;
const DND = imports.ui.dnd;
const Main = imports.ui.main;
-const Tweener = imports.ui.tweener;
const Workspace = imports.ui.workspace;
const WorkspacesView = imports.ui.workspacesView;
@@ -1072,15 +1071,6 @@ var ThumbnailsBox = GObject.registerClass({
}
}
- _tweenScale() {
- Tweener.addTween(this,
- { scale: this._targetScale,
- time: RESCALE_ANIMATION_TIME / 1000,
- transition: 'easeOutQuad',
- onComplete: this._queueUpdateStates,
- onCompleteScope: this });
- }
-
_updateStates() {
this._stateUpdateQueued = false;
@@ -1092,15 +1082,14 @@ var ThumbnailsBox = GObject.registerClass({
this._iterateStateThumbnails(ThumbnailState.REMOVING, thumbnail => {
this._setThumbnailState(thumbnail, ThumbnailState.ANIMATING_OUT);
- Tweener.addTween(thumbnail,
- { slide_position: 1,
- time: SLIDE_ANIMATION_TIME / 1000,
- transition: 'linear',
- onComplete: () => {
- this._setThumbnailState(thumbnail, ThumbnailState.ANIMATED_OUT);
- this._queueUpdateStates();
- }
- });
+ thumbnail.ease_property('slide-position', 1, {
+ duration: SLIDE_ANIMATION_TIME,
+ mode: Clutter.AnimationMode.LINEAR,
+ onComplete: () => {
+ this._setThumbnailState(thumbnail, ThumbnailState.ANIMATED_OUT);
+ this._queueUpdateStates();
+ }
+ });
});
// As long as things are sliding out, don't proceed
@@ -1110,25 +1099,28 @@ var ThumbnailsBox = GObject.registerClass({
// Once that's complete, we can start scaling to the new size and collapse any removed thumbnails
this._iterateStateThumbnails(ThumbnailState.ANIMATED_OUT, thumbnail => {
this._setThumbnailState(thumbnail, ThumbnailState.COLLAPSING);
- Tweener.addTween(thumbnail,
- { collapse_fraction: 1,
- time: RESCALE_ANIMATION_TIME / 1000,
- transition: 'easeOutQuad',
- onComplete: () => {
- this._stateCounts[thumbnail.state]--;
- thumbnail.state = ThumbnailState.DESTROYED;
-
- let index = this._thumbnails.indexOf(thumbnail);
- this._thumbnails.splice(index, 1);
- thumbnail.destroy();
-
- this._queueUpdateStates();
- }
- });
+ thumbnail.ease_property('collapse-fraction', 1, {
+ duration: RESCALE_ANIMATION_TIME,
+ mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+ onComplete: () => {
+ this._stateCounts[thumbnail.state]--;
+ thumbnail.state = ThumbnailState.DESTROYED;
+
+ let index = this._thumbnails.indexOf(thumbnail);
+ this._thumbnails.splice(index, 1);
+ thumbnail.destroy();
+
+ this._queueUpdateStates();
+ }
+ });
});
if (this._pendingScaleUpdate) {
- this._tweenScale();
+ this.ease_property('scale', this._targetScale, {
+ mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+ duration: RESCALE_ANIMATION_TIME,
+ onComplete: () => this._queueUpdateStates()
+ });
this._pendingScaleUpdate = false;
}
@@ -1139,14 +1131,13 @@ var ThumbnailsBox = GObject.registerClass({
// And then slide in any new thumbnails
this._iterateStateThumbnails(ThumbnailState.NEW, thumbnail => {
this._setThumbnailState(thumbnail, ThumbnailState.ANIMATING_IN);
- Tweener.addTween(thumbnail,
- { slide_position: 0,
- time: SLIDE_ANIMATION_TIME / 1000,
- transition: 'easeOutQuad',
- onComplete: () => {
- this._setThumbnailState(thumbnail, ThumbnailState.NORMAL);
- }
- });
+ thumbnail.ease_property('slide-position', 0, {
+ duration: SLIDE_ANIMATION_TIME,
+ mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+ onComplete: () => {
+ this._setThumbnailState(thumbnail, ThumbnailState.NORMAL);
+ }
+ });
});
}
@@ -1363,14 +1354,13 @@ var ThumbnailsBox = GObject.registerClass({
let indicatorThemeNode = this._indicator.get_theme_node();
let indicatorTopFullBorder = indicatorThemeNode.get_padding(St.Side.TOP) +
indicatorThemeNode.get_border_width(St.Side.TOP);
this.indicator_y = this._indicator.allocation.y1 + indicatorTopFullBorder;
- Tweener.addTween(this,
- { indicator_y: thumbnail.allocation.y1,
- time: WorkspacesView.WORKSPACE_SWITCH_TIME / 1000,
- transition: 'easeOutQuad',
- onComplete: () => {
- this._animatingIndicator = false;
- this._queueUpdateStates();
- }
- });
+ this.ease_property('indicator-y', thumbnail.allocation.y1, {
+ progress_mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+ duration: WorkspacesView.WORKSPACE_SWITCH_TIME,
+ onComplete: () => {
+ this._animatingIndicator = false;
+ this._queueUpdateStates();
+ }
+ });
}
});
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
