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

js: Ease non-animatable actor properties

Browse Source 
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
This commit is contained in:
Florian Müllner 2019-07-25 02:06:05 +02:00
parent ef18f621ac
commit fffe7bdf9c
8 changed files with 135 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
js/ui/keyboard.js
View File

@ -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() {

68
js/ui/lightbox.js
View File

@ -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
});
}
}

19
js/ui/messageList.js
View File

@ -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,

9
js/ui/osdWindow.js
View File

@ -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;
}

29
js/ui/overview.js
View File

@ -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
});
}
}

15
js/ui/overviewControls.js
View File

@ -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() {

35
js/ui/windowManager.js
View File

@ -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();
}
};

90
js/ui/workspaceThumbnail.js
View File

@ -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();
}
});
}
});