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

js: Use implicit animations for animatable properties

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

92
js/ui/messageList.js
View File

@ -445,10 +445,11 @@ var Message = class Message {
time: MessageTray.ANIMATION_TIME / 1000,
transition: 'easeOutQuad' });
this._actionBin.scale_y = 0;
Tweener.addTween(this._actionBin,
{ scale_y: 1,
time: MessageTray.ANIMATION_TIME / 1000,
transition: 'easeOutQuad' });
this._actionBin.ease({
scale_y: 1,
duration: MessageTray.ANIMATION_TIME,
mode: Clutter.AnimationMode.EASE_OUT_QUAD
});
} else {
this._bodyStack.layout_manager.expansion = 1;
this._actionBin.scale_y = 1;
@ -463,14 +464,15 @@ var Message = class Message {
{ expansion: 0,
time: MessageTray.ANIMATION_TIME / 1000,
transition: 'easeOutQuad' });
Tweener.addTween(this._actionBin,
{ scale_y: 0,
time: MessageTray.ANIMATION_TIME / 1000,
transition: 'easeOutQuad',
onComplete: () => {
this._actionBin.hide();
this.expanded = false;
} });
this._actionBin.ease({
scale_y: 0,
duration: MessageTray.ANIMATION_TIME,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => {
this._actionBin.hide();
this.expanded = false;
}
});
} else {
this._bodyStack.layout_manager.expansion = 0;
this._actionBin.scale_y = 0;
@ -581,10 +583,12 @@ var MessageListSection = class MessageListSection {
this._list.insert_child_at_index(obj.container, index);
if (animate)
Tweener.addTween(obj.container, { scale_x: 1,
scale_y: 1,
time: MESSAGE_ANIMATION_TIME / 1000,
transition: 'easeOutQuad' });
obj.container.ease({
scale_x: 1,
scale_y: 1,
duration: MESSAGE_ANIMATION_TIME,
mode: Clutter.AnimationMode.EASE_OUT_QUAD
});
}
moveMessage(message, index, animate) {
@ -597,16 +601,20 @@ var MessageListSection = class MessageListSection {
let onComplete = () => {
this._list.set_child_at_index(obj.container, index);
Tweener.addTween(obj.container, { scale_x: 1,
scale_y: 1,
time: MESSAGE_ANIMATION_TIME / 1000,
transition: 'easeOutQuad' });
obj.container.ease({
scale_x: 1,
scale_y: 1,
duration: MESSAGE_ANIMATION_TIME,
mode: Clutter.AnimationMode.EASE_OUT_QUAD
});
};
Tweener.addTween(obj.container, { scale_x: 0,
scale_y: 0,
time: MESSAGE_ANIMATION_TIME / 1000,
transition: 'easeOutQuad',
onComplete: onComplete });
obj.container.ease({
scale_x: 0,
scale_y: 0,
duration: MESSAGE_ANIMATION_TIME,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete
});
}
removeMessage(message, animate) {
@ -619,13 +627,16 @@ var MessageListSection = class MessageListSection {
this._messages.delete(message);
if (animate) {
Tweener.addTween(obj.container, { scale_x: 0, scale_y: 0,
time: MESSAGE_ANIMATION_TIME / 1000,
transition: 'easeOutQuad',
onComplete() {
obj.container.destroy();
global.sync_pointer();
} });
obj.container.ease({
scale_x: 0,
scale_y: 0,
duration: MESSAGE_ANIMATION_TIME,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => {
obj.container.destroy();
global.sync_pointer();
}
});
} else {
obj.container.destroy();
global.sync_pointer();
@ -647,15 +658,14 @@ var MessageListSection = class MessageListSection {
for (let i = 0; i < messages.length; i++) {
let message = messages[i];
let obj = this._messages.get(message);
Tweener.addTween(obj.container,
{ anchor_x: this._list.width,
opacity: 0,
time: MESSAGE_ANIMATION_TIME / 1000,
delay: i * delay / 1000,
transition: 'easeOutQuad',
onComplete() {
message.close();
} });
obj.container.ease({
anchor_x: this._list.width,
opacity: 0,
duration: MESSAGE_ANIMATION_TIME,
delay: i * delay,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => message.close()
});
}
}
}