From 00e2a5c5a540273ac03e6b43bf37817c903c28f4 Mon Sep 17 00:00:00 2001 From: Adam Williamson Date: Fri, 23 Aug 2019 12:48:47 -0700 Subject: [PATCH] Revert "js: Ease non-animatable actor properties" This reverts commit fffe7bdf9cde5817736cb5f7fbe777b5c08d122a. It causes breakage in the overview: https://bugzilla.redhat.com/show_bug.cgi?id=1740897 --- 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, 160 insertions(+), 138 deletions(-) diff --git a/js/ui/keyboard.js b/js/ui/keyboard.js index 462d860c4..1d26e6143 100644 --- a/js/ui/keyboard.js +++ b/js/ui/keyboard.js @@ -11,6 +11,7 @@ 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; @@ -711,13 +712,15 @@ var EmojiPager = GObject.registerClass({ let relDelta = Math.abs(this._delta - value) / this._width; let time = PANEL_SWITCH_ANIMATION_TIME * Math.abs(relDelta); - this.remove_all_transitions(); - this.ease_property('delta', value, { - duration: time, - onComplete: () => { - this.setCurrentPage(this.getFollowingPage()); - } - }); + Tweener.removeTweens(this); + Tweener.addTween(this, + { delta: value, + time: time / 1000, + transition: 'easeInOutQuad', + onComplete() { + this.setCurrentPage(this.getFollowingPage()); + } + }); } } @@ -725,10 +728,12 @@ var EmojiPager = GObject.registerClass({ let relDelta = Math.abs(this._delta) / this.width; let time = PANEL_SWITCH_ANIMATION_TIME * Math.abs(relDelta); - this.remove_all_transitions(); - this.ease_property('delta', 0, { - duration: time, - }); + Tweener.removeTweens(this); + Tweener.addTween(this, + { delta: 0, + time: time / 1000, + transition: 'easeInOutQuad', + }); } _initPagingInfo() { diff --git a/js/ui/lightbox.js b/js/ui/lightbox.js index fbbc01168..0f2578154 100644 --- a/js/ui/lightbox.js +++ b/js/ui/lightbox.js @@ -5,6 +5,7 @@ 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; @@ -174,31 +175,29 @@ 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) { - 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 - }); + 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'); + } + }); } else { + this.actor.remove_all_transitions(); this.actor.ease({ opacity: 255 * this._fadeFactor, duration: fadeInTime, mode: Clutter.AnimationMode.EASE_OUT_QUAD, - onComplete + onComplete: () => { + this.shown = true; + this.emit('shown'); + } }); } @@ -209,28 +208,29 @@ var Lightbox = class Lightbox { fadeOutTime = fadeOutTime || 0; this.shown = false; - this.actor.remove_all_transitions(); - - let onComplete = () => this.actor.hide(); if (this._radialEffect) { - 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 - }); + 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(); + } + }); } else { + this.actor.remove_all_transitions(); this.actor.ease({ opacity: 0, duration: fadeOutTime, mode: Clutter.AnimationMode.EASE_OUT_QUAD, - onComplete + onComplete: () => { + this.actor.hide(); + } }); } } diff --git a/js/ui/messageList.js b/js/ui/messageList.js index 4dcdb6d7f..8fbd79a84 100644 --- a/js/ui/messageList.js +++ b/js/ui/messageList.js @@ -4,6 +4,7 @@ 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; @@ -439,11 +440,10 @@ var Message = class Message { } if (animate) { - this._bodyStack.ease_property('@layout.expansion', 1, { - progress_mode: Clutter.AnimationMode.EASE_OUT_QUAD, - duration: MessageTray.ANIMATION_TIME, - }); - + Tweener.addTween(this._bodyStack.layout_manager, + { expansion: 1, + time: MessageTray.ANIMATION_TIME / 1000, + transition: 'easeOutQuad' }); this._actionBin.scale_y = 0; this._actionBin.ease({ scale_y: 1, @@ -460,11 +460,10 @@ var Message = class Message { unexpand(animate) { if (animate) { - this._bodyStack.ease_property('@layout.expansion', 0, { - progress_mode: Clutter.AnimationMode.EASE_OUT_QUAD, - duration: MessageTray.ANIMATION_TIME, - }); - + Tweener.addTween(this._bodyStack.layout_manager, + { expansion: 0, + time: MessageTray.ANIMATION_TIME / 1000, + transition: 'easeOutQuad' }); this._actionBin.ease({ scale_y: 0, duration: MessageTray.ANIMATION_TIME, diff --git a/js/ui/osdWindow.js b/js/ui/osdWindow.js index 0f85dce38..cdcd36a18 100644 --- a/js/ui/osdWindow.js +++ b/js/ui/osdWindow.js @@ -7,6 +7,7 @@ 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; @@ -112,10 +113,10 @@ var OsdWindow = class { this._level.visible = (value != undefined); if (value != undefined) { if (this.actor.visible) - this._level.ease_property('value', value, { - mode: Clutter.AnimationMode.EASE_OUT_QUAD, - duration: LEVEL_ANIMATION_TIME - }); + Tweener.addTween(this._level, + { value: value, + time: LEVEL_ANIMATION_TIME / 1000, + transition: 'easeOutQuad' }); else this._level.value = value; } diff --git a/js/ui/overview.js b/js/ui/overview.js index 1325eff6b..57dcca278 100644 --- a/js/ui/overview.js +++ b/js/ui/overview.js @@ -13,6 +13,7 @@ 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 @@ -173,28 +174,24 @@ var Overview = class { _unshadeBackgrounds() { let backgrounds = this._backgroundGroup.get_children(); for (let i = 0; i < backgrounds.length; i++) { - 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 - }); + Tweener.addTween(backgrounds[i], + { brightness: 1.0, + vignette_sharpness: 0.0, + time: SHADE_ANIMATION_TIME / 1000, + transition: 'easeOutQuad' + }); } } _shadeBackgrounds() { let backgrounds = this._backgroundGroup.get_children(); for (let i = 0; i < backgrounds.length; i++) { - 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 - }); + Tweener.addTween(backgrounds[i], + { brightness: Lightbox.VIGNETTE_BRIGHTNESS, + vignette_sharpness: Lightbox.VIGNETTE_SHARPNESS, + time: SHADE_ANIMATION_TIME / 1000, + transition: 'easeOutQuad' + }); } } diff --git a/js/ui/overviewControls.js b/js/ui/overviewControls.js index cf24a5e56..761c69f44 100644 --- a/js/ui/overviewControls.js +++ b/js/ui/overviewControls.js @@ -6,6 +6,7 @@ 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; @@ -146,10 +147,9 @@ var SlidingControl = class { } _updateSlide() { - this.actor.ease_property('@layout.slide-x', this._getSlide(), { - mode: Clutter.AnimationMode.EASE_OUT_QUAD, - duration: SIDE_CONTROLS_ANIMATION_TIME, - }); + Tweener.addTween(this.layout, { slide_x: this._getSlide(), + time: SIDE_CONTROLS_ANIMATION_TIME / 1000, + transition: 'easeOutQuad' }); } getVisibleWidth() { @@ -185,10 +185,9 @@ var SlidingControl = class { return; this.layout.translation_x = translationStart; - this.actor.ease_property('@layout.translation-x', translationEnd, { - mode: Clutter.AnimationMode.EASE_OUT_QUAD, - duration: SIDE_CONTROLS_ANIMATION_TIME, - }); + Tweener.addTween(this.layout, { translation_x: translationEnd, + time: SIDE_CONTROLS_ANIMATION_TIME / 1000, + transition: 'easeOutQuad' }); } _onOverviewHiding() { diff --git a/js/ui/windowManager.js b/js/ui/windowManager.js index 346485ffd..b8200c996 100644 --- a/js/ui/windowManager.js +++ b/js/ui/windowManager.js @@ -12,6 +12,7 @@ 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; @@ -117,18 +118,17 @@ 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 && (animating || dimmed); + this._brightnessEffect.enabled = (this._enabled && dimmed); } setEnabled(enabled) { @@ -137,16 +137,27 @@ var WindowDimmer = class { } setDimmed(dimmed, animate) { - 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(); + 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(); + } } }; diff --git a/js/ui/workspaceThumbnail.js b/js/ui/workspaceThumbnail.js index c516934c9..989f088d7 100644 --- a/js/ui/workspaceThumbnail.js +++ b/js/ui/workspaceThumbnail.js @@ -8,6 +8,7 @@ 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; @@ -1071,6 +1072,15 @@ 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; @@ -1082,14 +1092,15 @@ var ThumbnailsBox = GObject.registerClass({ this._iterateStateThumbnails(ThumbnailState.REMOVING, thumbnail => { this._setThumbnailState(thumbnail, ThumbnailState.ANIMATING_OUT); - thumbnail.ease_property('slide-position', 1, { - duration: SLIDE_ANIMATION_TIME, - mode: Clutter.AnimationMode.LINEAR, - onComplete: () => { - this._setThumbnailState(thumbnail, ThumbnailState.ANIMATED_OUT); - this._queueUpdateStates(); - } - }); + Tweener.addTween(thumbnail, + { slide_position: 1, + time: SLIDE_ANIMATION_TIME / 1000, + transition: 'linear', + onComplete: () => { + this._setThumbnailState(thumbnail, ThumbnailState.ANIMATED_OUT); + this._queueUpdateStates(); + } + }); }); // As long as things are sliding out, don't proceed @@ -1099,28 +1110,25 @@ 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); - 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(); - } - }); + 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(); + } + }); }); if (this._pendingScaleUpdate) { - this.ease_property('scale', this._targetScale, { - mode: Clutter.AnimationMode.EASE_OUT_QUAD, - duration: RESCALE_ANIMATION_TIME, - onComplete: () => this._queueUpdateStates() - }); + this._tweenScale(); this._pendingScaleUpdate = false; } @@ -1131,13 +1139,14 @@ var ThumbnailsBox = GObject.registerClass({ // And then slide in any new thumbnails this._iterateStateThumbnails(ThumbnailState.NEW, thumbnail => { this._setThumbnailState(thumbnail, ThumbnailState.ANIMATING_IN); - thumbnail.ease_property('slide-position', 0, { - duration: SLIDE_ANIMATION_TIME, - mode: Clutter.AnimationMode.EASE_OUT_QUAD, - onComplete: () => { - this._setThumbnailState(thumbnail, ThumbnailState.NORMAL); - } - }); + Tweener.addTween(thumbnail, + { slide_position: 0, + time: SLIDE_ANIMATION_TIME / 1000, + transition: 'easeOutQuad', + onComplete: () => { + this._setThumbnailState(thumbnail, ThumbnailState.NORMAL); + } + }); }); } @@ -1354,13 +1363,14 @@ 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; - 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(); - } - }); + Tweener.addTween(this, + { indicator_y: thumbnail.allocation.y1, + time: WorkspacesView.WORKSPACE_SWITCH_TIME / 1000, + transition: 'easeOutQuad', + onComplete: () => { + this._animatingIndicator = false; + this._queueUpdateStates(); + } + }); } }); -- 2.23.0