gwl: Port to Clutter animations (#12198)

I also made a slight improvement to the scale animation adding a small bounce back on the end of the returning to the original Icon size.
linuxmint · May 17, 2024 · 35ded76 · 35ded76
1 parent bf426e6
commit 35ded76
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 30 deletions.
diff --git a/files/usr/share/cinnamon/applets/grouped-window-list@cinnamon.org/appGroup.js b/files/usr/share/cinnamon/applets/grouped-window-list@cinnamon.org/appGroup.js
@@ -4,7 +4,6 @@ const Clutter = imports.gi.Clutter;
 const GLib = imports.gi.GLib;
 const St = imports.gi.St;
 const Main = imports.ui.main;
-const Tweener = imports.ui.tweener;
 const DND = imports.ui.dnd;
 const Tooltips = imports.ui.tooltips;
 const PopupMenu = imports.ui.popupMenu;
@@ -473,11 +472,11 @@ class AppGroup {
             return;
         }
 
-        Tweener.addTween(this.label, {
+        this.label.ease({
             width,
-            time: BUTTON_BOX_ANIMATION_TIME,
-            transition: 'easeOutQuad',
-            onComplete: () => {
+            duration: BUTTON_BOX_ANIMATION_TIME,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+            onStopped: () => {
                 if (!this.label) return;
                 this.label.show();
             }
@@ -1104,32 +1103,39 @@ class AppGroup {
         if (effect === 1) return;
         else if (effect === 2) {
             this.iconBox.set_z_rotation_from_gravity(0.0, Clutter.Gravity.CENTER);
-            Tweener.addTween(this.iconBox, {
+            this.iconBox.ease({
                 opacity: 70,
-                time: 0.2,
-                transition: 'linear',
-                onCompleteScope: this,
-                onComplete() {
-                    Tweener.addTween(this.iconBox, {
+                duration: 200,
+                mode: Clutter.AnimationMode.LINEAR,
+                onStopped: () => {
+                   this.iconBox.ease({
                         opacity: 255,
-                        time: 0.2,
-                        transition: 'linear'
+                        duration: 200,
+                        mode: Clutter.AnimationMode.LINEAR,
                     });
                 }
             });
         } else if (effect === 3) {
             this.iconBox.set_pivot_point(0.5, 0.5);
-            Tweener.addTween(this.iconBox, {
+            this.iconBox.ease({
                 scale_x: 0.8,
                 scale_y: 0.8,
-                time: 0.2,
-                transition: 'easeOutQuad',
-                onComplete: () => {
-                    Tweener.addTween(this.iconBox, {
-                        scale_x: 1.0,
-                        scale_y: 1.0,
-                        time: 0.2,
-                        transition: 'easeOutQuad'
+                duration: 175,
+                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                onStopped: () => {
+                    this.iconBox.ease({
+                        scale_x: 1.1,
+                        scale_y: 1.1,
+                        duration: 175,
+                        mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                        onStopped: () => {
+                            this.iconBox.ease({
+                                scale_x: 1.0,
+                                scale_y: 1.0,
+                                duration: 50,
+                                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                            });
+                        }
                     });
                 }
             });

diff --git a/files/usr/share/cinnamon/applets/grouped-window-list@cinnamon.org/constants.js b/files/usr/share/cinnamon/applets/grouped-window-list@cinnamon.org/constants.js
@@ -7,7 +7,7 @@ const constants = {
         'background-size: ' + CLOSE_BTN_SIZE + 'px ' + CLOSE_BTN_SIZE + 'px;',
     THUMBNAIL_ICON_SIZE: 16,
     OPACITY_OPAQUE: 255,
-    BUTTON_BOX_ANIMATION_TIME: 0.15,
+    BUTTON_BOX_ANIMATION_TIME: 150,
     MAX_BUTTON_WIDTH: 150, // Pixels
     FLASH_INTERVAL: 500,
     FLASH_MAX_COUNT: 4,

diff --git a/files/usr/share/cinnamon/applets/grouped-window-list@cinnamon.org/menus.js b/files/usr/share/cinnamon/applets/grouped-window-list@cinnamon.org/menus.js
@@ -3,7 +3,6 @@ const Meta = imports.gi.Meta;
 const St = imports.gi.St;
 const Gio = imports.gi.Gio;
 const Main = imports.ui.main;
-const Tweener = imports.ui.tweener;
 const PopupMenu = imports.ui.popupMenu;
 const Applet = imports.ui.applet;
 const SignalManager = imports.misc.signalManager;
@@ -27,17 +26,17 @@ const convertRange = function(value, r1, r2) {
 const setOpacity = (peekTime, window_actor, targetOpacity, cb) => {
     const opacity = convertRange(targetOpacity, [0, 100], [0, 255]);
 
-    const tweenConfig = {
-        time: peekTime * 0.001,
-        transition: 'easeOutQuad',
-        opacity: opacity > 255 ? 255 : opacity
+    const easeConfig = {
+        duration: peekTime,
+        mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+        opacity: opacity > 255 ? 255 : opacity,
     };
 
     if (typeof cb === 'function') {
-        tweenConfig.onComplete = cb;
+        easeConfig.onStopped = cb;
     }
 
-    Tweener.addTween(window_actor, tweenConfig);
+    window_actor.ease(easeConfig);
 };
 
 class AppMenuButtonRightClickMenu extends Applet.AppletPopupMenu {