diff --git a/packages/g6/src/elements/shapes/base-shape.ts b/packages/g6/src/elements/shapes/base-shape.ts index 3d21bf93c66..6155916b7ff 100644 --- a/packages/g6/src/elements/shapes/base-shape.ts +++ b/packages/g6/src/elements/shapes/base-shape.ts @@ -152,7 +152,10 @@ export abstract class BaseShape 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 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 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 extends super.destroy(); } } + +/** + * 释放动画 + * + * Release animation + * @param target - 目标对象 | target object + * @param animation - 动画实例 | 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); + }); +} diff --git a/packages/g6/src/runtime/animation.ts b/packages/g6/src/runtime/animation.ts index ae2be8c1d92..7577a927da8 100644 --- a/packages/g6/src/runtime/animation.ts +++ b/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 = []; } + /** + * 释放存量动画对象 + * + * 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();