js: Use implicit animations for animatable properties

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

View File

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