perf(animation): optimize animation object memory

packages/g6/src/elements/shapes/base-shape.ts

@@ -152,7 +152,10 @@ export abstract class BaseShape<StyleProps extends BaseShapeStyleProps> extends
     }
 
     const result = super.animate(keyframes, options);
-    if (result) animationMap.push(result);
+    if (result) {
+      releaseAnimation(this, result);
+      animationMap.push(result);
+    }
 
     if (Array.isArray(keyframes) && keyframes.length > 0) {
       // 如果 keyframes 中仅存在 skippedAttrs 中的属性，则仅更新父元素属性（跳过子图形）
@@ -170,7 +173,10 @@ export abstract class BaseShape<StyleProps extends BaseShapeStyleProps> extends
               method.call(this, { ...this.attributes, ...style }),
             );
             const result = shape.animate(preprocessKeyframes(subKeyframes), options);
-            if (result) animationMap.push(result);
+            if (result) {
+              releaseAnimation(shape, result);
+              animationMap.push(result);
+            }
           }
         });
 
@@ -185,7 +191,10 @@ export abstract class BaseShape<StyleProps extends BaseShapeStyleProps> extends
                 const shape = shapeSet[key];
                 if (shape) {
                   const result = shape.animate(preprocessKeyframes(subKeyframes), options);
-                  if (result) animationMap.push(result);
+                  if (result) {
+                    releaseAnimation(shape, result);
+                    animationMap.push(result);
+                  }
                 }
               });
             }
@@ -217,3 +226,21 @@ export abstract class BaseShape<StyleProps extends BaseShapeStyleProps> extends
     super.destroy();
   }
 }
+
+/**
+ * <zh/> 释放动画
+ *
+ * <en/> Release animation
+ * @param target - <zh/> 目标对象 | <en/> target object
+ * @param animation - <zh/> 动画实例 | <en/> animation instance
+ * @description see: https://github.com/antvis/G/issues/1731
+ */
+function releaseAnimation(target: DisplayObject, animation: IAnimation) {
+  animation.oncancel = () => console.log('cancel');
+  animation?.finished.then(() => {
+    // @ts-expect-error private property
+    const index = target.activeAnimations.findIndex((_) => _ === animation);
+    // @ts-expect-error private property
+    if (index > -1) target.activeAnimations.splice(index, 1);
+  });
+}

packages/g6/src/runtime/animation.ts

@@ -46,6 +46,7 @@ export class Animation {
           animation.finished.then(() => {
             cb?.afterAnimate?.(animation);
             cb?.after?.();
+            this.animations.delete(animation);
           });
         } else cb?.after?.();
 
@@ -63,6 +64,7 @@ export class Animation {
       animation.finished.then(() => {
         callbacks?.afterAnimate?.(animation);
         callbacks?.after?.();
+        this.release();
       });
     } else callbacks?.after?.();
 
@@ -147,6 +149,25 @@ export class Animation {
     this.tasks = [];
   }
 
+  /**
+   * <zh/> 释放存量动画对象
+   *
+   * <en/> Release stock animation objects
+   * @description see: https://github.com/antvis/G/issues/1731
+   */
+  private release() {
+    const { canvas } = this.context;
+
+    // @ts-expect-error private property
+    const animationsWithPromises = canvas.document?.timeline?.animationsWithPromises;
+    if (animationsWithPromises) {
+      // @ts-expect-error private property
+      canvas.document.timeline.animationsWithPromises = animationsWithPromises.filter(
+        (animation: IAnimation) => animation.playState !== 'finished',
+      );
+    }
+  }
+
   public destroy() {
     this.stop();
     this.animations.clear();