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; + let val = 127 * (1 + (dimmed ? 1 : 0) * DIM_BRIGHTNESS); + let color = Clutter.Color.new(val, val, val, 255); - 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(); - } + 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; + 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(); + let index = this._thumbnails.indexOf(thumbnail); + this._thumbnails.splice(index, 1); + thumbnail.destroy(); - this._queueUpdateStates(); - } - }); + 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(); + } + }); } });