fix(animate): keep interrupted state animations on latest patch

State changes can arrive before the previous state animation ends.

Old state animation could still write or restore once more.

Removed state attrs then moved in the wrong direction before takeover.

The state animation target now includes attrs removed from the previous patch.

Synthetic state-to-state transitions stop the old executor without restore.

The new transition starts from the current visual frame.

Constraint: Animation frames must stay transient under D3 static truth.

Rejected: Commit state animation frames to baseAttributes | breaks state ownership.

Rejected: Let stale state animations continue | leaves one stale write frame.

Confidence: high

Scope-risk: moderate

Directive: Keep the interrupted state-stack regression before changing this path.

Tested: vrender-animate full unit suite

Tested: vrender-core state and attribute targeted suites

Tested: rush compile -t @visactor/vrender-animate

Tested: rush build -t @visactor/vrender and CJS state-sequence smoke

Tested: rush test --only tag:package

Author: xuefei1313

packages/vrender-animate/__tests__/unit/animation-runtime-attribute.test.ts

@@ -121,6 +121,134 @@ describe('D3 pre-handoff animation runtime', () => {
     expect((rect as any).baseAttributes.opacity).toBe(1);
   });
 
+  test('state animation ends at the resolved state style without committing it to baseAttributes', () => {
+    const { group, ticker, graphicService } = createStageHarness('state-runtime-end-style');
+    const rect = createAnimatedRect(graphicService);
+    rect.setAttribute('lineWidth', 1);
+    rect.setFinalAttributes({ ...rect.attribute });
+    group.appendChild(rect);
+
+    rect.states = {
+      a: {
+        opacity: 0.35,
+        lineWidth: 6
+      }
+    } as any;
+    rect.stateAnimateConfig = {
+      duration: 100,
+      easing: 'linear'
+    } as any;
+
+    rect.useStates(['a'], true);
+
+    expect(rect.currentStates).toEqual(['a']);
+    expect(rect.resolvedStatePatch).toEqual({
+      opacity: 0.35,
+      lineWidth: 6
+    });
+    expect(rect.attribute.opacity).toBe(1);
+    expect(rect.attribute.lineWidth).toBe(1);
+    expect((rect as any).baseAttributes.opacity).toBe(1);
+    expect((rect as any).baseAttributes.lineWidth).toBe(1);
+    expect(rect.getFinalAttribute().opacity).toBe(0.35);
+    expect(rect.getFinalAttribute().lineWidth).toBe(6);
+
+    tick(ticker, 50);
+    expect(rect.attribute.opacity).toBeCloseTo(0.675, 5);
+    expect(rect.attribute.lineWidth).toBeCloseTo(3.5, 5);
+    expect((rect as any).baseAttributes.opacity).toBe(1);
+    expect((rect as any).baseAttributes.lineWidth).toBe(1);
+
+    tick(ticker, 50);
+    expect(rect.attribute.opacity).toBeCloseTo(0.35, 5);
+    expect(rect.attribute.lineWidth).toBeCloseTo(6, 5);
+    expect(rect.getFinalAttribute().opacity).toBeCloseTo(0.35, 5);
+    expect(rect.getFinalAttribute().lineWidth).toBeCloseTo(6, 5);
+    expect((rect as any).baseAttributes.opacity).toBe(1);
+    expect((rect as any).baseAttributes.lineWidth).toBe(1);
+    expect(rect.currentStates).toEqual(['a']);
+    expect(rect.resolvedStatePatch).toEqual({
+      opacity: 0.35,
+      lineWidth: 6
+    });
+  });
+
+  test('interrupted state animations resolve [] to [a] to [a,b] to [a] to [] without stale state styles', () => {
+    const { group, ticker, graphicService } = createStageHarness('state-runtime-interrupted-stack');
+    const rect = createAnimatedRect(graphicService);
+    rect.setAttribute('lineWidth', 1);
+    rect.setFinalAttributes({ ...rect.attribute });
+    group.appendChild(rect);
+
+    rect.states = {
+      a: {
+        opacity: 0.2
+      },
+      b: {
+        lineWidth: 5
+      }
+    } as any;
+    rect.stateAnimateConfig = {
+      duration: 100,
+      easing: 'linear'
+    } as any;
+
+    rect.useStates(['a'], true);
+    tick(ticker, 25);
+    expect(rect.attribute.opacity).toBeCloseTo(0.8, 5);
+    expect(rect.attribute.lineWidth).toBe(1);
+    expect(rect.currentStates).toEqual(['a']);
+    expect(rect.resolvedStatePatch).toEqual({
+      opacity: 0.2
+    });
+
+    rect.useStates(['a', 'b'], true);
+    tick(ticker, 25);
+    expect(rect.attribute.opacity).toBeGreaterThan(0.2);
+    expect(rect.attribute.opacity).toBeLessThan(0.8);
+    expect(rect.attribute.lineWidth).toBeGreaterThan(1);
+    expect(rect.attribute.lineWidth).toBeLessThan(5);
+    expect(rect.currentStates).toEqual(['a', 'b']);
+    expect(rect.resolvedStatePatch).toEqual({
+      opacity: 0.2,
+      lineWidth: 5
+    });
+    const lineWidthWithB = rect.attribute.lineWidth;
+
+    rect.useStates(['a'], true);
+    tick(ticker, 25);
+    expect(rect.attribute.opacity).toBeGreaterThan(0.2);
+    expect(rect.attribute.opacity).toBeLessThan(0.8);
+    expect(rect.attribute.lineWidth).toBeGreaterThan(1);
+    expect(rect.attribute.lineWidth).toBeLessThan(lineWidthWithB);
+    expect(rect.getFinalAttribute().opacity).toBe(0.2);
+    expect(rect.getFinalAttribute().lineWidth).toBe(1);
+    expect(rect.currentStates).toEqual(['a']);
+    expect(rect.resolvedStatePatch).toEqual({
+      opacity: 0.2
+    });
+    const lineWidthAfterRemovingB = rect.attribute.lineWidth;
+
+    rect.useStates([], true);
+    tick(ticker, 25);
+    expect(rect.attribute.opacity).toBeGreaterThan(0.2);
+    expect(rect.attribute.opacity).toBeLessThan(1);
+    expect(rect.attribute.lineWidth).toBeGreaterThan(1);
+    expect(rect.attribute.lineWidth).toBeLessThan(lineWidthAfterRemovingB);
+    expect(rect.currentStates).toEqual([]);
+    expect(rect.resolvedStatePatch).toBeUndefined();
+
+    tick(ticker, 100);
+    expect(rect.attribute.opacity).toBe(1);
+    expect(rect.attribute.lineWidth).toBe(1);
+    expect(rect.getFinalAttribute().opacity).toBe(1);
+    expect(rect.getFinalAttribute().lineWidth).toBe(1);
+    expect((rect as any).baseAttributes.opacity).toBe(1);
+    expect((rect as any).baseAttributes.lineWidth).toBe(1);
+    expect(rect.currentStates).toEqual([]);
+    expect(rect.resolvedStatePatch).toBeUndefined();
+  });
+
   test('animate.to restores static truth after completion and keeps baseAttributes untouched', () => {
     const { group, ticker, graphicService } = createStageHarness('self-to');
     const rect = createAnimatedRect(graphicService);
@@ -399,7 +527,7 @@ describe('D3 pre-handoff animation runtime', () => {
 
     rect.useStates(['selected'], true);
     tick(ticker, 50);
-    expect(rect.attribute.opacity).toBeCloseTo(0.8, 5);
+    expect(rect.attribute.opacity).toBeCloseTo(0.7, 5);
 
     tick(ticker, 50);
     expect(rect.attribute.opacity).toBeCloseTo(0.8, 5);

packages/vrender-animate/src/animate.ts

@@ -137,7 +137,10 @@ export class Animate implements IAnimate {
     }
     this.onRemove(() => {
       this.stop();
-      if (typeof trackerTarget.restoreStaticAttribute === 'function') {
+      if (
+        !(this as any).__skipRestoreStaticAttributeOnRemove &&
+        typeof trackerTarget.restoreStaticAttribute === 'function'
+      ) {
         trackerTarget.restoreStaticAttribute();
       }
       if (typeof trackerTarget.untrackAnimate === 'function') {

packages/vrender-animate/src/executor/animate-executor.ts

@@ -785,7 +785,10 @@ export class AnimateExecutor implements IAnimateExecutor {
     while (this._animates.length > 0) {
       const animate = this._animates.pop();
       // 不执行回调时 标记动画为结束状态
-      callEnd === false && (animate.status = AnimateStatus.END);
+      if (callEnd === false) {
+        animate.status = AnimateStatus.END;
+        (animate as any).__skipRestoreStaticAttributeOnRemove = true;
+      }
       animate?.stop(type);
     }
 

packages/vrender-animate/src/state/animation-states-registry.ts

@@ -147,6 +147,13 @@ export class AnimationTransitionRegistry {
       allowTransition: true,
       stopOriginalTransition: false
     }));
+    // graphic state changes reuse the synthetic "state" animation state. A newer
+    // resolved state patch must take over from the current visual frame instead
+    // of letting the stale patch write one more frame on the next tick.
+    this.registerTransition('state', 'state', () => ({
+      allowTransition: true,
+      stopOriginalTransition: true
+    }));
     // state动画碰到disappear动画，会停止，也会被覆盖
     this.registerTransition('state', 'disappear', () => ({
       allowTransition: true,

packages/vrender-core/src/graphic/graphic.ts

@@ -765,6 +765,29 @@ export abstract class Graphic<T extends Partial<IGraphicAttribute> = Partial<IGr
     return snapshot;
   }
 
+  protected buildStateAnimationTargetAttrs(
+    resolvedStateAttrs: Partial<T>,
+    previousResolvedStatePatch?: Partial<T>
+  ): Partial<T> {
+    const targetAttrs = cloneAttributeValue(resolvedStateAttrs) as Record<string, any>;
+
+    if (!previousResolvedStatePatch) {
+      return targetAttrs as Partial<T>;
+    }
+
+    const snapshot = this.buildStaticAttributeSnapshot() as Record<string, any>;
+    Object.keys(previousResolvedStatePatch).forEach(key => {
+      if (Object.prototype.hasOwnProperty.call(targetAttrs, key)) {
+        return;
+      }
+      targetAttrs[key] = Object.prototype.hasOwnProperty.call(snapshot, key)
+        ? cloneAttributeValue(snapshot[key])
+        : this.getDefaultAttribute(key);
+    });
+
+    return targetAttrs as Partial<T>;
+  }
+
   protected syncObjectToSnapshot(target: Record<string, any>, snapshot: Record<string, any>): AttributeDelta {
     const delta: AttributeDelta = new Map();
     const keySet = new Set<string>([...Object.keys(target), ...Object.keys(snapshot)]);
@@ -1742,6 +1765,9 @@ export abstract class Graphic<T extends Partial<IGraphicAttribute> = Partial<IGr
     }
 
     const previousStates = this.currentStates ? this.currentStates.slice() : [];
+    const previousResolvedStatePatch = this.resolvedStatePatch
+      ? cloneAttributeValue(this.resolvedStatePatch)
+      : undefined;
     const stateResolveBaseAttrs = (this.baseAttributes ?? this.attribute) as Partial<T>;
     const stateModel = this.createStateModel();
     this.stateEngine?.setResolveContext(this, stateResolveBaseAttrs);
@@ -1778,7 +1804,11 @@ export abstract class Graphic<T extends Partial<IGraphicAttribute> = Partial<IGr
     });
     if (hasAnimation) {
       this._syncFinalAttributeFromStaticTruth();
-      this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation);
+      this.applyStateAttrs(
+        this.buildStateAnimationTargetAttrs(resolvedStateAttrs, previousResolvedStatePatch),
+        transition.states,
+        hasAnimation
+      );
     } else {
       this.stopStateAnimates();
       this._restoreAttributeFromStaticTruth({ type: AttributeUpdateType.STATE });