@visactor/vrender-components 1.1.0-alpha.2 → 1.1.0-alpha.21

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { EventEmitter, Logger, isBoolean, isObject, isFunction, tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, Point, PointService, abs, max, min, atan2, epsilon, Matrix, pi2, isArray, cos, sin, pi, isString, pointAt, isNumber, sqrt, isPointInLine, Color, isEqual, OBBBounds, isNil, normalTransform, isValidUrl, isBase64, getContextFont, rotatePoint, transformBoundsWithMatrix, clampAngleByRadian, asin, isNumberClose, TextMeasure, Bounds, getRectIntersect, isRectIntersect, arrayEqual, acos, isPlainObject as isPlainObject$3, merge, isValid, clamp, clampRange, normalizePadding, debounce, throttle, hexToRgb, crossProduct, isEmpty, array, rectInsideAnotherRect, radianToDegree, getAngleByPoint, polarToCartesian, normalizeAngle, isValidNumber, flattenArray, isRotateAABBIntersect, isLess, isGreater, aabbSeparation, obbSeparation, cloneDeep, get, last, mixin, interpolateString, minInArray, maxInArray, binaryFuzzySearchInNumberRange, pointInRect, calculateAnchorOfBounds, computeQuadrant, polygonContainPoint } from '@visactor/vutils';
+import { EventEmitter, Logger, isBoolean, isObject, isFunction, tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, Point, PointService, abs, max, min, atan2, epsilon, Matrix, pi2, isArray, cos, sin, pi, isString, pointAt, isNumber, sqrt, isPointInLine, Color, OBBBounds, isEqual, isNil, normalTransform, isValidUrl, isBase64, getContextFont, rotatePoint, transformBoundsWithMatrix, clampAngleByRadian, asin, isNumberClose, TextMeasure, Bounds, getRectIntersect, isRectIntersect, arrayEqual, acos, isPlainObject as isPlainObject$3, merge, isValid, clamp, clampRange, normalizePadding, debounce, throttle, hexToRgb, crossProduct, isEmpty, array, rectInsideAnotherRect, radianToDegree, getAngleByPoint, polarToCartesian, normalizeAngle, isValidNumber, flattenArray, isRotateAABBIntersect, isLess, isGreater, aabbSeparation, obbSeparation, cloneDeep, get, last, mixin, interpolateString, minInArray, maxInArray, binaryFuzzySearchInNumberRange, pointInRect, calculateAnchorOfBounds, computeQuadrant, polygonContainPoint } from '@visactor/vutils';
 import { isContinuous, isDiscrete, LinearScale } from '@visactor/vscale';
 
 class Hook {
@@ -4800,9 +4800,172 @@ function classifyAttributeDelta(key, prev, next) {
 }
 
 const STAGE_PERF_MONITOR = Symbol("vrender.statePerfMonitor");
+function createReasonBreakdown() {
+  return {
+    config_disabled: 0,
+    context_disabled: 0,
+    non_batch_operation: 0,
+    mixed_update_category: 0,
+    resolver_unstable_keys: 0,
+    graphic_unavailable: 0
+  };
+}
+function createEmptyStatePerfSnapshot() {
+  return {
+    counters: {
+      stateCommits: 0,
+      sharedRefreshCommits: 0,
+      deferredJobsCreated: 0,
+      deferredJobsCompleted: 0,
+      deferredJobsCancelled: 0,
+      deferredJobsCoalesced: 0,
+      deferredGraphicsCommitted: 0,
+      deferredBudgetYields: 0,
+      deferredIneligibleGraphics: 0
+    },
+    deferredIneligibleByReason: createReasonBreakdown(),
+    categoryBreakdown: {
+      paint: 0,
+      transform: 0,
+      shape: 0,
+      bounds: 0,
+      layout: 0,
+      pick: 0
+    },
+    refresh: {
+      queuedGraphics: 0,
+      flushedGraphics: 0,
+      ensureFreshCalls: 0,
+      renderScheduled: 0
+    },
+    resolver: {
+      cacheHits: 0,
+      cacheMisses: 0,
+      invalidations: 0
+    },
+    cost: {
+      resolverTotalMs: 0,
+      resolverMaxMs: 0,
+      patchTotalMs: 0,
+      patchMaxMs: 0,
+      sharedRefreshTotalMs: 0,
+      sharedRefreshMaxMs: 0,
+      batchSliceTotalMs: 0,
+      batchSliceMaxMs: 0
+    },
+    allocationHints: {
+      patchObjectsCreated: 0,
+      batchEntriesCreated: 0,
+      refreshQueuePushes: 0
+    },
+    batch: {
+      pendingJobs: 0,
+      maxPendingJobs: 0,
+      maxGraphicsInJob: 0,
+      maxFrameSliceCost: 0
+    },
+    events: []
+  };
+}
+function cloneSnapshot(snapshot) {
+  return {
+    counters: Object.assign({}, snapshot.counters),
+    deferredIneligibleByReason: Object.assign({}, snapshot.deferredIneligibleByReason),
+    categoryBreakdown: Object.assign({}, snapshot.categoryBreakdown),
+    refresh: Object.assign({}, snapshot.refresh),
+    resolver: Object.assign({}, snapshot.resolver),
+    cost: Object.assign({}, snapshot.cost),
+    allocationHints: Object.assign({}, snapshot.allocationHints),
+    batch: Object.assign({}, snapshot.batch),
+    events: snapshot.events ? snapshot.events.slice() : []
+  };
+}
+class StatePerfMonitor {
+  constructor(configSource) {
+    this.configSource = configSource, this.snapshot = createEmptyStatePerfSnapshot();
+  }
+  setConfig(config) {
+    this.configSource = config;
+  }
+  getSnapshot() {
+    return cloneSnapshot(this.snapshot);
+  }
+  reset() {
+    const next = createEmptyStatePerfSnapshot();
+    Object.assign(this.snapshot.counters, next.counters), Object.assign(this.snapshot.deferredIneligibleByReason, next.deferredIneligibleByReason), Object.assign(this.snapshot.categoryBreakdown, next.categoryBreakdown), Object.assign(this.snapshot.refresh, next.refresh), Object.assign(this.snapshot.resolver, next.resolver), Object.assign(this.snapshot.cost, next.cost), Object.assign(this.snapshot.allocationHints, next.allocationHints), Object.assign(this.snapshot.batch, next.batch), this.snapshot.events = [];
+  }
+  incrementCounter(key, delta = 1) {
+    this.isEnabled() && (this.snapshot.counters[key] += delta);
+  }
+  recordDeferredIneligible(reason, delta = 1) {
+    this.isEnabled() && (this.snapshot.deferredIneligibleByReason[reason] += delta, this.snapshot.counters.deferredIneligibleGraphics += delta, this.recordEvent("deferred-ineligible", {
+      reason: reason,
+      count: delta
+    }));
+  }
+  recordCategory(category) {
+    this.isEnabled() && (category & UpdateCategory.PAINT && (this.snapshot.categoryBreakdown.paint += 1), category & UpdateCategory.TRANSFORM && (this.snapshot.categoryBreakdown.transform += 1), category & UpdateCategory.SHAPE && (this.snapshot.categoryBreakdown.shape += 1), category & UpdateCategory.BOUNDS && (this.snapshot.categoryBreakdown.bounds += 1), category & UpdateCategory.LAYOUT && (this.snapshot.categoryBreakdown.layout += 1), category & UpdateCategory.PICK && (this.snapshot.categoryBreakdown.pick += 1));
+  }
+  recordRefresh(key, delta = 1) {
+    this.isEnabled() && (this.snapshot.refresh[key] += delta);
+  }
+  recordResolver(key, delta = 1) {
+    this.isEnabled() && (this.snapshot.resolver[key] += delta);
+  }
+  recordCost(kind, durationMs) {
+    if (this.isEnabled()) {
+      if ("resolver" === kind) return this.snapshot.cost.resolverTotalMs += durationMs, void (this.snapshot.cost.resolverMaxMs = Math.max(this.snapshot.cost.resolverMaxMs, durationMs));
+      if ("patch" === kind) return this.snapshot.cost.patchTotalMs += durationMs, void (this.snapshot.cost.patchMaxMs = Math.max(this.snapshot.cost.patchMaxMs, durationMs));
+      if ("sharedRefresh" === kind) return this.snapshot.cost.sharedRefreshTotalMs += durationMs, void (this.snapshot.cost.sharedRefreshMaxMs = Math.max(this.snapshot.cost.sharedRefreshMaxMs, durationMs));
+      this.snapshot.cost.batchSliceTotalMs += durationMs, this.snapshot.cost.batchSliceMaxMs = Math.max(this.snapshot.cost.batchSliceMaxMs, durationMs), this.snapshot.batch.maxFrameSliceCost = Math.max(this.snapshot.batch.maxFrameSliceCost, durationMs);
+    }
+  }
+  recordAllocation(key, delta = 1) {
+    this.isEnabled() && (this.snapshot.allocationHints[key] += delta);
+  }
+  updateBatchPending(pendingJobs) {
+    this.isEnabled() && (this.snapshot.batch.pendingJobs = pendingJobs, this.snapshot.batch.maxPendingJobs = Math.max(this.snapshot.batch.maxPendingJobs, pendingJobs));
+  }
+  updateMaxGraphicsInJob(count) {
+    this.isEnabled() && (this.snapshot.batch.maxGraphicsInJob = Math.max(this.snapshot.batch.maxGraphicsInJob, count));
+  }
+  recordEvent(type, detail) {
+    var _a, _b, _c;
+    if (!this.shouldRecordEvents()) return;
+    const events = null !== (_a = this.snapshot.events) && void 0 !== _a ? _a : this.snapshot.events = [];
+    events.push({
+      type: type,
+      at: Date.now(),
+      detail: detail
+    });
+    const max = null !== (_c = null === (_b = this.getConfig()) || void 0 === _b ? void 0 : _b.maxEventRecords) && void 0 !== _c ? _c : 100;
+    events.length > max && events.splice(0, events.length - max);
+  }
+  isEnabled() {
+    var _a;
+    return !0 === (null === (_a = this.getConfig()) || void 0 === _a ? void 0 : _a.enabled);
+  }
+  shouldRecordEvents() {
+    const config = this.getConfig();
+    return !!(null == config ? void 0 : config.enabled) && !!config.recordEvents;
+  }
+  getConfig() {
+    return "function" == typeof this.configSource ? this.configSource() : this.configSource;
+  }
+}
+function ensureStageStatePerfMonitor(stage) {
+  const stageAny = stage;
+  return stageAny[STAGE_PERF_MONITOR] || (stageAny[STAGE_PERF_MONITOR] = new StatePerfMonitor(() => stage.statePerfConfig)), stageAny[STAGE_PERF_MONITOR];
+}
 function getStageStatePerfMonitor(stage) {
   if (stage) return stage[STAGE_PERF_MONITOR];
 }
+function getActiveStageStatePerfMonitor(stage) {
+  var _a;
+  if (!stage) return;
+  const current = getStageStatePerfMonitor(stage);
+  return current || (!0 === (null === (_a = stage.statePerfConfig) || void 0 === _a ? void 0 : _a.enabled) ? ensureStageStatePerfMonitor(stage) : void 0);
+}
 
 function isPlainObject$1(value) {
   return null != value && "object" == typeof value && !Array.isArray(value);
@@ -4898,7 +5061,7 @@ class StateEngine {
   }
   invalidateResolverCache() {
     var _a, _b;
-    this.resolverPatchCache.clear(), this.resolverCacheKey = "", this.resolverCacheValid = !1, null === (_b = getStageStatePerfMonitor(null === (_a = this.graphic) || void 0 === _a ? void 0 : _a.stage)) || void 0 === _b || _b.recordResolver("invalidations");
+    this.resolverPatchCache.clear(), this.resolverCacheKey = "", this.resolverCacheValid = !1, null === (_b = getActiveStageStatePerfMonitor(null === (_a = this.graphic) || void 0 === _a ? void 0 : _a.stage)) || void 0 === _b || _b.recordResolver("invalidations");
   }
   hasState(stateName) {
     return !!this._activeStates.length && (null == stateName || this._activeStates.includes(stateName));
@@ -4945,7 +5108,7 @@ class StateEngine {
   }
   recomputePatch(effectiveStates) {
     var _a;
-    const perfMonitor = getStageStatePerfMonitor(null === (_a = this.graphic) || void 0 === _a ? void 0 : _a.stage),
+    const perfMonitor = getActiveStageStatePerfMonitor(null === (_a = this.graphic) || void 0 === _a ? void 0 : _a.stage),
       patchStart = perfMonitor ? performance.now() : 0;
     let resolverCost = 0;
     const cacheKey = effectiveStates.join(","),
@@ -5193,32 +5356,6 @@ class StateStyleResolver {
       }
     }), resolvedAttrs;
   }
-  resolveWithCompiled(normalAttrs, compiledDefinitions, stateProxy, effectiveStates, resolvedPatch) {
-    var _a, _b;
-    const mergeMode = null !== (_a = this.options.mergeMode) && void 0 !== _a ? _a : "shallow",
-      resolvedAttrs = null !== (_b = cloneValue(resolvedPatch)) && void 0 !== _b ? _b : {};
-    return effectiveStates.forEach(stateName => {
-      const proxyPatch = null == stateProxy ? void 0 : stateProxy(stateName, effectiveStates);
-      null != proxyPatch && Object.keys(proxyPatch).forEach(key => {
-        const nextValue = proxyPatch[key],
-          hasCompiledDefinition = compiledDefinitions.has(stateName);
-        if ("deep" === mergeMode && isPlainObject(nextValue) && (isPlainObject(resolvedAttrs[key]) || !hasCompiledDefinition && isPlainObject(normalAttrs[key]))) {
-          const baseValue = isPlainObject(resolvedAttrs[key]) ? resolvedAttrs[key] : isPlainObject(normalAttrs[key]) ? normalAttrs[key] : {};
-          resolvedAttrs[key] = deepMerge(baseValue, nextValue);
-        } else resolvedAttrs[key] = cloneValue(nextValue);
-      });
-    }), resolvedAttrs;
-  }
-  computeNormalAttrsBackup(normalAttrs, targetAttrs, finalAttribute) {
-    const nextNormalAttrs = {},
-      nextTargetAttrs = Object.assign({}, targetAttrs);
-    for (const key in targetAttrs) Object.prototype.hasOwnProperty.call(targetAttrs, key) && (nextNormalAttrs[key] = cloneValue(normalAttrs && key in normalAttrs ? normalAttrs[key] : finalAttribute[key]));
-    if (normalAttrs) for (const key in normalAttrs) Object.prototype.hasOwnProperty.call(normalAttrs, key) && !(key in targetAttrs) && (nextTargetAttrs[key] = cloneValue(normalAttrs[key]));
-    return {
-      attrs: nextTargetAttrs,
-      normalAttrs: nextNormalAttrs
-    };
-  }
 }
 
 function hasOwnKeys(value) {
@@ -5240,11 +5377,23 @@ class StateTransitionOrchestrator {
     if (!hasAnimation) return plan;
     const noWorkAnimateAttr = Object.assign(Object.assign({}, null !== (_a = options.noWorkAnimateAttr) && void 0 !== _a ? _a : {}), normalizeNoAnimateAttrConfig(null === (_b = options.animateConfig) || void 0 === _b ? void 0 : _b.noAnimateAttrs)),
       isClear = !0 === options.isClear,
-      getDefaultAttribute = options.getDefaultAttribute;
+      getDefaultAttribute = options.getDefaultAttribute,
+      shouldSkipDefaultAttribute = options.shouldSkipDefaultAttribute,
+      assignTransitionAttr = (key, value) => {
+        if (noWorkAnimateAttr[key]) return plan.jumpAttrs[key] = value, void (plan.noAnimateAttrs[key] = value);
+        if (isClear && void 0 === value) {
+          if (null == shouldSkipDefaultAttribute ? void 0 : shouldSkipDefaultAttribute(key, targetAttrs)) return;
+          plan.animateAttrs[key] = getDefaultAttribute ? getDefaultAttribute(key) : value;
+        } else plan.animateAttrs[key] = value;
+      };
     for (const key in targetAttrs) {
       if (!Object.prototype.hasOwnProperty.call(targetAttrs, key)) continue;
-      const value = targetAttrs[key];
-      noWorkAnimateAttr[key] ? (plan.jumpAttrs[key] = value, plan.noAnimateAttrs[key] = value) : plan.animateAttrs[key] = isClear && void 0 === value && getDefaultAttribute ? getDefaultAttribute(key) : value;
+      assignTransitionAttr(key, targetAttrs[key]);
+    }
+    const extraAnimateAttrs = options.extraAnimateAttrs;
+    if (extraAnimateAttrs) for (const key in extraAnimateAttrs) {
+      const hasTargetAttr = Object.prototype.hasOwnProperty.call(targetAttrs, key);
+      !Object.prototype.hasOwnProperty.call(extraAnimateAttrs, key) || hasTargetAttr && void 0 !== targetAttrs[key] || assignTransitionAttr(key, extraAnimateAttrs[key]);
     }
     return plan;
   }
@@ -5271,12 +5420,14 @@ class StateTransitionOrchestrator {
     }), plan;
   }
   applyClearTransition(graphic, targetAttrs, hasAnimation, stateNames, options = {}) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const plan = this.analyzeTransition({}, targetAttrs, stateNames, hasAnimation, {
       noWorkAnimateAttr: null === (_a = graphic.getNoWorkAnimateAttr) || void 0 === _a ? void 0 : _a.call(graphic),
       isClear: !0,
       getDefaultAttribute: null === (_b = graphic.getDefaultAttribute) || void 0 === _b ? void 0 : _b.bind(graphic),
-      animateConfig: options.animateConfig
+      shouldSkipDefaultAttribute: null !== (_c = options.shouldSkipDefaultAttribute) && void 0 !== _c ? _c : null === (_d = graphic.shouldSkipStateTransitionDefaultAttribute) || void 0 === _d ? void 0 : _d.bind(graphic),
+      animateConfig: options.animateConfig,
+      extraAnimateAttrs: options.extraAnimateAttrs
     });
     return this.applyTransition(graphic, plan, hasAnimation, options);
   }
@@ -5324,7 +5475,7 @@ function rebuildSharedStateScope(scope) {
 }
 function ensureSharedStateScopeFresh(scope) {
   var _a;
-  if (scope) return null === (_a = getStageStatePerfMonitor(scope.ownerStage)) || void 0 === _a || _a.recordRefresh("ensureFreshCalls"), scope.parentScope && ensureSharedStateScopeFresh(scope.parentScope), (scope.dirty || scope.parentScope && scope.parentRevisionAtBuild !== scope.parentScope.revision) && rebuildSharedStateScope(scope), scope;
+  if (scope) return null === (_a = getActiveStageStatePerfMonitor(scope.ownerStage)) || void 0 === _a || _a.recordRefresh("ensureFreshCalls"), scope.parentScope && ensureSharedStateScopeFresh(scope.parentScope), (scope.dirty || scope.parentScope && scope.parentRevisionAtBuild !== scope.parentScope.revision) && rebuildSharedStateScope(scope), scope;
 }
 function collectSharedStateScopeChain(scope) {
   const chain = [];
@@ -5335,7 +5486,7 @@ function collectSharedStateScopeChain(scope) {
 
 function scheduleStageSharedStateRefresh(stage) {
   var _a;
-  stage && "released" !== stage.releaseStatus && (null === (_a = getStageStatePerfMonitor(stage)) || void 0 === _a || _a.recordRefresh("renderScheduled"), stage.renderNextFrame());
+  stage && "released" !== stage.releaseStatus && (null === (_a = getActiveStageStatePerfMonitor(stage)) || void 0 === _a || _a.recordRefresh("renderScheduled"), stage.renderNextFrame());
 }
 function enqueueGraphicSharedStateRefresh(stage, graphic) {
   var _a;
@@ -5343,7 +5494,7 @@ function enqueueGraphicSharedStateRefresh(stage, graphic) {
   const pending = null !== (_a = stage._pendingSharedStateRefreshGraphics) && void 0 !== _a ? _a : stage._pendingSharedStateRefreshGraphics = new Set();
   if (!pending.has(graphic)) {
     pending.add(graphic);
-    const perfMonitor = getStageStatePerfMonitor(stage);
+    const perfMonitor = getActiveStageStatePerfMonitor(stage);
     null == perfMonitor || perfMonitor.recordRefresh("queuedGraphics"), null == perfMonitor || perfMonitor.recordAllocation("refreshQueuePushes");
   }
 }
@@ -5363,9 +5514,12 @@ const tempConstantXYKey = ["x", "y"],
   tempConstantScaleXYKey = ["scaleX", "scaleY"],
   tempConstantAngleKey = ["angle"],
   builtinTextureTypes = new Set(["circle", "diamond", "rect", "vertical-line", "horizontal-line", "bias-lr", "bias-rl", "grid", "wave"]),
-  point = new Point();
+  FULL_STATE_DEFINITION_KEYS = new Set(["name", "patch", "priority", "exclude", "suppress", "resolver", "declaredAffectedKeys"]),
+  point = new Point(),
+  EMPTY_STATE_NAMES = [],
+  BROAD_UPDATE_CATEGORY = UpdateCategory.PAINT | UpdateCategory.SHAPE | UpdateCategory.BOUNDS | UpdateCategory.TRANSFORM | UpdateCategory.LAYOUT;
 function isPlainObjectValue(value) {
-  return "object" == typeof value && null != value && !isArray(value);
+  return "object" == typeof value && null != value && !Array.isArray(value);
 }
 function cloneAttributeValue(value) {
   if (!isPlainObjectValue(value)) return value;
@@ -5376,12 +5530,6 @@ function cloneAttributeValue(value) {
     clone[key] = isPlainObjectValue(nextValue) ? cloneAttributeValue(nextValue) : nextValue;
   }), clone;
 }
-function cloneSimpleAttributeRecord(value) {
-  return isPlainObjectValue(value) ? Object.assign({}, value) : value;
-}
-function shouldUseSimpleAttributeFastPath(value) {
-  return !!isPlainObjectValue(value) && !Object.keys(value).some(key => isPlainObjectValue(value[key]));
-}
 function cloneAttributeSurface(value) {
   if (!isPlainObjectValue(value)) return value;
   const source = value,
@@ -5391,6 +5539,9 @@ function cloneAttributeSurface(value) {
     clone[key] = isPlainObjectValue(nextValue) ? Object.assign({}, nextValue) : nextValue;
   }), clone;
 }
+function areAttributeValuesEqual(left, right) {
+  return left === right || !!(isPlainObjectValue(left) || isPlainObjectValue(right) || Array.isArray(left) || Array.isArray(right)) && isEqual(left, right);
+}
 function deepMergeAttributeValue(base, value) {
   var _a;
   const result = null !== (_a = cloneAttributeValue(base)) && void 0 !== _a ? _a : {};
@@ -5453,18 +5604,24 @@ class Graphic extends Node {
   get globalTransMatrix() {
     return this.tryUpdateGlobalTransMatrix(!0);
   }
+  get baseAttributes() {
+    var _a;
+    return null !== (_a = this._baseAttributes) && void 0 !== _a ? _a : this.attribute;
+  }
+  set baseAttributes(value) {
+    value !== this.attribute ? this._baseAttributes = value : this._baseAttributes = void 0;
+  }
   constructor(params = {}) {
     var _a;
-    super(), this.resolverEpoch = 0, this._AABBBounds = new AABBBounds(), this._updateTag = UpdateTag.INIT;
-    const useSimpleAttributeFastPath = shouldUseSimpleAttributeFastPath(params),
-      initialBaseAttributes = useSimpleAttributeFastPath ? cloneSimpleAttributeRecord(params) : cloneAttributeValue(params);
-    this.baseAttributes = initialBaseAttributes, this.attribute = useSimpleAttributeFastPath ? cloneSimpleAttributeRecord(initialBaseAttributes) : cloneAttributeSurface(initialBaseAttributes), this.valid = this.isValid(), this.updateAABBBoundsStamp = 0, params.background && this.loadImage(null !== (_a = params.background.background) && void 0 !== _a ? _a : params.background, !0), isExternalTexture(params.texture) && this.loadImage(params.texture, !1), params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic);
+    super(), this._AABBBounds = new AABBBounds(), this._updateTag = UpdateTag.INIT, this.attribute = params, this.valid = this.isValid(), this.updateAABBBoundsStamp = 0, params.background && this.loadImage(null !== (_a = params.background.background) && void 0 !== _a ? _a : params.background, !0), params.texture && isExternalTexture(params.texture) && this.loadImage(params.texture, !1), params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic);
   }
   get normalAttrs() {
     return this.baseAttributes;
   }
-  set normalAttrs(value) {
-    this._deprecatedNormalAttrsView = null != value ? value : void 0;
+  set normalAttrs(_value) {}
+  getBaseAttributesStorage() {
+    var _a;
+    return null !== (_a = this._baseAttributes) && void 0 !== _a ? _a : this.attribute;
   }
   getGraphicService() {
     var _a, _b;
@@ -5495,10 +5652,18 @@ class Graphic extends Node {
     const nextScope = this.resolveBoundSharedStateScope();
     return this.boundSharedStateScope === nextScope ? (this.syncSharedStateActiveRegistrations(), !1) : (this.boundSharedStateScope = nextScope, this.boundSharedStateRevision = void 0, this.localFallbackCompiledDefinitions = void 0, this.compiledStateDefinitions = void 0, this.compiledStateDefinitionsCacheKey = void 0, this.stateEngine = void 0, this.stateEngineCompiledDefinitions = void 0, this.stateEngineStateProxyModeKey = void 0, this.syncSharedStateActiveRegistrations(), markDirty && (null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) && this.markSharedStateDirty(), !0);
   }
-  syncSharedStateActiveRegistrations() {
+  syncSharedStateScopeBindingOnTreeChange(markDirty = !0) {
     var _a, _b;
-    const nextScopes = (null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) && this.boundSharedStateScope ? new Set(collectSharedStateScopeChain(this.boundSharedStateScope)) : new Set();
-    (null !== (_b = this.registeredActiveScopes) && void 0 !== _b ? _b : new Set()).forEach(scope => {
+    return !!((null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) || this.boundSharedStateScope || (null === (_b = this.registeredActiveScopes) || void 0 === _b ? void 0 : _b.size) || this.sharedStateDirty) && this.syncSharedStateScopeBindingFromTree(markDirty);
+  }
+  syncSharedStateActiveRegistrations() {
+    var _a;
+    const previousScopes = this.registeredActiveScopes;
+    if (!(null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) || !this.boundSharedStateScope) return (null == previousScopes ? void 0 : previousScopes.size) && (previousScopes.forEach(scope => {
+      scope.subtreeActiveDescendants.delete(this);
+    }), previousScopes.clear()), void (this.registeredActiveScopes = void 0);
+    const nextScopes = new Set(collectSharedStateScopeChain(this.boundSharedStateScope));
+    null == previousScopes || previousScopes.forEach(scope => {
       nextScopes.has(scope) || scope.subtreeActiveDescendants.delete(this);
     }), nextScopes.forEach(scope => {
       scope.subtreeActiveDescendants.add(this);
@@ -5514,15 +5679,13 @@ class Graphic extends Node {
     this.sharedStateDirty = !0, enqueueGraphicSharedStateRefresh(this.stage, this), scheduleStageSharedStateRefresh(this.stage);
   }
   onParentSharedStateTreeChanged(stage, layer) {
-    this.stage === stage && this.layer === layer ? this.syncSharedStateScopeBindingFromTree() : this.setStage(stage, layer);
+    this.stage === stage && this.layer === layer ? this.syncSharedStateScopeBindingOnTreeChange() : this.setStage(stage, layer);
   }
   refreshSharedStateBeforeRender() {
     var _a;
     (null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) ? (this.syncSharedStateScopeBindingFromTree(!1), this.boundSharedStateScope && ensureSharedStateScopeFresh(this.boundSharedStateScope), this.recomputeCurrentStatePatch(), this.stopStateAnimates(), this._restoreAttributeFromStaticTruth({
       type: AttributeUpdateType.STATE
-    }), this._emitCustomEvent("afterStateUpdate", {
-      type: AttributeUpdateType.STATE
-    }), this.sharedStateDirty = !1) : this.sharedStateDirty = !1;
+    }), this.emitStateUpdateEvent(), this.sharedStateDirty = !1) : this.sharedStateDirty = !1;
   }
   getLocalStatesVersion() {
     var _a, _b;
@@ -5572,15 +5735,13 @@ class Graphic extends Node {
     };
   }
   recomputeCurrentStatePatch() {
-    var _a, _b, _c, _d;
+    var _a, _b;
     if (!(null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length)) return this.effectiveStates = [], this.resolvedStatePatch = void 0, void this.syncSharedStateActiveRegistrations();
-    const stateResolveBaseAttrs = null !== (_b = this.baseAttributes) && void 0 !== _b ? _b : this.attribute,
-      stateModel = this.createStateModel();
-    null === (_c = this.stateEngine) || void 0 === _c || _c.setResolveContext(this, stateResolveBaseAttrs);
-    const transition = stateModel.useStates(this.currentStates),
-      effectiveStates = null !== (_d = transition.effectiveStates) && void 0 !== _d ? _d : transition.states,
+    const stateResolveBaseAttrs = this.getStateResolveBaseAttrs(),
+      transition = this.createStateModel(stateResolveBaseAttrs).useStates(this.currentStates),
+      effectiveStates = null !== (_b = transition.effectiveStates) && void 0 !== _b ? _b : transition.states,
       resolvedStateAttrs = this.stateEngine && this.compiledStateDefinitions ? Object.assign({}, this.stateEngine.resolvedPatch) : this.getStateStyleResolver(this.stateMergeMode).resolve(stateResolveBaseAttrs, this.states, this.stateProxy, transition.states, this.stateSort);
-    this.currentStates = transition.states, this.effectiveStates = [...effectiveStates], this.resolvedStatePatch = Object.assign({}, resolvedStateAttrs), this.syncSharedStateActiveRegistrations();
+    this.currentStates = transition.states, this.effectiveStates = [...effectiveStates], this.resolvedStatePatch = resolvedStateAttrs, this.syncSharedStateActiveRegistrations();
   }
   buildStaticAttributeSnapshot() {
     var _a;
@@ -5592,6 +5753,23 @@ class Graphic extends Node {
       "deep" === this.stateMergeMode && isPlainObjectValue(previousValue) && isPlainObjectValue(nextValue) ? snapshot[key] = deepMergeAttributeValue(previousValue, nextValue) : snapshot[key] = cloneAttributeValue(nextValue);
     }), snapshot) : snapshot;
   }
+  buildRemovedStateAnimationAttrs(targetStateAttrs, previousResolvedStatePatch) {
+    const extraAttrs = {};
+    if (!previousResolvedStatePatch) return extraAttrs;
+    const snapshot = this.buildStaticAttributeSnapshot(),
+      staticTargetAttrs = snapshot;
+    return Object.keys(previousResolvedStatePatch).forEach(key => {
+      const hasTargetAttr = Object.prototype.hasOwnProperty.call(targetStateAttrs, key);
+      if (hasTargetAttr && void 0 !== targetStateAttrs[key]) return;
+      const assignFallbackAttr = value => {
+        void 0 === value && this.shouldSkipStateTransitionDefaultAttribute(key, staticTargetAttrs) || (extraAttrs[key] = void 0 === value ? value : cloneAttributeValue(value));
+      };
+      if (hasTargetAttr) assignFallbackAttr(this.getStateTransitionDefaultAttribute(key, staticTargetAttrs));else if (Object.prototype.hasOwnProperty.call(snapshot, key)) {
+        const snapshotValue = snapshot[key];
+        assignFallbackAttr(void 0 === snapshotValue ? this.getStateTransitionDefaultAttribute(key, staticTargetAttrs) : snapshotValue);
+      } else assignFallbackAttr(this.getStateTransitionDefaultAttribute(key, staticTargetAttrs));
+    }), extraAttrs;
+  }
   syncObjectToSnapshot(target, snapshot) {
     const delta = new Map();
     return new Set([...Object.keys(target), ...Object.keys(snapshot)]).forEach(key => {
@@ -5602,16 +5780,17 @@ class Graphic extends Node {
         next: void 0
       }), delete target[key]));
       const nextValue = snapshot[key];
-      isEqual(previousValue, nextValue) || (delta.set(key, {
+      areAttributeValuesEqual(previousValue, nextValue) || (delta.set(key, {
         prev: previousValue,
         next: nextValue
       }), target[key] = cloneAttributeValue(nextValue));
     }), delta;
   }
   _syncAttribute() {
+    this.attribute === this.baseAttributes && this.resolvedStatePatch && this.detachAttributeFromBaseAttributes();
     const snapshot = this.buildStaticAttributeSnapshot(),
       delta = this.syncObjectToSnapshot(this.attribute, snapshot);
-    return this.valid = this.isValid(), delta;
+    return this.valid = this.isValid(), this.attributeMayContainTransientAttrs = !1, delta;
   }
   _syncFinalAttributeFromStaticTruth() {
     const target = this.finalAttribute;
@@ -5619,47 +5798,146 @@ class Graphic extends Node {
     const snapshot = this.buildStaticAttributeSnapshot();
     this.syncObjectToSnapshot(target, snapshot);
   }
-  submitUpdateByDelta(delta, forceUpdateTag = !1) {
+  mergeAttributeDeltaCategory(category, key, prev, next) {
+    var _a;
+    let nextCategory = "stroke" === key || "shadowBlur" === key ? classifyAttributeDelta(key, prev, next) : null !== (_a = ATTRIBUTE_CATEGORY[key]) && void 0 !== _a ? _a : UpdateCategory.PAINT;
+    return nextCategory & UpdateCategory.PICK && (nextCategory |= UpdateCategory.BOUNDS), nextCategory === UpdateCategory.PAINT && this.needUpdateTag(key) && (nextCategory = UpdateCategory.SHAPE | UpdateCategory.BOUNDS), category | nextCategory;
+  }
+  submitUpdateByCategory(category, forceUpdateTag = !1) {
     var _a;
     if (forceUpdateTag) return this.addUpdateShapeAndBoundsTag(), this.addUpdatePositionTag(), void this.addUpdateLayoutTag();
+    if (category !== UpdateCategory.NONE) {
+      const stage = this.stage;
+      stage && (null === (_a = getActiveStageStatePerfMonitor(stage)) || void 0 === _a || _a.recordCategory(category));
+    }
+    (category & BROAD_UPDATE_CATEGORY) !== BROAD_UPDATE_CATEGORY ? (category & UpdateCategory.SHAPE ? this.addUpdateShapeAndBoundsTag() : category & UpdateCategory.BOUNDS && this.addUpdateBoundTag(), category & UpdateCategory.PAINT && this.addUpdatePaintTag(), category & UpdateCategory.TRANSFORM && this.addUpdatePositionTag(), category & UpdateCategory.LAYOUT && this.addUpdateLayoutTag()) : this.addBroadUpdateTag();
+  }
+  submitUpdateByDelta(delta, forceUpdateTag = !1) {
     let category = UpdateCategory.NONE;
     delta.forEach((entry, key) => {
-      let nextCategory = classifyAttributeDelta(key, entry.prev, entry.next);
-      nextCategory & UpdateCategory.PICK && (nextCategory |= UpdateCategory.BOUNDS), nextCategory === UpdateCategory.PAINT && this.needUpdateTag(key) && (nextCategory = UpdateCategory.SHAPE | UpdateCategory.BOUNDS), category |= nextCategory;
-    }), category !== UpdateCategory.NONE && (null === (_a = getStageStatePerfMonitor(this.stage)) || void 0 === _a || _a.recordCategory(category)), category & UpdateCategory.SHAPE ? this.addUpdateShapeAndBoundsTag() : category & UpdateCategory.BOUNDS && this.addUpdateBoundTag(), category & UpdateCategory.PAINT && this.addUpdatePaintTag(), category & UpdateCategory.TRANSFORM && this.addUpdatePositionTag(), category & UpdateCategory.LAYOUT && this.addUpdateLayoutTag();
+      category = this.mergeAttributeDeltaCategory(category, key, entry.prev, entry.next);
+    }), this.submitUpdateByCategory(category, forceUpdateTag);
+  }
+  submitTouchedKeyUpdate(keys, forceUpdateTag = !1) {
+    this.submitTouchedUpdate(forceUpdateTag || this.needUpdateTags(keys));
+  }
+  submitTouchedUpdate(needsShapeAndBounds) {
+    !this.updateShapeAndBoundsTagSetted() && needsShapeAndBounds ? this.addUpdateShapeAndBoundsTag() : this.addUpdateBoundTag(), this.addUpdatePositionTag(), this.addUpdateLayoutTag();
   }
   commitBaseAttributeMutation(forceUpdateTag = !1, context) {
-    var _a, _b;
-    (null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) && (this.resolverEpoch += 1, null === (_b = this.stateEngine) || void 0 === _b || _b.invalidateResolverCache(), this.recomputeCurrentStatePatch());
+    var _a, _b, _c;
+    (null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) && (this.resolverEpoch = (null !== (_b = this.resolverEpoch) && void 0 !== _b ? _b : 0) + 1, null === (_c = this.stateEngine) || void 0 === _c || _c.invalidateResolverCache(), this.recomputeCurrentStatePatch());
     const delta = this._syncAttribute();
     this.submitUpdateByDelta(delta, forceUpdateTag), this.onAttributeUpdate(context);
   }
+  canCommitBaseAttributesByTouchedKeys() {
+    var _a, _b;
+    return !((null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) || this.resolvedStatePatch || this.attributeMayContainTransientAttrs) && (!(null === (_b = this.animates) || void 0 === _b ? void 0 : _b.size) && !this._animationStateManager || !this.hasAnyTrackedAnimate());
+  }
+  detachAttributeFromBaseAttributes() {
+    this.attribute === this.baseAttributes && (this._baseAttributes = this.attribute, this.attribute = cloneAttributeSurface(this.attribute));
+  }
+  commitInternalBaseAttributes(params, context) {
+    params && Object.keys(params).length && (this.canCommitBaseAttributesByTouchedKeys() ? this.commitBaseAttributesByTouchedKeys(params, !1, context) : (this.detachAttributeFromBaseAttributes(), this.applyBaseAttributes(params), this.commitBaseAttributeMutation(!1, context)));
+  }
+  commitBaseAttributesByTouchedKeys(params, forceUpdateTag = !1, context) {
+    const source = params,
+      baseAttributes = this.getBaseAttributesStorage();
+    let hasKeys = !1,
+      needsShapeAndBounds = forceUpdateTag;
+    for (const key in source) Object.prototype.hasOwnProperty.call(source, key) && (hasKeys = !0, baseAttributes[key] = source[key], !needsShapeAndBounds && this.needUpdateTag(key) && (needsShapeAndBounds = !0));
+    hasKeys && (this.attribute = baseAttributes, this._baseAttributes = void 0, this.valid = this.isValid(), this.attributeMayContainTransientAttrs = !1, this.submitTouchedUpdate(needsShapeAndBounds), this.onAttributeUpdate(context));
+  }
+  commitBaseAttributeBySingleKey(key, value, forceUpdateTag = !1, context) {
+    this.getBaseAttributesStorage()[key] = value, this.attribute = this.getBaseAttributesStorage(), this._baseAttributes = void 0, this.valid = this.isValid(), this.attributeMayContainTransientAttrs = !1, this.submitTouchedUpdate(forceUpdateTag || this.needUpdateTag(key)), this.onAttributeUpdate(context);
+  }
   applyBaseAttributes(params) {
     const keys = Object.keys(params);
     for (let i = 0; i < keys.length; i++) {
       const key = keys[i];
-      this.baseAttributes[key] = cloneAttributeValue(params[key]);
+      this.getBaseAttributesStorage()[key] = params[key];
     }
   }
+  applyAnimationTransientAttributes(params, forceUpdateTag = !1, context) {
+    const source = params;
+    let target,
+      needsShapeAndBounds = forceUpdateTag;
+    for (const key in source) Object.prototype.hasOwnProperty.call(source, key) && (target || (this.detachAttributeFromBaseAttributes(), target = this.attribute), target[key] = source[key], !needsShapeAndBounds && this.needUpdateTag(key) && (needsShapeAndBounds = !0));
+    target && (this.attributeMayContainTransientAttrs = !0, this.valid = this.isValid(), this.submitTouchedUpdate(needsShapeAndBounds), this.onAttributeUpdate(context));
+  }
   applyTransientAttributes(params, forceUpdateTag = !1, context) {
+    this.detachAttributeFromBaseAttributes();
     const delta = new Map(),
       keys = Object.keys(params);
     for (let i = 0; i < keys.length; i++) {
       const key = keys[i],
         previousValue = this.attribute[key],
         nextValue = params[key];
-      isEqual(previousValue, nextValue) || (delta.set(key, {
+      areAttributeValuesEqual(previousValue, nextValue) || (delta.set(key, {
         prev: previousValue,
         next: nextValue
-      }), this.attribute[key] = cloneAttributeValue(nextValue));
+      }), this.attribute[key] = nextValue);
     }
-    this.valid = this.isValid(), this.submitUpdateByDelta(delta, forceUpdateTag), this.onAttributeUpdate(context);
+    delta.size && (this.attributeMayContainTransientAttrs = !0), this.valid = this.isValid(), this.submitUpdateByDelta(delta, forceUpdateTag), this.onAttributeUpdate(context);
   }
   _restoreAttributeFromStaticTruth(context) {
     this._syncFinalAttributeFromStaticTruth();
     const delta = this._syncAttribute();
     this.submitUpdateByDelta(delta), this.onAttributeUpdate(context);
   }
+  collectStatePatchDeltaKeys(previousPatch, nextPatch) {
+    const keys = previousPatch ? Object.keys(previousPatch) : [];
+    if (!nextPatch) return keys;
+    for (const key in nextPatch) Object.prototype.hasOwnProperty.call(nextPatch, key) && !Object.prototype.hasOwnProperty.call(null != previousPatch ? previousPatch : {}, key) && keys.push(key);
+    return keys;
+  }
+  getStaticTruthValueForStateKey(key, nextPatch) {
+    var _a;
+    const baseAttributes = null !== (_a = this.baseAttributes) && void 0 !== _a ? _a : {},
+      patch = nextPatch;
+    if (patch && Object.prototype.hasOwnProperty.call(patch, key)) {
+      const patchValue = patch[key],
+        baseValue = baseAttributes[key];
+      return "deep" === this.stateMergeMode && isPlainObjectValue(baseValue) && isPlainObjectValue(patchValue) ? {
+        hasValue: !0,
+        value: deepMergeAttributeValue(baseValue, patchValue)
+      } : {
+        hasValue: !0,
+        value: patchValue
+      };
+    }
+    return Object.prototype.hasOwnProperty.call(baseAttributes, key) ? {
+      hasValue: !0,
+      value: baseAttributes[key]
+    } : {
+      hasValue: !1,
+      value: void 0
+    };
+  }
+  syncStatePatchDeltaToTarget(target, keys, nextPatch, collectCategory = !1) {
+    let category = UpdateCategory.NONE;
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i],
+        previousValue = target[key],
+        next = this.getStaticTruthValueForStateKey(key, nextPatch);
+      if (!next.hasValue) {
+        Object.prototype.hasOwnProperty.call(target, key) && (delete target[key], collectCategory && (category = this.mergeAttributeDeltaCategory(category, key, previousValue, void 0)));
+        continue;
+      }
+      if (areAttributeValuesEqual(previousValue, next.value)) continue;
+      const nextValue = cloneAttributeValue(next.value);
+      target[key] = nextValue, collectCategory && (category = this.mergeAttributeDeltaCategory(category, key, previousValue, nextValue));
+    }
+    return category;
+  }
+  restoreAttributeFromStatePatchDelta(previousPatch, nextPatch, context) {
+    this.detachAttributeFromBaseAttributes();
+    const keys = this.collectStatePatchDeltaKeys(previousPatch, nextPatch),
+      finalAttribute = this.finalAttribute;
+    finalAttribute && this.syncStatePatchDeltaToTarget(finalAttribute, keys, nextPatch, !1);
+    const category = this.syncStatePatchDeltaToTarget(this.attribute, keys, nextPatch, !0);
+    this.valid = this.isValid(), this.attributeMayContainTransientAttrs = !1, this.submitUpdateByCategory(category), this.onAttributeUpdate(context);
+  }
   setMode(mode) {
     "3d" === mode ? this.set3dMode() : this.set2dMode();
   }
@@ -5682,7 +5960,7 @@ class Graphic extends Node {
     return point;
   }
   onAnimateBind(animate) {
-    this._emitCustomEvent("animate-bind", animate);
+    this.detachAttributeFromBaseAttributes(), this._emitCustomEvent("animate-bind", animate);
   }
   visitTrackedAnimates(cb) {
     const hook = this.forEachTrackedAnimate;
@@ -5695,8 +5973,22 @@ class Graphic extends Node {
     const getTrackedAnimates = this.getTrackedAnimates;
     return "function" == typeof getTrackedAnimates ? getTrackedAnimates.call(this).size > 0 : !!(null === (_a = this.animates) || void 0 === _a ? void 0 : _a.size);
   }
+  mayHaveTrackedAnimates() {
+    var _a;
+    return !!(null === (_a = this.animates) || void 0 === _a ? void 0 : _a.size) || !!this._animationStateManager;
+  }
   tryUpdateAABBBounds() {
+    if (!(this.shadowRoot || this._updateTag & UpdateTag.UPDATE_BOUNDS)) return this._AABBBounds;
     const full = "imprecise" === this.attribute.boundsMode;
+    if (!this.shadowRoot) {
+      const graphicService = this.getGraphicService(),
+        graphicTheme = this.getGraphicTheme();
+      if (!graphicService.validCheck(this.attribute, graphicTheme, this._AABBBounds, this)) return this._AABBBounds;
+      if (!this.valid) return this._AABBBounds.clear(), this._AABBBounds;
+      graphicService.beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
+      const bounds = this.doUpdateAABBBounds(full, graphicTheme);
+      return graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, !0), "empty" === this.attribute.boundsMode && bounds.clear(), bounds;
+    }
     if (!this.shouldUpdateAABBBounds()) return this._AABBBounds;
     if (!this.valid) return this._AABBBounds.clear(), this._AABBBounds;
     this.getGraphicService().beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
@@ -5769,14 +6061,14 @@ class Graphic extends Node {
     const _parsedPath = new CustomSymbolClass(symbolType, cache);
     return Graphic.userSymbolMap[symbolType] = _parsedPath, _parsedPath;
   }
-  doUpdateAABBBounds(full) {
+  doUpdateAABBBounds(full, graphicTheme) {
     this.updateAABBBoundsStamp++;
-    const graphicTheme = this.getGraphicTheme();
+    const resolvedGraphicTheme = null != graphicTheme ? graphicTheme : this.getGraphicTheme();
     this._AABBBounds.clear();
     const attribute = this.attribute,
-      bounds = this.updateAABBBounds(attribute, graphicTheme, this._AABBBounds, full),
+      bounds = this.updateAABBBounds(attribute, resolvedGraphicTheme, this._AABBBounds, full),
       {
-        boundsPadding = graphicTheme.boundsPadding
+        boundsPadding = resolvedGraphicTheme.boundsPadding
       } = attribute,
       paddingArray = parsePadding(boundsPadding);
     return paddingArray && bounds.expand(paddingArray), this.clearUpdateBoundTag(), bounds;
@@ -5844,25 +6136,71 @@ class Graphic extends Node {
     this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
   }
   setAttributesAndPreventAnimate(params, forceUpdateTag = !1, context, ignorePriority) {
-    this.visitTrackedAnimates(animate => {
-      (animate.priority !== 1 / 0 || ignorePriority) && Object.keys(params).forEach(key => {
-        animate.preventAttr(key);
-      });
+    if (!params) return;
+    const keys = Object.keys(params);
+    this.captureTransientFromAttrsBeforePreventAnimate(params, keys, context), this.syncFinalAttributesFromUpdateContext(context), this.visitTrackedAnimates(animate => {
+      (animate.priority !== 1 / 0 || ignorePriority) && animate.preventAttrs(keys);
     }), this.applyTransientAttributes(params, forceUpdateTag, context);
   }
+  syncFinalAttributesFromUpdateContext(context) {
+    var _a;
+    const updateType = null == context ? void 0 : context.type;
+    if (updateType === AttributeUpdateType.STATE || null != updateType && updateType >= AttributeUpdateType.ANIMATE_BIND && updateType <= AttributeUpdateType.ANIMATE_END) return;
+    const finalAttrs = null === (_a = this.context) || void 0 === _a ? void 0 : _a.finalAttrs,
+      setFinalAttributes = this.setFinalAttributes;
+    finalAttrs && "function" == typeof setFinalAttributes && setFinalAttributes.call(this, finalAttrs);
+  }
+  captureTransientFromAttrsBeforePreventAnimate(params, keys, context) {
+    var _a, _b;
+    const graphicContext = this.context,
+      diffAttrs = null !== (_a = null == graphicContext ? void 0 : graphicContext.diffAttrs) && void 0 !== _a ? _a : params,
+      updateType = null == context ? void 0 : context.type;
+    if (!keys.length || !diffAttrs || updateType === AttributeUpdateType.STATE || null != updateType && updateType >= AttributeUpdateType.ANIMATE_BIND && updateType <= AttributeUpdateType.ANIMATE_END) return;
+    const sameDiffAttrs = this.transientFromAttrsBeforePreventAnimateDiffAttrs === diffAttrs;
+    let fromAttrs = sameDiffAttrs && null !== (_b = this.transientFromAttrsBeforePreventAnimate) && void 0 !== _b ? _b : null;
+    sameDiffAttrs || (this.transientFromAttrsBeforePreventAnimate = null, this.transientFromAttrsBeforePreventAnimateDiffAttrs = null);
+    let captured = !1;
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+      if (!Object.prototype.hasOwnProperty.call(diffAttrs, key)) continue;
+      const previousValue = this.attribute[key],
+        nextValue = params[key];
+      isEqual(previousValue, nextValue) || (null != fromAttrs || (fromAttrs = {}), fromAttrs[key] = cloneAttributeValue(previousValue), captured = !0);
+    }
+    captured && (this.transientFromAttrsBeforePreventAnimate = fromAttrs, this.transientFromAttrsBeforePreventAnimateDiffAttrs = diffAttrs);
+  }
+  consumeTransientFromAttrsBeforePreventAnimate(diffAttrs) {
+    const transientFromAttrs = this.transientFromAttrsBeforePreventAnimate,
+      sourceDiffAttrs = this.transientFromAttrsBeforePreventAnimateDiffAttrs;
+    if (!transientFromAttrs || !sourceDiffAttrs) return null;
+    for (const key in diffAttrs) if (Object.prototype.hasOwnProperty.call(diffAttrs, key) && (!Object.prototype.hasOwnProperty.call(sourceDiffAttrs, key) || !isEqual(sourceDiffAttrs[key], diffAttrs[key]))) return null;
+    let fromAttrs = null,
+      remaining = !1;
+    for (const key in transientFromAttrs) Object.prototype.hasOwnProperty.call(transientFromAttrs, key) && (Object.prototype.hasOwnProperty.call(diffAttrs, key) ? (null != fromAttrs || (fromAttrs = {}), fromAttrs[key] = transientFromAttrs[key]) : remaining = !0);
+    if (remaining) {
+      const nextTransientFromAttrs = {};
+      for (const key in transientFromAttrs) Object.prototype.hasOwnProperty.call(transientFromAttrs, key) && !Object.prototype.hasOwnProperty.call(diffAttrs, key) && (nextTransientFromAttrs[key] = transientFromAttrs[key]);
+      this.transientFromAttrsBeforePreventAnimate = nextTransientFromAttrs;
+    } else this.transientFromAttrsBeforePreventAnimate = null, this.transientFromAttrsBeforePreventAnimateDiffAttrs = null;
+    return fromAttrs;
+  }
   setAttributes(params, forceUpdateTag = !1, context) {
-    params && ((params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params).background && this.loadImage(params.background, !0), isExternalTexture(params.texture) && this.loadImage(params.texture, !1), params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._setAttributes(params, forceUpdateTag, context));
+    params && ((params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params).background && this.loadImage(params.background, !0), params.texture && isExternalTexture(params.texture) && this.loadImage(params.texture, !1), params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._setAttributes(params, forceUpdateTag, context));
   }
   _setAttributes(params, forceUpdateTag = !1, context) {
-    this.applyBaseAttributes(params), this.commitBaseAttributeMutation(forceUpdateTag, context);
+    this.canCommitBaseAttributesByTouchedKeys() ? this.commitBaseAttributesByTouchedKeys(params, forceUpdateTag, context) : (this.detachAttributeFromBaseAttributes(), this.applyBaseAttributes(params), this.commitBaseAttributeMutation(forceUpdateTag, context));
   }
   setAttribute(key, value, forceUpdateTag, context) {
     const params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({
       [key]: value
     }, this.attribute, key, context);
-    params ? this._setAttributes(params, forceUpdateTag, context) : (this.applyBaseAttributes({
-      [key]: value
-    }), this.commitBaseAttributeMutation(!!forceUpdateTag, context)), "background" === key ? this.loadImage(value, !0) : "texture" === key && isExternalTexture(value) ? this.loadImage(value, !1) : "shadowGraphic" === key && this.setShadowGraphic(value);
+    if (params) this._setAttributes(params, forceUpdateTag, context);else if (this.canCommitBaseAttributesByTouchedKeys()) this.commitBaseAttributeBySingleKey(key, value, !!forceUpdateTag, context);else {
+      const nextAttrs = {
+        [key]: value
+      };
+      this.applyBaseAttributes(nextAttrs), this.commitBaseAttributeMutation(!!forceUpdateTag, context);
+    }
+    "background" === key ? this.loadImage(value, !0) : "texture" === key && isExternalTexture(value) ? this.loadImage(value, !1) : "shadowGraphic" === key && this.setShadowGraphic(value);
   }
   needUpdateTags(keys, k = GRAPHIC_UPDATE_TAG_KEY) {
     for (let i = 0; i < k.length; i++) {
@@ -5881,7 +6219,7 @@ class Graphic extends Node {
     const context = {
       type: AttributeUpdateType.INIT
     };
-    params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params, this.baseAttributes = cloneAttributeValue(params), this.attribute || (this.attribute = {}), this.resolvedStatePatch = void 0, this._syncAttribute(), params.background && this.loadImage(params.background, !0), isExternalTexture(params.texture) && this.loadImage(params.texture, !1), params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._updateTag = UpdateTag.INIT, this.valid = this.isValid(), this.onAttributeUpdate(context);
+    params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params, this.attribute = params, this._baseAttributes = void 0, this.resolvedStatePatch = void 0, this.attributeMayContainTransientAttrs = !1, this.valid = this.isValid(), params.background && this.loadImage(params.background, !0), params.texture && isExternalTexture(params.texture) && this.loadImage(params.texture, !1), params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._updateTag = UpdateTag.INIT, this.valid = this.isValid(), this.onAttributeUpdate(context);
   }
   translate(x, y) {
     var _a, _b;
@@ -5893,10 +6231,15 @@ class Graphic extends Node {
         x: x,
         y: y
       }, this.attribute, tempConstantXYKey, context);
-    params && (x = params.x, y = params.y, delete params.x, delete params.y, this.applyBaseAttributes(params));
+    params && (x = params.x, y = params.y, delete params.x, delete params.y);
     const attribute = this.baseAttributes,
-      postMatrix = attribute.postMatrix;
-    return postMatrix ? application.transformUtil.fromMatrix(postMatrix, postMatrix).translate(x, y) : (attribute.x = (null !== (_a = attribute.x) && void 0 !== _a ? _a : DefaultTransform.x) + x, attribute.y = (null !== (_b = attribute.y) && void 0 !== _b ? _b : DefaultTransform.y) + y), this.commitBaseAttributeMutation(!1, context), this;
+      postMatrix = attribute.postMatrix,
+      nextAttrs = params || {};
+    if (postMatrix) {
+      const nextPostMatrix = postMatrix.clone();
+      application.transformUtil.fromMatrix(nextPostMatrix, nextPostMatrix).translate(x, y), nextAttrs.postMatrix = nextPostMatrix;
+    } else nextAttrs.x = (null !== (_a = attribute.x) && void 0 !== _a ? _a : DefaultTransform.x) + x, nextAttrs.y = (null !== (_b = attribute.y) && void 0 !== _b ? _b : DefaultTransform.y) + y;
+    return this.commitInternalBaseAttributes(nextAttrs, context), this;
   }
   translateTo(x, y) {
     const attribute = this.baseAttributes;
@@ -5908,7 +6251,10 @@ class Graphic extends Node {
         x: x,
         y: y
       }, this.attribute, tempConstantXYKey, context);
-    return params ? (this.applyBaseAttributes(params), this.commitBaseAttributeMutation(!1, context), this) : (attribute.x = x, attribute.y = y, this.commitBaseAttributeMutation(!1, context), this);
+    return params ? (this.commitInternalBaseAttributes(params, context), this) : (this.commitInternalBaseAttributes({
+      x: x,
+      y: y
+    }, context), this);
   }
   scale(scaleX, scaleY, scaleCenter) {
     var _a, _b;
@@ -5921,15 +6267,16 @@ class Graphic extends Node {
         scaleY: scaleY,
         scaleCenter: scaleCenter
       }, this.attribute, tempConstantScaleXYKey, context);
-    params && (scaleX = params.scaleX, scaleY = params.scaleY, delete params.scaleX, delete params.scaleY, this.applyBaseAttributes(params));
-    const attribute = this.baseAttributes;
+    params && (scaleX = params.scaleX, scaleY = params.scaleY, delete params.scaleX, delete params.scaleY);
+    const attribute = this.baseAttributes,
+      nextAttrs = params || {};
     if (scaleCenter) {
       let {
         postMatrix: postMatrix
-      } = this.attribute;
-      postMatrix || (postMatrix = new Matrix(), attribute.postMatrix = postMatrix), application.transformUtil.fromMatrix(postMatrix, postMatrix).scale(scaleX, scaleY, scaleCenter);
-    } else attribute.scaleX = (null !== (_a = attribute.scaleX) && void 0 !== _a ? _a : DefaultTransform.scaleX) * scaleX, attribute.scaleY = (null !== (_b = attribute.scaleY) && void 0 !== _b ? _b : DefaultTransform.scaleY) * scaleY;
-    return this.commitBaseAttributeMutation(!1, context), this;
+      } = this.baseAttributes;
+      postMatrix = postMatrix ? postMatrix.clone() : new Matrix(), application.transformUtil.fromMatrix(postMatrix, postMatrix).scale(scaleX, scaleY, scaleCenter), nextAttrs.postMatrix = postMatrix;
+    } else nextAttrs.scaleX = (null !== (_a = attribute.scaleX) && void 0 !== _a ? _a : DefaultTransform.scaleX) * scaleX, nextAttrs.scaleY = (null !== (_b = attribute.scaleY) && void 0 !== _b ? _b : DefaultTransform.scaleY) * scaleY;
+    return this.commitInternalBaseAttributes(nextAttrs, context), this;
   }
   scaleTo(scaleX, scaleY) {
     const attribute = this.baseAttributes;
@@ -5941,7 +6288,10 @@ class Graphic extends Node {
         scaleX: scaleX,
         scaleY: scaleY
       }, this.attribute, tempConstantScaleXYKey, context);
-    return params ? (this.applyBaseAttributes(params), this.commitBaseAttributeMutation(!1, context), this) : (attribute.scaleX = scaleX, attribute.scaleY = scaleY, this.commitBaseAttributeMutation(!1, context), this);
+    return params ? (this.commitInternalBaseAttributes(params, context), this) : (this.commitInternalBaseAttributes({
+      scaleX: scaleX,
+      scaleY: scaleY
+    }, context), this);
   }
   rotate(angle, rotateCenter) {
     var _a;
@@ -5953,24 +6303,26 @@ class Graphic extends Node {
         angle: angle,
         rotateCenter: rotateCenter
       }, this.attribute, tempConstantAngleKey, context);
-    params && (delete params.angle, this.applyBaseAttributes(params));
-    const attribute = this.baseAttributes;
+    params && delete params.angle;
+    const attribute = this.baseAttributes,
+      nextAttrs = params || {};
     if (rotateCenter) {
       let {
         postMatrix: postMatrix
       } = this.baseAttributes;
-      postMatrix || (postMatrix = new Matrix(), this.baseAttributes.postMatrix = postMatrix), application.transformUtil.fromMatrix(postMatrix, postMatrix).rotate(angle, rotateCenter);
-    } else attribute.angle = (null !== (_a = attribute.angle) && void 0 !== _a ? _a : DefaultTransform.angle) + angle;
-    return this.commitBaseAttributeMutation(!1, context), this;
+      postMatrix = postMatrix ? postMatrix.clone() : new Matrix(), application.transformUtil.fromMatrix(postMatrix, postMatrix).rotate(angle, rotateCenter), nextAttrs.postMatrix = postMatrix;
+    } else nextAttrs.angle = (null !== (_a = attribute.angle) && void 0 !== _a ? _a : DefaultTransform.angle) + angle;
+    return this.commitInternalBaseAttributes(nextAttrs, context), this;
   }
   rotateTo(angle) {
-    const attribute = this.baseAttributes;
-    if (attribute.angle === angle) return this;
+    if (this.baseAttributes.angle === angle) return this;
     const context = {
         type: AttributeUpdateType.ROTATE_TO
       },
       params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(angle, this.attribute, tempConstantAngleKey, context);
-    return params ? (this.applyBaseAttributes(params), this.commitBaseAttributeMutation(!1, context), this) : (attribute.angle = angle, this.commitBaseAttributeMutation(!1, context), this);
+    return params ? (this.commitInternalBaseAttributes(params, context), this) : (this.commitInternalBaseAttributes({
+      angle: angle
+    }, context), this);
   }
   skewTo(b, c) {
     return this;
@@ -5988,7 +6340,15 @@ class Graphic extends Node {
     var _a;
     return null === (_a = this.states) || void 0 === _a ? void 0 : _a[stateName];
   }
-  createStateModel() {
+  getStateResolveBaseAttrs() {
+    var _a;
+    return null !== (_a = this.baseAttributes) && void 0 !== _a ? _a : this.attribute;
+  }
+  syncStateResolveContext(stateResolveBaseAttrs = this.getStateResolveBaseAttrs()) {
+    var _a;
+    return null === (_a = this.stateEngine) || void 0 === _a || _a.setResolveContext(this, stateResolveBaseAttrs), stateResolveBaseAttrs;
+  }
+  createStateModel(stateResolveBaseAttrs = this.getStateResolveBaseAttrs()) {
     const {
       compiledDefinitions: compiledDefinitions,
       stateProxyEligibility: stateProxyEligibility,
@@ -6001,7 +6361,7 @@ class Graphic extends Node {
       stateProxyEligibility: stateProxyEligibility,
       states: this.states,
       mergeMode: this.stateMergeMode
-    }), this.stateEngineCompiledDefinitions = compiledDefinitions, this.stateEngineStateProxy = this.stateProxy, this.stateEngineStateSort = this.stateSort, this.stateEngineMergeMode = this.stateMergeMode, this.stateEngineStateProxyModeKey = stateProxyModeKey) : (this.stateEngine = void 0, this.stateEngineCompiledDefinitions = void 0, this.stateEngineStateProxyModeKey = void 0), new StateModel({
+    }), this.stateEngineCompiledDefinitions = compiledDefinitions, this.stateEngineStateProxy = this.stateProxy, this.stateEngineStateSort = this.stateSort, this.stateEngineMergeMode = this.stateMergeMode, this.stateEngineStateProxyModeKey = stateProxyModeKey) : (this.stateEngine = void 0, this.stateEngineCompiledDefinitions = void 0, this.stateEngineStateProxyModeKey = void 0), this.syncStateResolveContext(stateResolveBaseAttrs), new StateModel({
       states: this.states,
       currentStates: this.currentStates,
       stateSort: this.stateSort,
@@ -6009,28 +6369,162 @@ class Graphic extends Node {
       stateEngine: this.stateEngine
     });
   }
+  resolveSimpleLocalStateTransition(states, previousStates) {
+    var _a;
+    if (!this.states || this.stateProxy || this.stateSort || "deep" === this.stateMergeMode || this.parent || (null === (_a = this.stage) || void 0 === _a ? void 0 : _a.rootSharedStateScope) || this.boundSharedStateScope) return null;
+    if (1 === states.length) {
+      const stateName = states[0],
+        hasDefinition = Object.prototype.hasOwnProperty.call(this.states, stateName),
+        nextStates = [stateName],
+        changed = !this.sameStateNames(previousStates, nextStates),
+        resolvedStateAttrs = {};
+      if (hasDefinition) {
+        const attrs = this.states[stateName];
+        if (null != attrs) {
+          if (!isPlainObjectValue(attrs)) return null;
+          const keys = Object.keys(attrs);
+          for (let keyIndex = 0; keyIndex < keys.length; keyIndex++) {
+            const key = keys[keyIndex];
+            if (FULL_STATE_DEFINITION_KEYS.has(key)) return null;
+            const attrValue = attrs[key];
+            resolvedStateAttrs[key] = isPlainObjectValue(attrValue) ? cloneAttributeValue(attrValue) : attrValue;
+          }
+        }
+      }
+      return {
+        changed: changed,
+        states: nextStates,
+        effectiveStates: nextStates,
+        resolvedStateAttrs: resolvedStateAttrs
+      };
+    }
+    const uniqueStates = Array.from(new Set(states)),
+      withDefinition = [],
+      withoutDefinition = [];
+    for (let i = 0; i < uniqueStates.length; i++) {
+      const stateName = uniqueStates[i];
+      Object.prototype.hasOwnProperty.call(this.states, stateName) ? withDefinition.push(stateName) : withoutDefinition.push(stateName);
+    }
+    withDefinition.sort((left, right) => left.localeCompare(right));
+    const nextStates = withDefinition.concat(withoutDefinition),
+      changed = !this.sameStateNames(previousStates, nextStates),
+      resolvedStateAttrs = {};
+    for (let i = 0; i < nextStates.length; i++) {
+      const stateName = nextStates[i];
+      if (!Object.prototype.hasOwnProperty.call(this.states, stateName)) continue;
+      const attrs = this.states[stateName];
+      if (null == attrs) continue;
+      if (!isPlainObjectValue(attrs)) return null;
+      const keys = Object.keys(attrs);
+      for (let keyIndex = 0; keyIndex < keys.length; keyIndex++) {
+        const key = keys[keyIndex];
+        if (FULL_STATE_DEFINITION_KEYS.has(key)) return null;
+        const attrValue = attrs[key];
+        resolvedStateAttrs[key] = isPlainObjectValue(attrValue) ? cloneAttributeValue(attrValue) : attrValue;
+      }
+    }
+    return {
+      changed: changed,
+      states: nextStates,
+      effectiveStates: nextStates,
+      resolvedStateAttrs: resolvedStateAttrs
+    };
+  }
+  resolveGraphicStateTransition(states, previousStates, forceResolverRefresh = !1) {
+    var _a, _b;
+    let transition = this.resolveSimpleLocalStateTransition(states, previousStates);
+    const isSimpleLocalTransition = !!transition;
+    let resolvedStateAttrs;
+    if (transition) resolvedStateAttrs = transition.resolvedStateAttrs;else {
+      const stateResolveBaseAttrs = this.getStateResolveBaseAttrs(),
+        stateModel = this.createStateModel(stateResolveBaseAttrs);
+      forceResolverRefresh && (null === (_a = this.stateEngine) || void 0 === _a || _a.invalidateResolverCache()), transition = stateModel.useStates(states), resolvedStateAttrs = this.stateEngine && this.compiledStateDefinitions ? Object.assign({}, this.stateEngine.resolvedPatch) : this.getStateStyleResolver(this.stateMergeMode).resolve(stateResolveBaseAttrs, this.states, this.stateProxy, transition.states, this.stateSort);
+    }
+    return {
+      transition: transition,
+      effectiveStates: null !== (_b = transition.effectiveStates) && void 0 !== _b ? _b : transition.states,
+      resolvedStateAttrs: resolvedStateAttrs,
+      isSimpleLocalTransition: isSimpleLocalTransition
+    };
+  }
+  normalizeSetStatesOptions(options) {
+    return options && "object" == typeof options ? {
+      hasAnimation: options.animate,
+      animateSameStatePatchChange: !0 === options.animateSameStatePatchChange,
+      shouldRefreshSameStatePatch: !0
+    } : {
+      hasAnimation: "boolean" == typeof options ? options : void 0,
+      animateSameStatePatchChange: !1,
+      shouldRefreshSameStatePatch: !1
+    };
+  }
+  sameStatePatches(left, right) {
+    const leftRecord = null != left ? left : {},
+      rightRecord = null != right ? right : {},
+      keys = new Set([...Object.keys(leftRecord), ...Object.keys(rightRecord)]);
+    for (const key of keys) {
+      if (Object.prototype.hasOwnProperty.call(leftRecord, key) !== Object.prototype.hasOwnProperty.call(rightRecord, key)) return !1;
+      if (!areAttributeValuesEqual(leftRecord[key], rightRecord[key])) return !1;
+    }
+    return !0;
+  }
+  commitSameStatePatchRefresh(states, hasAnimation, animateSameStatePatchChange = !1) {
+    var _a;
+    const previousStates = null !== (_a = this.currentStates) && void 0 !== _a ? _a : EMPTY_STATE_NAMES,
+      previousResolvedStatePatch = this.resolvedStatePatch,
+      {
+        transition: transition,
+        effectiveStates: effectiveStates,
+        resolvedStateAttrs: resolvedStateAttrs,
+        isSimpleLocalTransition: isSimpleLocalTransition
+      } = this.resolveGraphicStateTransition(states, previousStates, !0),
+      patchChanged = !this.sameStatePatches(previousResolvedStatePatch, resolvedStateAttrs);
+    if ((!patchChanged || this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !1)) && (this.currentStates = transition.states, this.effectiveStates = isSimpleLocalTransition ? effectiveStates : [...effectiveStates], this.resolvedStatePatch = resolvedStateAttrs, this.sharedStateDirty = !1, this.syncSharedStateActiveRegistrations(), patchChanged)) {
+      if (this.stage) {
+        const perfMonitor = getActiveStageStatePerfMonitor(this.stage);
+        null == perfMonitor || perfMonitor.incrementCounter("stateCommits"), null == perfMonitor || perfMonitor.recordEvent("state-commit", {
+          graphicId: this._uid,
+          targetStates: [...transition.states]
+        });
+      }
+      hasAnimation && animateSameStatePatchChange ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !1, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), this.attributeMayContainTransientAttrs ? this._restoreAttributeFromStaticTruth({
+        type: AttributeUpdateType.STATE
+      }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, this.resolvedStatePatch, {
+        type: AttributeUpdateType.STATE
+      }), this.emitStateUpdateEvent());
+    }
+  }
   resolveStateAnimateConfig(animateConfig) {
     var _a, _b, _c;
     return null !== (_c = null !== (_a = null != animateConfig ? animateConfig : this.stateAnimateConfig) && void 0 !== _a ? _a : null === (_b = this.context) || void 0 === _b ? void 0 : _b.stateAnimateConfig) && void 0 !== _c ? _c : DefaultStateAnimateConfig;
   }
-  applyStateAttrs(attrs, stateNames, hasAnimation, isClear, animateConfig) {
+  applyStateAttrs(attrs, stateNames, hasAnimation, isClear, animateConfig, extraAnimateAttrs) {
     const resolvedAnimateConfig = hasAnimation ? this.resolveStateAnimateConfig(animateConfig) : void 0,
       transitionOptions = resolvedAnimateConfig ? {
-        animateConfig: resolvedAnimateConfig
+        animateConfig: resolvedAnimateConfig,
+        extraAnimateAttrs: extraAnimateAttrs,
+        shouldSkipDefaultAttribute: this.shouldSkipStateTransitionDefaultAttribute.bind(this)
       } : void 0;
     if (isClear) return void this.getStateTransitionOrchestrator().applyClearTransition(this, attrs, hasAnimation, stateNames, transitionOptions);
     const plan = this.getStateTransitionOrchestrator().analyzeTransition({}, attrs, stateNames, hasAnimation, {
       noWorkAnimateAttr: this.getNoWorkAnimateAttr(),
-      animateConfig: resolvedAnimateConfig
+      animateConfig: resolvedAnimateConfig,
+      extraAnimateAttrs: extraAnimateAttrs,
+      shouldSkipDefaultAttribute: this.shouldSkipStateTransitionDefaultAttribute.bind(this)
     });
     this.getStateTransitionOrchestrator().applyTransition(this, plan, hasAnimation, transitionOptions);
   }
-  updateNormalAttrs(stateAttrs) {
-    this._deprecatedNormalAttrsView = cloneAttributeValue(this.baseAttributes);
+  updateNormalAttrs(_stateAttrs) {}
+  getStateTransitionDefaultAttribute(key, targetAttrs) {
+    return this.getDefaultAttribute(key);
+  }
+  shouldSkipStateTransitionDefaultAttribute(_key, _targetAttrs) {
+    return !1;
   }
   stopStateAnimates(type = "end") {
     const stopAnimationState = this.stopAnimationState;
     if ("function" == typeof stopAnimationState) return void stopAnimationState.call(this, "state", type);
+    if (!this.mayHaveTrackedAnimates()) return;
     const stateAnimates = [];
     this.visitTrackedAnimates(animate => {
       animate.stateNames && stateAnimates.push(animate);
@@ -6043,18 +6537,25 @@ class Graphic extends Node {
   }
   clearStates(hasAnimation) {
     var _a, _b, _c;
-    const previousStates = this.currentStates ? this.currentStates.slice() : [],
+    const previousStates = null !== (_a = this.currentStates) && void 0 !== _a ? _a : EMPTY_STATE_NAMES,
+      previousResolvedStatePatch = this.resolvedStatePatch,
       transition = this.createStateModel().clearStates();
     if (!transition.changed && 0 === previousStates.length) return this.currentStates = [], this.effectiveStates = [], this.resolvedStatePatch = void 0, this.sharedStateDirty = !1, void this.clearSharedStateActiveRegistrations();
-    const resolvedStateAttrs = cloneAttributeValue(null !== (_a = this.baseAttributes) && void 0 !== _a ? _a : {});
-    transition.changed && !this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !0) || (this.currentStates = transition.states, this.effectiveStates = [], this.resolvedStatePatch = void 0, this.sharedStateDirty = !1, this.clearSharedStateActiveRegistrations(), null === (_b = getStageStatePerfMonitor(this.stage)) || void 0 === _b || _b.incrementCounter("stateCommits"), null === (_c = getStageStatePerfMonitor(this.stage)) || void 0 === _c || _c.recordEvent("state-commit", {
-      graphicId: this._uid,
-      targetStates: []
-    }), hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !0)) : (this.stopStateAnimates(), this._restoreAttributeFromStaticTruth({
-      type: AttributeUpdateType.STATE
-    }), this._emitCustomEvent("afterStateUpdate", {
-      type: AttributeUpdateType.STATE
-    })));
+    const resolvedStateAttrs = hasAnimation || this.hasCustomEvent("beforeStateUpdate") ? cloneAttributeValue(null !== (_b = this.baseAttributes) && void 0 !== _b ? _b : {}) : null !== (_c = this.baseAttributes) && void 0 !== _c ? _c : {};
+    if (!transition.changed || this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !0)) {
+      if (this.currentStates = transition.states, this.effectiveStates = [], this.resolvedStatePatch = void 0, this.sharedStateDirty = !1, this.clearSharedStateActiveRegistrations(), this.stage) {
+        const perfMonitor = getActiveStageStatePerfMonitor(this.stage);
+        null == perfMonitor || perfMonitor.incrementCounter("stateCommits"), null == perfMonitor || perfMonitor.recordEvent("state-commit", {
+          graphicId: this._uid,
+          targetStates: []
+        });
+      }
+      hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !0, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), this.attributeMayContainTransientAttrs ? this._restoreAttributeFromStaticTruth({
+        type: AttributeUpdateType.STATE
+      }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, void 0, {
+        type: AttributeUpdateType.STATE
+      }), this.emitStateUpdateEvent());
+    }
   }
   removeState(stateName, hasAnimation) {
     const transition = this.createStateModel().removeState(stateName);
@@ -6068,38 +6569,59 @@ class Graphic extends Node {
     const transition = this.createStateModel().addState(stateName, keepCurrentStates);
     transition.changed && this.useStates(transition.states, hasAnimation);
   }
+  setStates(states, options) {
+    var _a, _b, _c;
+    const {
+        hasAnimation: hasAnimation,
+        animateSameStatePatchChange: animateSameStatePatchChange,
+        shouldRefreshSameStatePatch: shouldRefreshSameStatePatch
+      } = this.normalizeSetStatesOptions(options),
+      nextStates = (null == states ? void 0 : states.length) ? states : EMPTY_STATE_NAMES,
+      hasCurrentState = !!((null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) || (null === (_b = this.effectiveStates) || void 0 === _b ? void 0 : _b.length) || this.resolvedStatePatch || (null === (_c = this.registeredActiveScopes) || void 0 === _c ? void 0 : _c.size));
+    if (nextStates.length) {
+      if (this.sameStateNames(this.currentStates, nextStates)) return shouldRefreshSameStatePatch ? void this.commitSameStatePatchRefresh(nextStates, hasAnimation, animateSameStatePatchChange) : void (this.sharedStateDirty && this.refreshSharedStateBeforeRender());
+      this.useStates(nextStates, hasAnimation);
+    } else {
+      if (!hasCurrentState && !this.sharedStateDirty) return;
+      this.clearStates(hasAnimation);
+    }
+  }
   useStates(states, hasAnimation) {
-    var _a, _b, _c, _d, _e;
+    var _a;
     if (!states.length) return void this.clearStates(hasAnimation);
-    const previousStates = this.currentStates ? this.currentStates.slice() : [],
-      stateResolveBaseAttrs = null !== (_a = this.baseAttributes) && void 0 !== _a ? _a : this.attribute,
-      stateModel = this.createStateModel();
-    null === (_b = this.stateEngine) || void 0 === _b || _b.setResolveContext(this, stateResolveBaseAttrs);
-    const transition = stateModel.useStates(states);
-    if (!transition.changed && this.sameStateNames(previousStates, transition.states)) return;
-    const effectiveStates = null !== (_c = transition.effectiveStates) && void 0 !== _c ? _c : transition.states,
-      resolvedStateAttrs = this.stateEngine && this.compiledStateDefinitions ? Object.assign({}, this.stateEngine.resolvedPatch) : this.getStateStyleResolver(this.stateMergeMode).resolve(stateResolveBaseAttrs, this.states, this.stateProxy, transition.states, this.stateSort);
-    this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !1) && (this.currentStates = transition.states, this.effectiveStates = [...effectiveStates], this.resolvedStatePatch = Object.assign({}, resolvedStateAttrs), this.sharedStateDirty = !1, this.syncSharedStateActiveRegistrations(), null === (_d = getStageStatePerfMonitor(this.stage)) || void 0 === _d || _d.incrementCounter("stateCommits"), null === (_e = getStageStatePerfMonitor(this.stage)) || void 0 === _e || _e.recordEvent("state-commit", {
-      graphicId: this._uid,
-      targetStates: [...transition.states]
-    }), hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation)) : (this.stopStateAnimates(), this._restoreAttributeFromStaticTruth({
-      type: AttributeUpdateType.STATE
-    }), this._emitCustomEvent("afterStateUpdate", {
-      type: AttributeUpdateType.STATE
-    })));
+    const previousStates = null !== (_a = this.currentStates) && void 0 !== _a ? _a : EMPTY_STATE_NAMES,
+      previousResolvedStatePatch = this.resolvedStatePatch,
+      {
+        transition: transition,
+        effectiveStates: effectiveStates,
+        resolvedStateAttrs: resolvedStateAttrs,
+        isSimpleLocalTransition: isSimpleLocalTransition
+      } = this.resolveGraphicStateTransition(states, previousStates);
+    if ((transition.changed || !this.sameStateNames(previousStates, transition.states)) && this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !1)) {
+      if (this.currentStates = transition.states, this.effectiveStates = isSimpleLocalTransition ? effectiveStates : [...effectiveStates], this.resolvedStatePatch = resolvedStateAttrs, this.sharedStateDirty = !1, this.syncSharedStateActiveRegistrations(), this.stage) {
+        const perfMonitor = getActiveStageStatePerfMonitor(this.stage);
+        null == perfMonitor || perfMonitor.incrementCounter("stateCommits"), null == perfMonitor || perfMonitor.recordEvent("state-commit", {
+          graphicId: this._uid,
+          targetStates: [...transition.states]
+        });
+      }
+      hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !1, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), this.attributeMayContainTransientAttrs ? this._restoreAttributeFromStaticTruth({
+        type: AttributeUpdateType.STATE
+      }) : this.restoreAttributeFromStatePatchDelta(previousResolvedStatePatch, this.resolvedStatePatch, {
+        type: AttributeUpdateType.STATE
+      }), this.emitStateUpdateEvent());
+    }
   }
   invalidateResolver() {
     var _a, _b;
     if (!this.stateEngine || !(null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) || !this.compiledStateDefinitions) return;
-    const stateResolveBaseAttrs = null !== (_b = this.baseAttributes) && void 0 !== _b ? _b : this.attribute;
-    this.stateEngine.setResolveContext(this, stateResolveBaseAttrs), this.resolverEpoch += 1, this.stateEngine.invalidateResolverCache();
+    this.syncStateResolveContext();
+    this.resolverEpoch = (null !== (_b = this.resolverEpoch) && void 0 !== _b ? _b : 0) + 1, this.stateEngine.invalidateResolverCache();
     const transition = this.stateEngine.applyStates(this.currentStates),
       resolvedStateAttrs = Object.assign({}, this.stateEngine.resolvedPatch);
-    this.effectiveStates = [...transition.effectiveStates], this.resolvedStatePatch = Object.assign({}, resolvedStateAttrs), this.sharedStateDirty = !1, this.syncSharedStateActiveRegistrations(), this.stopStateAnimates(), this._restoreAttributeFromStaticTruth({
+    this.effectiveStates = [...transition.effectiveStates], this.resolvedStatePatch = resolvedStateAttrs, this.sharedStateDirty = !1, this.syncSharedStateActiveRegistrations(), this.stopStateAnimates(), this._restoreAttributeFromStaticTruth({
       type: AttributeUpdateType.STATE
-    }), this._emitCustomEvent("afterStateUpdate", {
-      type: AttributeUpdateType.STATE
-    });
+    }), this.emitStateUpdateEvent();
   }
   sameStateNames(left, right) {
     const normalizedLeft = null != left ? left : [],
@@ -6120,6 +6642,9 @@ class Graphic extends Node {
   addUpdateShapeAndBoundsTag() {
     this._updateTag |= UpdateTag.UPDATE_SHAPE_AND_BOUNDS, this.parent && this.parent.addChildUpdateBoundTag(), this.glyphHost && this.glyphHost.addUpdateBoundTag();
   }
+  addBroadUpdateTag() {
+    this.shadowRoot && this.shadowRoot.addUpdateGlobalPositionTag(), this._updateTag |= UpdateTag.UPDATE_SHAPE_AND_BOUNDS | UpdateTag.UPDATE_PAINT | UpdateTag.UPDATE_GLOBAL_LOCAL_MATRIX | UpdateTag.UPDATE_LAYOUT, this.parent && this.parent.addChildUpdateBoundTag(), this.glyphHost && this.glyphHost.addUpdateBoundTag();
+  }
   updateShapeAndBoundsTagSetted() {
     return (this._updateTag & UpdateTag.UPDATE_SHAPE_AND_BOUNDS) === UpdateTag.UPDATE_SHAPE_AND_BOUNDS;
   }
@@ -6207,13 +6732,13 @@ class Graphic extends Node {
     }
   }
   setStage(stage, layer) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const graphicService = null !== (_c = null !== (_a = null == stage ? void 0 : stage.graphicService) && void 0 !== _a ? _a : null === (_b = this.stage) || void 0 === _b ? void 0 : _b.graphicService) && void 0 !== _c ? _c : application.graphicService,
       previousStage = this.stage;
     if (this.stage !== stage || this.layer !== layer) {
-      if (this.stage = stage, this.layer = layer, this.syncSharedStateScopeBindingFromTree(!!(null === (_d = this.currentStates) || void 0 === _d ? void 0 : _d.length)), this.setStageToShadowRoot(stage, layer), this.hasAnyTrackedAnimate()) {
-        const previousTimeline = null === (_e = null == previousStage ? void 0 : previousStage.getTimeline) || void 0 === _e ? void 0 : _e.call(previousStage),
-          nextTimeline = null === (_f = null == stage ? void 0 : stage.getTimeline) || void 0 === _f ? void 0 : _f.call(stage),
+      if (this.stage = stage, this.layer = layer, ((null === (_d = this.currentStates) || void 0 === _d ? void 0 : _d.length) || this.boundSharedStateScope || (null === (_e = this.registeredActiveScopes) || void 0 === _e ? void 0 : _e.size) || this.sharedStateDirty) && this.syncSharedStateScopeBindingOnTreeChange(!0), this.setStageToShadowRoot(stage, layer), this.mayHaveTrackedAnimates() && this.hasAnyTrackedAnimate()) {
+        const previousTimeline = null === (_f = null == previousStage ? void 0 : previousStage.getTimeline) || void 0 === _f ? void 0 : _f.call(previousStage),
+          nextTimeline = null === (_g = null == stage ? void 0 : stage.getTimeline) || void 0 === _g ? void 0 : _g.call(stage),
           detachedStageAnimates = [];
         this.visitTrackedAnimates(a => {
           (!!previousTimeline && a.timeline === previousTimeline || a.timeline.isGlobal) && (nextTimeline ? a.timeline !== nextTimeline && (previousTimeline && a.timeline === previousTimeline && previousTimeline.removeAnimate(a, !1), a.setTimeline(nextTimeline), nextTimeline.addAnimate(a)) : previousTimeline && a.timeline === previousTimeline && (previousTimeline.removeAnimate(a, !1), detachedStageAnimates.push(a)));
@@ -6226,9 +6751,13 @@ class Graphic extends Node {
           type: AttributeUpdateType.ANIMATE_END
         }));
       }
-      return this._onSetStage && this._onSetStage(this, stage, layer), void (null === (_g = null == graphicService ? void 0 : graphicService.onSetStage) || void 0 === _g || _g.call(graphicService, this, stage));
+      return this._onSetStage && this._onSetStage(this, stage, layer), void (null === (_h = null == graphicService ? void 0 : graphicService.onSetStage) || void 0 === _h || _h.call(graphicService, this, stage));
     }
-    this.syncSharedStateScopeBindingFromTree(!!(null === (_h = this.currentStates) || void 0 === _h ? void 0 : _h.length));
+    ((null === (_j = this.currentStates) || void 0 === _j ? void 0 : _j.length) || this.boundSharedStateScope || (null === (_k = this.registeredActiveScopes) || void 0 === _k ? void 0 : _k.size) || this.sharedStateDirty) && this.syncSharedStateScopeBindingOnTreeChange(!0);
+  }
+  detachStageForRelease() {
+    var _a, _b, _c;
+    (null === (_a = this.registeredActiveScopes) || void 0 === _a ? void 0 : _a.size) && this.clearSharedStateActiveRegistrations(), (this.mayHaveTrackedAnimates() || this.shadowRoot) && this.stopAnimates(), this.boundSharedStateScope = void 0, this.boundSharedStateRevision = void 0, this.localFallbackCompiledDefinitions = void 0, this.compiledStateDefinitions = void 0, this.compiledStateDefinitionsCacheKey = void 0, this.stateEngine = void 0, this.stateEngineCompiledDefinitions = void 0, this.stateEngineStateProxyModeKey = void 0, this.sharedStateDirty = !1, this.stage = null, this.layer = null, this.shadowRoot && (null === (_c = (_b = this.shadowRoot).detachStageForRelease) || void 0 === _c || _c.call(_b));
   }
   setStageToShadowRoot(stage, layer) {
     this.shadowRoot && this.shadowRoot.setStage(stage, layer);
@@ -6295,6 +6824,7 @@ class Graphic extends Node {
     res && (res.state = "fail", cb && cb());
   }
   _stopAnimates() {
+    if (!this.mayHaveTrackedAnimates()) return;
     const animates = [];
     this.visitTrackedAnimates(animate => {
       animates.push(animate);
@@ -6308,14 +6838,17 @@ class Graphic extends Node {
     });
   }
   release() {
-    var _a, _b, _c;
-    this.releaseStatus = "released", this.clearSharedStateActiveRegistrations(), this.stopAnimates();
-    const graphicService = null !== (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.graphicService) && void 0 !== _b ? _b : application.graphicService;
-    null === (_c = null == graphicService ? void 0 : graphicService.onRelease) || void 0 === _c || _c.call(graphicService, this), super.release();
+    var _a, _b, _c, _d;
+    this.releaseStatus = "released", (null === (_a = this.registeredActiveScopes) || void 0 === _a ? void 0 : _a.size) && this.clearSharedStateActiveRegistrations(), (this.mayHaveTrackedAnimates() || this.shadowRoot) && this.stopAnimates();
+    const graphicService = null !== (_c = null === (_b = this.stage) || void 0 === _b ? void 0 : _b.graphicService) && void 0 !== _c ? _c : application.graphicService;
+    null === (_d = null == graphicService ? void 0 : graphicService.onRelease) || void 0 === _d || _d.call(graphicService, this), super.release();
+  }
+  hasCustomEvent(type) {
+    return !!this._events && type in this._events;
   }
   _dispatchCustomEvent(type, context) {
     var _a, _b;
-    if (this._events && type in this._events) {
+    if (this.hasCustomEvent(type)) {
       const changeEvent = new CustomEvent(type, context);
       changeEvent.bubbles = !1;
       const manager = null === (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.eventSystem) || void 0 === _b ? void 0 : _b.manager;
@@ -6324,7 +6857,7 @@ class Graphic extends Node {
     return !0;
   }
   beforeStateUpdate(attrs, prevStates, nextStates, hasAnimation, isClear) {
-    return this._dispatchCustomEvent("beforeStateUpdate", {
+    return !this.hasCustomEvent("beforeStateUpdate") || this._dispatchCustomEvent("beforeStateUpdate", {
       type: AttributeUpdateType.STATE,
       attrs: Object.assign({}, attrs),
       prevStates: prevStates.slice(),
@@ -6333,6 +6866,11 @@ class Graphic extends Node {
       isClear: !!isClear
     });
   }
+  emitStateUpdateEvent() {
+    this.hasCustomEvent("afterStateUpdate") && this._emitCustomEvent("afterStateUpdate", {
+      type: AttributeUpdateType.STATE
+    });
+  }
   _emitCustomEvent(type, context) {
     this._dispatchCustomEvent(type, context);
   }
@@ -7501,6 +8039,52 @@ class Rect extends Graphic {
   needUpdateTag(key) {
     return super.needUpdateTag(key, RECT_UPDATE_TAG_KEY);
   }
+  shouldSkipStateTransitionDefaultAttribute(key, targetAttrs) {
+    var _a;
+    const attrs = null !== (_a = null != targetAttrs ? targetAttrs : this.baseAttributes) && void 0 !== _a ? _a : this.attribute,
+      hasValue = attrKey => null != attrs[attrKey],
+      isNilValue = attrKey => null == attrs[attrKey];
+    switch (key) {
+      case "width":
+        return isNilValue("width") && hasValue("x") && hasValue("x1");
+      case "height":
+        return isNilValue("height") && hasValue("y") && hasValue("y1");
+      case "x1":
+        return isNilValue("x1") && hasValue("x") && hasValue("width");
+      case "y1":
+        return isNilValue("y1") && hasValue("y") && hasValue("height");
+      default:
+        return !1;
+    }
+  }
+  getStateTransitionDefaultAttribute(key, targetAttrs) {
+    var _a;
+    const attrs = null !== (_a = null != targetAttrs ? targetAttrs : this.baseAttributes) && void 0 !== _a ? _a : this.attribute,
+      getNumber = attrKey => {
+        const value = attrs[attrKey];
+        return "number" == typeof value && Number.isFinite(value) ? value : void 0;
+      },
+      x = getNumber("x"),
+      y = getNumber("y"),
+      x1 = getNumber("x1"),
+      y1 = getNumber("y1"),
+      width = getNumber("width"),
+      height = getNumber("height");
+    switch (key) {
+      case "width":
+        if (null == width && null != x && null != x1) return x1 - x;
+        break;
+      case "height":
+        if (null == height && null != y && null != y1) return y1 - y;
+        break;
+      case "x1":
+        if (null == x1 && null != x && null != width) return x + width;
+        break;
+      case "y1":
+        if (null == y1 && null != y && null != height) return y + height;
+    }
+    return super.getStateTransitionDefaultAttribute(key, targetAttrs);
+  }
   toCustomPath() {
     let path = super.toCustomPath();
     if (path) return path;
@@ -8973,13 +9557,15 @@ var GroupUpdateAABBBoundsMode;
 }(GroupUpdateAABBBoundsMode || (GroupUpdateAABBBoundsMode = {}));
 class Group extends Graphic {
   constructor(params) {
-    super(params), this.type = "group", this.parent = null, this.isContainer = !0, this.numberType = GROUP_NUMBER_TYPE, this._childUpdateTag = UpdateTag.UPDATE_BOUNDS;
+    super(params), this.type = "group", this.parent = null, this.isContainer = !0, this._hasSharedStateDefinitions = !1, this.numberType = GROUP_NUMBER_TYPE, this._childUpdateTag = UpdateTag.UPDATE_BOUNDS;
   }
   get sharedStateDefinitions() {
     return this._sharedStateDefinitions;
   }
   set sharedStateDefinitions(value) {
-    this._sharedStateDefinitions !== value && (this._sharedStateDefinitions = value, this.ensureSharedStateScopeBound(), this.sharedStateScope && (setSharedStateScopeLocalDefinitions(this.sharedStateScope, value), markScopeActiveDescendantsDirty(this.sharedStateScope, this.stage)));
+    if (this._sharedStateDefinitions === value) return;
+    const previousScope = this.sharedStateScope;
+    this._sharedStateDefinitions = value, this._hasSharedStateDefinitions = !!value && Object.keys(value).length > 0, this.ensureSharedStateScopeBound(), this.sharedStateScope && (setSharedStateScopeLocalDefinitions(this.sharedStateScope, value), markScopeActiveDescendantsDirty(this.sharedStateScope, this.stage)), previousScope !== this.sharedStateScope && this.notifyChildrenSharedStateTreeChanged();
   }
   setMode(mode) {
     "3d" === mode ? this.set3dMode() : this.set2dMode();
@@ -9104,9 +9690,10 @@ class Group extends Graphic {
   insertInto(newNode, idx) {
     return this._updateChildToStage(super.insertInto(newNode, idx));
   }
-  removeChild(child) {
+  removeChild(child, highPerformance = !1) {
+    var _a;
     const data = super.removeChild(child);
-    return this.getGraphicService().onRemove(child), child.setStage(null, null), this.addUpdateBoundTag(), data;
+    return data ? highPerformance ? (null === (_a = child.detachStageForRelease) || void 0 === _a || _a.call(child), data) : (this.getGraphicService().onRemove(child), child.setStage(null, null), this.addUpdateBoundTag(), data) : data;
   }
   removeAllChild(deep = !1) {
     const children = this.children.slice();
@@ -9118,11 +9705,13 @@ class Group extends Graphic {
   }
   setStage(stage, layer) {
     var _a, _b, _c, _d, _e, _f;
-    const graphicService = null !== (_c = null !== (_a = null == stage ? void 0 : stage.graphicService) && void 0 !== _a ? _a : null === (_b = this.stage) || void 0 === _b ? void 0 : _b.graphicService) && void 0 !== _c ? _c : application.graphicService;
-    if (this.stage !== stage) return this.stage = stage, this.layer = layer, this.ensureSharedStateScopeBound(), this.syncSharedStateScopeBindingFromTree(!!(null === (_d = this.currentStates) || void 0 === _d ? void 0 : _d.length)), this.setStageToShadowRoot(stage, layer), this._onSetStage && this._onSetStage(this, stage, layer), null === (_e = null == graphicService ? void 0 : graphicService.onSetStage) || void 0 === _e || _e.call(graphicService, this, stage), void this.forEachChildren(item => {
+    const graphicService = null !== (_c = null !== (_a = null == stage ? void 0 : stage.graphicService) && void 0 !== _a ? _a : null === (_b = this.stage) || void 0 === _b ? void 0 : _b.graphicService) && void 0 !== _c ? _c : application.graphicService,
+      needsSharedStateTreeSync = this._hasSharedStateDefinitions || this.sharedStateScope || (null === (_d = this.currentStates) || void 0 === _d ? void 0 : _d.length) || this.boundSharedStateScope || (null === (_e = this.registeredActiveScopes) || void 0 === _e ? void 0 : _e.size) || this.sharedStateDirty;
+    if (this.stage !== stage) return this.stage = stage, this.layer = layer, needsSharedStateTreeSync && (this.ensureSharedStateScopeBound(), this.syncSharedStateScopeBindingOnTreeChange(!0)), this.setStageToShadowRoot(stage, layer), this._onSetStage && this._onSetStage(this, stage, layer), null === (_f = null == graphicService ? void 0 : graphicService.onSetStage) || void 0 === _f || _f.call(graphicService, this, stage), void this.forEachChildren(item => {
       item.setStage(stage, this.layer);
     });
-    this.layer !== layer && (this.layer = layer), this.ensureSharedStateScopeBound(), this.syncSharedStateScopeBindingFromTree(!!(null === (_f = this.currentStates) || void 0 === _f ? void 0 : _f.length)), this.forEachChildren(item => {
+    const layerChanged = this.layer !== layer;
+    layerChanged && (this.layer = layer), needsSharedStateTreeSync ? (this.ensureSharedStateScopeBound(), this.syncSharedStateScopeBindingOnTreeChange(!0), this.notifyChildrenSharedStateTreeChanged()) : layerChanged && this.forEachChildren(item => {
       item.onParentSharedStateTreeChanged && item.onParentSharedStateTreeChanged(stage, this.layer);
     });
   }
@@ -9169,15 +9758,29 @@ class Group extends Graphic {
       g.release(all);
     }), super.release();
   }
+  detachStageForRelease() {
+    super.detachStageForRelease(), this.sharedStateScope = void 0, this.forEachChildren(item => {
+      var _a;
+      null === (_a = item.detachStageForRelease) || void 0 === _a || _a.call(item);
+    });
+  }
   ensureSharedStateScopeBound() {
     var _a, _b, _c;
+    if (!this.hasSharedStateDefinitions()) return void (this.sharedStateScope = void 0);
     const parentScope = null !== (_b = null === (_a = this.parent) || void 0 === _a ? void 0 : _a.sharedStateScope) && void 0 !== _b ? _b : null === (_c = this.stage) || void 0 === _c ? void 0 : _c.rootSharedStateScope;
     this.sharedStateScope ? (this.sharedStateScope.ownerGroup = this, this.sharedStateScope.ownerStage = this.stage, setSharedStateScopeParent(this.sharedStateScope, parentScope), this.sharedStateScope.localStateDefinitions !== this._sharedStateDefinitions && setSharedStateScopeLocalDefinitions(this.sharedStateScope, this._sharedStateDefinitions)) : this.sharedStateScope = createGroupSharedStateScope(this, parentScope, this._sharedStateDefinitions);
   }
+  hasSharedStateDefinitions() {
+    return this._hasSharedStateDefinitions;
+  }
+  notifyChildrenSharedStateTreeChanged() {
+    this.forEachChildren(item => {
+      item.onParentSharedStateTreeChanged && item.onParentSharedStateTreeChanged(this.stage, this.layer);
+    });
+  }
   onParentSharedStateTreeChanged(stage, layer) {
-    this.stage === stage && this.layer === layer ? (this.ensureSharedStateScopeBound(), this.syncSharedStateScopeBindingFromTree(), this.forEachChildren(item => {
-      item.onParentSharedStateTreeChanged && item.onParentSharedStateTreeChanged(stage, this.layer);
-    })) : this.setStage(stage, layer);
+    var _a;
+    this.stage === stage && this.layer === layer ? (this.ensureSharedStateScopeBound(), this.syncSharedStateScopeBindingOnTreeChange(!!(null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length)), this.notifyChildrenSharedStateTreeChanged()) : this.setStage(stage, layer);
   }
 }
 Group.NOWORK_ANIMATE_ATTR = NOWORK_ANIMATE_ATTR;
@@ -9365,7 +9968,10 @@ class DefaultGraphicService {
       beforeUpdateAABBBounds: new SyncHook(["graphic", "stage", "willUpdate", "aabbBounds"]),
       afterUpdateAABBBounds: new SyncHook(["graphic", "stage", "aabbBounds", "globalAABBBounds", "selfChange"]),
       clearAABBBounds: new SyncHook(["graphic", "stage", "aabbBounds"])
-    }, this.tempAABBBounds1 = new AABBBounds(), this.tempAABBBounds2 = new AABBBounds();
+    }, this.tempAABBBounds1 = new AABBBounds(), this.tempAABBBounds2 = new AABBBounds(), this.tempAABBBoundsResult = {
+      tb1: this.tempAABBBounds1,
+      tb2: this.tempAABBBounds2
+    };
   }
   onAttributeUpdate(graphic) {
     this.hooks.onAttributeUpdate.taps.length && this.hooks.onAttributeUpdate.call(graphic);
@@ -9465,10 +10071,7 @@ class DefaultGraphicService {
   updateTempAABBBounds(aabbBounds) {
     const tb1 = this.tempAABBBounds1,
       tb2 = this.tempAABBBounds2;
-    return tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), {
-      tb1: tb1,
-      tb2: tb2
-    };
+    return tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), this.tempAABBBoundsResult;
   }
 }
 
@@ -12858,7 +13461,11 @@ const result = {
 };
 class BaseRender {
   init(contributions) {
-    contributions && (this._renderContribitions = contributions.getContributions()), this._renderContribitions || (this._renderContribitions = []), this.builtinContributions || (this.builtinContributions = []), this.builtinContributions.push(defaultBaseClipRenderBeforeContribution), this.builtinContributions.push(defaultBaseClipRenderAfterContribution), this.builtinContributions.forEach(item => this._renderContribitions.push(item)), this._renderContribitions.length && (this._renderContribitions.sort((a, b) => b.order - a.order), this._beforeRenderContribitions = this._renderContribitions.filter(c => c.time === BaseRenderContributionTime.beforeFillStroke), this._afterRenderContribitions = this._renderContribitions.filter(c => c.time === BaseRenderContributionTime.afterFillStroke));
+    this.builtinContributions || (this.builtinContributions = []), this._renderContribitions = contributions ? contributions.getContributions().slice() : [];
+    const addContribution = item => {
+      this._renderContribitions.includes(item) || this._renderContribitions.push(item);
+    };
+    this.builtinContributions.forEach(addContribution), addContribution(defaultBaseClipRenderBeforeContribution), addContribution(defaultBaseClipRenderAfterContribution), this._renderContribitions.length ? (this._renderContribitions.sort((a, b) => b.order - a.order), this._beforeRenderContribitions = this._renderContribitions.filter(c => c.time === BaseRenderContributionTime.beforeFillStroke), this._afterRenderContribitions = this._renderContribitions.filter(c => c.time === BaseRenderContributionTime.afterFillStroke)) : (this._beforeRenderContribitions = [], this._afterRenderContribitions = []);
   }
   reInit() {
     this.init(this.graphicRenderContributions);
@@ -18241,6 +18848,61 @@ class AnimateComponent extends AbstractComponent {
     }
 }
 
+function commitUpdateAnimationTarget(graphic, targetAttrs, startAttrs) {
+    var _a, _b, _c, _d;
+    if (!graphic || !targetAttrs) {
+        return;
+    }
+    const committedTargetAttrs = cloneDeep(targetAttrs);
+    const transientStartAttrs = cloneDeep(startAttrs !== null && startAttrs !== void 0 ? startAttrs : graphic.attribute);
+    graphic.setAttributes(committedTargetAttrs);
+    (_b = (_a = graphic).setFinalAttributes) === null || _b === void 0 ? void 0 : _b.call(_a, committedTargetAttrs);
+    (_d = (_c = graphic).setAttributesAndPreventAnimate) === null || _d === void 0 ? void 0 : _d.call(_c, transientStartAttrs, false, {
+        type: AttributeUpdateType.ANIMATE_BIND
+    });
+}
+
+function collectTrackedAnimates(graphic, animates = [], visited = new Set()) {
+    var _a, _b, _c, _d, _e;
+    const trackedAnimates = (_c = (_b = (_a = graphic).getTrackedAnimates) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : graphic.animates;
+    trackedAnimates === null || trackedAnimates === void 0 ? void 0 : trackedAnimates.forEach((animate) => {
+        if (animate && !visited.has(animate)) {
+            visited.add(animate);
+            animates.push(animate);
+        }
+    });
+    (_e = (_d = graphic).forEachChildren) === null || _e === void 0 ? void 0 : _e.call(_d, (child) => {
+        collectTrackedAnimates(child, animates, visited);
+    });
+    return animates;
+}
+function appendExitReleaseCallback(state, callback) {
+    if (callback) {
+        state === null || state === void 0 ? void 0 : state.onComplete.push(callback);
+    }
+}
+function runExitReleaseCallbacks(callbacks) {
+    callbacks.forEach(callback => {
+        callback();
+    });
+}
+function bindExitReleaseAnimates(exitAnimates, getState, finalize) {
+    const finish = (animate) => {
+        const state = getState();
+        if (!state || state.finalized || !state.pendingAnimates.has(animate)) {
+            return;
+        }
+        state.pendingAnimates.delete(animate);
+        if (!state.pendingAnimates.size) {
+            finalize();
+        }
+    };
+    exitAnimates.forEach(animate => {
+        animate.onEnd(() => finish(animate));
+        animate.onRemove(() => finish(animate));
+    });
+}
+
 const DefaultAxisAnimation = {
     type: 'default',
     duration: 300,
@@ -18286,7 +18948,101 @@ class AxisBase extends AnimateComponent {
         this.attribute = currentAttribute;
         return offscreenGroup.AABBBounds;
     }
+    _finalizeExitRelease() {
+        var _a, _b;
+        const state = this._exitReleaseState;
+        if (state === null || state === void 0 ? void 0 : state.finalized) {
+            return;
+        }
+        if (state) {
+            state.finalized = true;
+        }
+        const parent = this.parent;
+        const removeFromParent = !!(state === null || state === void 0 ? void 0 : state.removeFromParent);
+        const callbacks = (_a = state === null || state === void 0 ? void 0 : state.onComplete) !== null && _a !== void 0 ? _a : [];
+        this._exitReleaseState = undefined;
+        this._prevInnerView = null;
+        this._innerView = null;
+        this.axisLabelsContainer = null;
+        this.axisContainer = null;
+        this.removeAllChild(true);
+        super.release(true);
+        if (removeFromParent) {
+            (_b = (parent !== null && parent !== void 0 ? parent : this.parent)) === null || _b === void 0 ? void 0 : _b.removeChild(this);
+        }
+        runExitReleaseCallbacks(callbacks);
+    }
+    _runExitAnimationBeforeRelease(options = {}) {
+        var _a, _b, _c;
+        if (this._exitReleaseState && !this._exitReleaseState.finalized) {
+            this._exitReleaseState.removeFromParent = this._exitReleaseState.removeFromParent || !!options.removeFromParent;
+            appendExitReleaseCallback(this._exitReleaseState, options.onComplete);
+            return true;
+        }
+        if (!this.stage ||
+            this.attribute.animation === false ||
+            this.attribute.animationExit === false ||
+            !this._innerView) {
+            return false;
+        }
+        this._prepare();
+        if (!((_a = this._animationConfig) === null || _a === void 0 ? void 0 : _a.exit)) {
+            return false;
+        }
+        const exitTargets = new Set();
+        traverseGroup(this._innerView, (el) => {
+            if (el.type !== 'group') {
+                exitTargets.add(el);
+            }
+        });
+        if (!exitTargets.size) {
+            return false;
+        }
+        const existingAnimates = collectTrackedAnimates(this);
+        const { delay = 0, duration = DefaultAxisAnimation.duration, easing = DefaultAxisAnimation.easing } = this._animationConfig.exit;
+        exitTargets.forEach(target => {
+            var _a, _b, _c;
+            const startAttrs = {
+                opacity: (_a = target.attribute.opacity) !== null && _a !== void 0 ? _a : 1,
+                fillOpacity: (_b = target.attribute.fillOpacity) !== null && _b !== void 0 ? _b : 1,
+                strokeOpacity: (_c = target.attribute.strokeOpacity) !== null && _c !== void 0 ? _c : 1
+            };
+            const endAttrs = {
+                opacity: 0,
+                fillOpacity: 0,
+                strokeOpacity: 0
+            };
+            commitUpdateAnimationTarget(target, endAttrs, startAttrs);
+            target.animate().wait(delay).to(endAttrs, duration, easing);
+        });
+        const animates = collectTrackedAnimates(this);
+        const exitAnimates = animates.filter(animate => !existingAnimates.includes(animate));
+        if (!exitAnimates.length) {
+            return false;
+        }
+        this.setAttribute('childrenPickable', false);
+        (_c = (_b = this._innerView).removeAllEventListeners) === null || _c === void 0 ? void 0 : _c.call(_b);
+        this.releaseStatus = 'willRelease';
+        const pendingAnimates = new Set(exitAnimates);
+        this._exitReleaseState = {
+            pendingAnimates,
+            finalized: false,
+            removeFromParent: !!options.removeFromParent,
+            onComplete: options.onComplete ? [options.onComplete] : []
+        };
+        bindExitReleaseAnimates(exitAnimates, () => this._exitReleaseState, () => this._finalizeExitRelease());
+        return true;
+    }
+    releaseWithExitAnimation(options = {}) {
+        if (this.releaseStatus === 'released') {
+            return false;
+        }
+        return this._runExitAnimationBeforeRelease(options);
+    }
     render() {
+        if (this._exitReleaseState) {
+            return;
+        }
         this._prepare();
         this._prevInnerView = this._innerView && getElMap(this._innerView);
         this.removeAllChild(true);
@@ -18642,11 +19398,10 @@ class AxisBase extends AnimateComponent {
                 var _a;
                 if (el.type !== 'group' && el.id) {
                     const oldEl = prevInnerView[el.id];
-                    el.setFinalAttributes(el.attribute);
                     if (oldEl) {
                         oldEl.release();
-                        const oldAttrs = oldEl.attribute;
-                        const finalAttrs = el.getFinalAttribute();
+                        const oldAttrs = cloneDeep(oldEl.attribute);
+                        const finalAttrs = cloneDeep(el.attribute);
                         const diffAttrs = diff(oldAttrs, finalAttrs);
                         let hasDiff = Object.keys(diffAttrs).length > 0;
                         if ('opacity' in oldAttrs && finalAttrs.opacity !== oldAttrs.opacity) {
@@ -18657,10 +19412,9 @@ class AxisBase extends AnimateComponent {
                             this._newElementAttrMap[el.id] = {
                                 state: 'update',
                                 node: el,
-                                attrs: el.attribute
+                                attrs: finalAttrs
                             };
-                            const oldAttrs = oldEl.attribute;
-                            el.setAttributes(oldAttrs);
+                            commitUpdateAnimationTarget(el, finalAttrs, oldAttrs);
                             el.applyAnimationState(['update'], [
                                 {
                                     name: 'update',
@@ -18694,8 +19448,18 @@ class AxisBase extends AnimateComponent {
             });
         }
     }
-    release() {
-        super.release();
+    release(all) {
+        if (this._exitReleaseState) {
+            this._finalizeExitRelease();
+            return;
+        }
+        if (all) {
+            this.removeAllChild(true);
+        }
+        super.release(all);
+        if (all) {
+            this.removeAllChild(true);
+        }
         this._prevInnerView = null;
         this._innerView = null;
     }
@@ -19387,7 +20151,42 @@ function commonInterpolateUpdate(key, from, to, ratio, step, target) {
   return !1;
 }
 
+const animateUpdateContext = {
+    type: AttributeUpdateType.ANIMATE_UPDATE
+  },
+  animateBindContext = {
+    type: AttributeUpdateType.ANIMATE_BIND
+  },
+  animateStartContext = {
+    type: AttributeUpdateType.ANIMATE_START
+  };
+function getAnimationContext(type) {
+  switch (type) {
+    case AttributeUpdateType.ANIMATE_UPDATE:
+      return animateUpdateContext;
+    case AttributeUpdateType.ANIMATE_BIND:
+      return animateBindContext;
+    case AttributeUpdateType.ANIMATE_START:
+      return animateStartContext;
+    default:
+      return {
+        type: type
+      };
+  }
+}
+function applyAnimationTransientAttributes(target, attributes, type = AttributeUpdateType.ANIMATE_UPDATE) {
+  var _a;
+  if (!attributes) return;
+  const context = getAnimationContext(type),
+    transientTarget = target;
+  "function" != typeof transientTarget.applyAnimationTransientAttributes ? "function" != typeof transientTarget.applyTransientAttributes ? "function" != typeof transientTarget.setAttributesAndPreventAnimate ? (transientTarget.attribute || (transientTarget.attribute = {}), Object.assign(transientTarget.attribute, attributes), null === (_a = transientTarget.onAttributeUpdate) || void 0 === _a || _a.call(transientTarget, context)) : transientTarget.setAttributesAndPreventAnimate(attributes, !1, context) : transientTarget.applyTransientAttributes(attributes, !1, context) : transientTarget.applyAnimationTransientAttributes(attributes, !1, context);
+}
+
 function noop() {}
+function includesKey$1(keys, key) {
+  for (let i = 0; i < keys.length; i++) if (keys[i] === key) return !0;
+  return !1;
+}
 class Step {
   constructor(type, props, duration, easing) {
     var _a;
@@ -19443,6 +20242,17 @@ class Step {
   onBind() {
     "glyph" === this.target.type && (this.syncAttributeUpdate = this._syncAttributeUpdate);
   }
+  runInterpolateUpdate(fromProps, toProps, ratio) {
+    if (this.animate.interpolateUpdateFunction) return void this.animate.interpolateUpdateFunction(fromProps, toProps, ratio, this, this.target);
+    const funcs = this.interpolateUpdateFunctions,
+      propKeys = this.propKeys;
+    if (funcs && propKeys) for (let index = 0; index < funcs.length; index++) {
+      const key = propKeys[index],
+        fromValue = fromProps[key],
+        toValue = toProps[key];
+      funcs[index](key, fromValue, toValue, ratio, this, this.target);
+    }
+  }
   onFirstRun() {}
   onStart() {
     if (!this._hasFirstRun) {
@@ -19457,23 +20267,49 @@ class Step {
   tryPreventConflict() {
     var _a, _b;
     const animate = this.animate,
-      target = this.target;
-    (null !== (_b = null === (_a = target.forEachTrackedAnimate) || void 0 === _a ? void 0 : _a.bind(target)) && void 0 !== _b ? _b : cb => {
-      var _a;
-      null === (_a = target.animates) || void 0 === _a || _a.forEach(cb);
-    })(a => {
+      target = this.target,
+      forEachTrackedAnimate = null !== (_b = null === (_a = target.forEachTrackedAnimate) || void 0 === _a ? void 0 : _a.bind(target)) && void 0 !== _b ? _b : cb => {
+        var _a;
+        null === (_a = target.animates) || void 0 === _a || _a.forEach(cb);
+      },
+      propKeys = this.propKeys;
+    forEachTrackedAnimate(a => {
       if (a === animate || a.priority > animate.priority || a.priority === 1 / 0) return;
       const fromProps = a.getStartProps();
-      this.propKeys.forEach(key => {
-        null != fromProps[key] && a.preventAttr(key);
-      });
+      let conflictKeys = null;
+      for (let i = 0; i < propKeys.length; i++) {
+        const key = propKeys[i];
+        null != fromProps[key] && (null != conflictKeys ? conflictKeys : conflictKeys = []).push(key);
+      }
+      conflictKeys && a.preventAttrs(conflictKeys);
     });
   }
+  removeKeysFromRecord(record, keys) {
+    if (!record) return record;
+    let hasBlockedKey = !1;
+    for (const key in record) if (Object.prototype.hasOwnProperty.call(record, key) && includesKey$1(keys, key)) {
+      hasBlockedKey = !0;
+      break;
+    }
+    if (!hasBlockedKey) return record;
+    const nextRecord = {};
+    for (const key in record) Object.prototype.hasOwnProperty.call(record, key) && !includesKey$1(keys, key) && (nextRecord[key] = record[key]);
+    return nextRecord;
+  }
   deleteSelfAttr(key) {
+    this.deleteSelfAttrs([key]);
+  }
+  deleteSelfAttrs(keys) {
     var _a;
-    delete this.props[key], this.fromProps && delete this.fromProps[key];
-    const index = this.propKeys.indexOf(key);
-    -1 !== index && (this.propKeys.splice(index, 1), null === (_a = this.interpolateUpdateFunctions) || void 0 === _a || _a.splice(index, 1));
+    if ((null == keys ? void 0 : keys.length) && (this.props = this.removeKeysFromRecord(this.props, keys), this.fromProps = this.removeKeysFromRecord(this.fromProps, keys), this.fromParsedProps = this.removeKeysFromRecord(this.fromParsedProps, keys), this.toParsedProps = this.removeKeysFromRecord(this.toParsedProps, keys), null === (_a = this.propKeys) || void 0 === _a ? void 0 : _a.length)) {
+      const funcs = this.interpolateUpdateFunctions;
+      let writeIndex = 0;
+      for (let readIndex = 0; readIndex < this.propKeys.length; readIndex++) {
+        const propKey = this.propKeys[readIndex];
+        includesKey$1(keys, propKey) || (writeIndex !== readIndex && (this.propKeys[writeIndex] = propKey, funcs && (funcs[writeIndex] = funcs[readIndex])), writeIndex++);
+      }
+      this.propKeys.length = writeIndex, funcs && (funcs.length = writeIndex);
+    }
   }
   trySyncStartProps() {
     this.propKeys.forEach(key => {
@@ -19483,11 +20319,7 @@ class Step {
   update(end, ratio, out) {
     if (this.onStart(), !this.props || !this.propKeys) return;
     const easedRatio = this.easing(ratio);
-    this.animate.interpolateUpdateFunction ? this.animate.interpolateUpdateFunction(this.fromProps, this.props, easedRatio, this, this.target) : this.interpolateUpdateFunctions.forEach((func, index) => {
-      if (!this.animate.validAttr(this.propKeys[index])) return;
-      const key = this.propKeys[index];
-      func(key, this.fromProps[key], this.props[key], easedRatio, this, this.target);
-    }), this.onUpdate(end, easedRatio, out), this.syncAttributeUpdate();
+    this.runInterpolateUpdate(this.fromProps, this.props, easedRatio), this.onUpdate(end, easedRatio, out), this.syncAttributeUpdate();
   }
   onUpdate(end, ratio, out) {}
   onEnd(cb) {
@@ -19512,7 +20344,7 @@ class WaitStep extends Step {
   onStart() {
     super.onStart();
     const fromProps = this.getFromProps();
-    this.target.setAttributes(fromProps);
+    applyAnimationTransientAttributes(this.target, fromProps, AttributeUpdateType.ANIMATE_START);
   }
   update(end, ratio, out) {
     this.onStart();
@@ -19652,19 +20484,34 @@ class FromTo extends ACustomAnimate {
     }), this.applyTransientFromAttributes();
   }
   deleteSelfAttr(key) {
-    super.deleteSelfAttr(key), delete this.from[key];
+    this.deleteSelfAttrs([key]);
+  }
+  deleteSelfAttrs(keys) {
+    super.deleteSelfAttrs(keys), this.from = this.removeKeysFromRecord(this.from, keys);
   }
   update(end, ratio, out) {
     if (this.onStart(), !this.props || !this.propKeys) return;
     const easedRatio = this.easing(ratio);
-    this.animate.interpolateUpdateFunction ? this.animate.interpolateUpdateFunction(this.from, this.props, easedRatio, this, this.target) : this.interpolateUpdateFunctions.forEach((func, index) => {
-      if (!this.animate.validAttr(this.propKeys[index])) return;
-      const key = this.propKeys[index];
-      func(key, this.from[key], this.props[key], easedRatio, this, this.target);
-    }), this.onUpdate(end, easedRatio, out), this.syncAttributeUpdate();
+    this.runInterpolateUpdate(this.from, this.props, easedRatio), this.onUpdate(end, easedRatio, out), this.syncAttributeUpdate();
   }
 }
 
+function includesKey(keys, key) {
+  for (let i = 0; i < keys.length; i++) if (keys[i] === key) return !0;
+  return !1;
+}
+function removeKeysFromRecord(record, keys) {
+  if (!record) return record;
+  let hasBlockedKey = !1;
+  for (const key in record) if (Object.prototype.hasOwnProperty.call(record, key) && includesKey(keys, key)) {
+    hasBlockedKey = !0;
+    break;
+  }
+  if (!hasBlockedKey) return record;
+  const nextRecord = {};
+  for (const key in record) Object.prototype.hasOwnProperty.call(record, key) && !includesKey(keys, key) && (nextRecord[key] = record[key]);
+  return nextRecord;
+}
 class Animate {
   constructor(id = Generator.GenAutoIncrementId(), timeline = defaultTimeline, slience) {
     this.id = id, this.status = AnimateStatus.INITIAL, this._timeline = timeline, timeline.addAnimate(this), this.slience = slience, this._startTime = 0, this._duration = 0, this._totalDuration = 0, this._loopCount = 0, this._currentLoop = 0, this._bounce = !1, this._firstStep = null, this._lastStep = null, this._startProps = {}, this._endProps = {}, this._preventAttrs = new Set(), this.currentTime = 0, this.interpolateUpdateFunction = null, this.priority = 0;
@@ -19687,8 +20534,8 @@ class Animate {
   bind(target) {
     this.target = target;
     const trackerTarget = this.target;
-    return "function" == typeof trackerTarget.trackAnimate ? trackerTarget.trackAnimate(this) : (this.target.animates || (this.target.animates = new Map()), this.target.animates.set(this.id, this)), this.onRemove(() => {
-      this.stop(), "function" == typeof trackerTarget.restoreStaticAttribute && trackerTarget.restoreStaticAttribute(), "function" == typeof trackerTarget.untrackAnimate ? trackerTarget.untrackAnimate(this.id) : this.target.animates.delete(this.id);
+    return "function" == typeof trackerTarget.detachAttributeFromBaseAttributes && trackerTarget.detachAttributeFromBaseAttributes(), "function" == typeof trackerTarget.trackAnimate ? trackerTarget.trackAnimate(this) : (this.target.animates || (this.target.animates = new Map()), this.target.animates.set(this.id, this)), this.onRemove(() => {
+      this.stop(), this.__skipRestoreStaticAttributeOnRemove || "function" != typeof trackerTarget.restoreStaticAttribute || trackerTarget.restoreStaticAttribute(), "function" == typeof trackerTarget.untrackAnimate ? trackerTarget.untrackAnimate(this.id) : this.target.animates.delete(this.id);
     }), this.target.onAnimateBind && !this.slience && this.target.onAnimateBind(this), this.target.animationAttribute || (this.target.animationAttribute = {}), this;
   }
   to(props, duration = 300, easing = "linear") {
@@ -19752,12 +20599,14 @@ class Animate {
     cb ? (this._onRemove || (this._onRemove = []), this._onRemove.push(cb)) : null === (_a = this._onRemove) || void 0 === _a || _a.forEach(cb => cb());
   }
   preventAttr(key) {
-    this._preventAttrs.add(key), delete this._startProps[key], delete this._endProps[key];
-    let step = this._firstStep;
-    for (; step;) step.deleteSelfAttr(key), step = step.next;
+    this.preventAttrs([key]);
   }
   preventAttrs(keys) {
-    keys.forEach(key => this._preventAttrs.add(key));
+    if (!(null == keys ? void 0 : keys.length)) return;
+    for (let i = 0; i < keys.length; i++) this._preventAttrs.add(keys[i]);
+    this._startProps = removeKeysFromRecord(this._startProps, keys), this._endProps = removeKeysFromRecord(this._endProps, keys);
+    let step = this._firstStep;
+    for (; step;) step.deleteSelfAttrs(keys), step = step.next;
   }
   validAttr(key) {
     return !this._preventAttrs.has(key);
@@ -19824,7 +20673,7 @@ class Animate {
     if (nextTime >= this._startTime + this._totalDuration) {
       null === (_a = this._lastStep) || void 0 === _a || _a.onUpdate(!0, 1, {}), null === (_b = this._lastStep) || void 0 === _b || _b.onEnd(), this.onEnd(), this.status = AnimateStatus.END;
       const trackerTarget = this.target;
-      return void ("function" == typeof (null == trackerTarget ? void 0 : trackerTarget.restoreStaticAttribute) && trackerTarget.restoreStaticAttribute());
+      return "function" == typeof (null == trackerTarget ? void 0 : trackerTarget.restoreStaticAttribute) && trackerTarget.restoreStaticAttribute(), void (this.__skipRestoreStaticAttributeOnRemove = !0);
     }
     this.status = AnimateStatus.RUNNING, this.currentTime <= this._startTime && this.onStart(), this.currentTime = nextTime;
     let cycleTime = nextTime - this._startTime,
@@ -19835,7 +20684,7 @@ class Animate {
       const currentLoop = Math.floor((nextTime - this._startTime) / this._duration);
       newLoop = currentLoop > this._currentLoop, this._currentLoop = currentLoop, bounceTime = this._bounce && currentLoop % 2 == 1, bounceTime && (cycleTime = this._duration - cycleTime);
     }
-    newLoop && !bounceTime && this.target.setAttributes(this._startProps);
+    newLoop && !bounceTime && applyAnimationTransientAttributes(this.target, this._startProps, AttributeUpdateType.ANIMATE_START);
     let targetStep = null;
     if (this._lastStep === this._firstStep) targetStep = this._firstStep;else {
       let currentStep = this._firstStep;
@@ -20070,6 +20919,9 @@ class AnimationTransitionRegistry {
     })), this.registerTransition("state", "*", () => ({
       allowTransition: !0,
       stopOriginalTransition: !1
+    })), this.registerTransition("state", "state", () => ({
+      allowTransition: !0,
+      stopOriginalTransition: !0
     })), this.registerTransition("state", "disappear", () => ({
       allowTransition: !0,
       stopOriginalTransition: !0
@@ -20111,7 +20963,7 @@ class AnimateExecutor {
     AnimateExecutor.builtInAnimateMap[name] = animate;
   }
   constructor(target) {
-    this._animates = [], this._startCallbacks = [], this._endCallbacks = [], this._started = !1, this._activeCount = 0, this._target = target;
+    this._animates = [], this._startCallbacks = [], this._endCallbacks = [], this._started = !1, this._activeCount = 0, this._activeConfigList = null, this._target = target;
   }
   get started() {
     return this._started;
@@ -20126,6 +20978,33 @@ class AnimateExecutor {
       cb();
     });
   }
+  getActiveAttrKeys() {
+    const keys = [];
+    for (let i = 0; i < this._animates.length; i++) {
+      const animate = this._animates[i];
+      if (animate.status === AnimateStatus.END) continue;
+      const endProps = animate.getEndProps();
+      if (endProps) for (const key in endProps) Object.prototype.hasOwnProperty.call(endProps, key) && keys.indexOf(key) < 0 && keys.push(key);
+    }
+    return keys;
+  }
+  hasActiveAttrs() {
+    for (let i = 0; i < this._animates.length; i++) {
+      const animate = this._animates[i];
+      if (animate.status === AnimateStatus.END) continue;
+      const endProps = animate.getEndProps();
+      if (endProps) for (const key in endProps) if (Object.prototype.hasOwnProperty.call(endProps, key)) return !0;
+    }
+    return !1;
+  }
+  preventAttrs(keys) {
+    if (!(null == keys ? void 0 : keys.length)) return this.hasActiveAttrs();
+    for (let i = 0; i < this._animates.length; i++) {
+      const animate = this._animates[i];
+      animate.status !== AnimateStatus.END && animate.preventAttrs(keys);
+    }
+    return this.hasActiveAttrs();
+  }
   _trackAnimation(animate) {
     this._animates.push(animate), this._activeCount++, 1 !== this._activeCount || this._started || (this._started = !0, this.onStart()), animate.onEnd(() => {
       this._activeCount--;
@@ -20193,7 +21072,15 @@ class AnimateExecutor {
     return parsedParams;
   }
   execute(params) {
-    Array.isArray(params) ? params.forEach(param => this._execute(param)) : this._execute(params);
+    if (Array.isArray(params)) {
+      const prevConfigList = this._activeConfigList;
+      this._activeConfigList = params;
+      try {
+        params.forEach(param => this._execute(param));
+      } finally {
+        this._activeConfigList = prevConfigList;
+      }
+    } else this._execute(params);
   }
   _execute(params) {
     if (params.selfOnly) return this._executeItem(params, this._target, 0, 1);
@@ -20219,6 +21106,7 @@ class AnimateExecutor {
   }
   executeTypeConfigItem(params, graphic, index, count) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
+    this.syncFinalAttrsFromContext(graphic);
     const {
         type = "fromTo",
         channel: channel,
@@ -20248,7 +21136,8 @@ class AnimateExecutor {
     let parsedFromProps = null,
       props = params.to,
       from = params.from;
-    props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), from = parsedFromProps.from), parsedFromProps.attrOutChannel && graphic.setAttributes(parsedFromProps.attrOutChannel), this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic);
+    const commitAttrOutChannel = this.shouldCommitAttrOutChannel(type);
+    props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic, commitAttrOutChannel, this.getAttrOutChannelExcludedKeys(graphic))), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic, commitAttrOutChannel, this.getAttrOutChannelExcludedKeys(graphic))), from = parsedFromProps.from), parsedFromProps.attrOutChannel && graphic.setAttributes(parsedFromProps.attrOutChannel), this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic);
     let totalDelay = 0;
     oneByOneDelay && (totalDelay = oneByOneDelay * (count - index - 1));
     const delayAfterValue = isFunction(delayAfter) ? delayAfter(null === (_h = null === (_g = graphic.context) || void 0 === _g ? void 0 : _g.data) || void 0 === _h ? void 0 : _h[0], graphic, {}) : delayAfter;
@@ -20270,6 +21159,7 @@ class AnimateExecutor {
   }
   executeTimelineItem(params, graphic, index, count) {
     var _a, _b, _c, _d;
+    this.syncFinalAttrsFromContext(graphic);
     const {
         timeSlices: timeSlices,
         startTime = 0,
@@ -20311,7 +21201,8 @@ class AnimateExecutor {
       let parsedFromProps = null,
         props = effect.to,
         from = effect.from;
-      props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), from = parsedFromProps.from), parsedFromProps.attrOutChannel && graphic.setAttributes(parsedFromProps.attrOutChannel);
+      const commitAttrOutChannel = this.shouldCommitAttrOutChannel(type);
+      props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic, commitAttrOutChannel, this.getAttrOutChannelExcludedKeys(graphic))), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic, commitAttrOutChannel, this.getAttrOutChannelExcludedKeys(graphic))), from = parsedFromProps.from), parsedFromProps.attrOutChannel && graphic.setAttributes(parsedFromProps.attrOutChannel);
       const custom = null !== (_a = effect.custom) && void 0 !== _a ? _a : AnimateExecutor.builtInAnimateMap[type],
         customType = effect.custom ? effect.customType : getCustomType(custom);
       this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic);
@@ -20325,11 +21216,14 @@ class AnimateExecutor {
       interpolator(ratio, from, to, step, target, animate.target, customParams);
     }, animate.to(props, duration, easing);
   }
+  shouldCommitAttrOutChannel(type) {
+    return "update" !== type;
+  }
   createCustomAnimation(animate, CustomAnimateConstructor, from, props, duration, easing, customParams) {
     const customAnimate = new CustomAnimateConstructor(from, props, duration, easing, customParams);
     animate.play(customAnimate);
   }
-  createPropsFromChannel(channel, graphic) {
+  createPropsFromChannel(channel, graphic, includeAttrOutChannel = !0, excludedAttrOutKeys) {
     var _a;
     const props = {};
     let from = null;
@@ -20338,7 +21232,7 @@ class AnimateExecutor {
       props: props,
       attrOutChannel: null
     };
-    const attrOutChannel = {};
+    const attrOutChannel = includeAttrOutChannel ? {} : null;
     let hasAttrs = !1;
     const diffAttrs = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.diffAttrs;
     if (Array.isArray(channel) && (channel = channel.reduce((res, key) => (void 0 === diffAttrs[key] || (res[key] = {
@@ -20347,9 +21241,10 @@ class AnimateExecutor {
       var _a, _b, _c, _d;
       const config = channel[key];
       void 0 !== config.to && ("function" == typeof config.to ? props[key] = config.to(null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0], graphic, {}) : props[key] = config.to), void 0 !== config.from && (from || (from = {}), "function" == typeof config.from ? from[key] = config.from(null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, {}) : from[key] = config.from);
-    }), diffAttrs) for (const key in diffAttrs) {
+    }), diffAttrs && attrOutChannel) for (const key in diffAttrs) {
       const value = diffAttrs[key];
-      void 0 !== value && (props.hasOwnProperty(key) || (attrOutChannel[key] = value, hasAttrs = !0));
+      if (void 0 === value) continue;
+      props.hasOwnProperty(key) || !!(null == from ? void 0 : from.hasOwnProperty(key)) || (null == excludedAttrOutKeys ? void 0 : excludedAttrOutKeys[key]) || (attrOutChannel[key] = value, hasAttrs = !0);
     }
     return {
       from: from,
@@ -20361,8 +21256,78 @@ class AnimateExecutor {
     var _a, _b;
     return void 0 === value ? defaultValue : "function" == typeof value && graphic ? value(null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0], graphic, {}) : value;
   }
+  getAttrOutChannelExcludedKeys(graphic) {
+    var _a;
+    const configList = this._activeConfigList,
+      diffAttrs = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.diffAttrs;
+    if (!configList || configList.length <= 1 || !diffAttrs) return null;
+    let excludedKeys = null;
+    for (let i = 0; i < configList.length; i++) excludedKeys = this.collectAnimatedDiffKeys(configList[i], graphic, diffAttrs, excludedKeys);
+    return excludedKeys;
+  }
+  collectAnimatedDiffKeys(config, graphic, diffAttrs, keys) {
+    if ("timeSlices" in config) {
+      const slices = Array.isArray(config.timeSlices) ? config.timeSlices : [config.timeSlices];
+      for (let i = 0; i < slices.length; i++) {
+        const effects = Array.isArray(slices[i].effects) ? slices[i].effects : [slices[i].effects];
+        for (let j = 0; j < effects.length; j++) keys = this.collectAnimatedDiffKeysFromEffect(effects[j], graphic, diffAttrs, keys);
+      }
+      return keys;
+    }
+    return this.collectAnimatedDiffKeysFromEffect(config, graphic, diffAttrs, keys);
+  }
+  collectAnimatedDiffKeysFromEffect(effect, graphic, diffAttrs, keys) {
+    var _a;
+    if ("update" === (null !== (_a = effect.type) && void 0 !== _a ? _a : "fromTo")) {
+      const options = this.resolveValue(effect.options, graphic, void 0),
+        excludeChannels = null == options ? void 0 : options.excludeChannels;
+      for (const key in diffAttrs) Object.prototype.hasOwnProperty.call(diffAttrs, key) && void 0 !== diffAttrs[key] && !this.includesChannel(excludeChannels, key) && (null != keys || (keys = {}), keys[key] = !0);
+      return keys;
+    }
+    return keys = this.collectExplicitAnimatedKeys(effect.to, diffAttrs, keys), keys = this.collectExplicitAnimatedKeys(effect.from, diffAttrs, keys), this.collectChannelAnimatedKeys(effect.channel, diffAttrs, keys);
+  }
+  collectExplicitAnimatedKeys(attrs, diffAttrs, keys) {
+    if (!attrs) return keys;
+    for (const key in attrs) Object.prototype.hasOwnProperty.call(attrs, key) && Object.prototype.hasOwnProperty.call(diffAttrs, key) && void 0 !== diffAttrs[key] && (null != keys || (keys = {}), keys[key] = !0);
+    return keys;
+  }
+  collectChannelAnimatedKeys(channel, diffAttrs, keys) {
+    if (!channel) return keys;
+    if (Array.isArray(channel)) {
+      for (let i = 0; i < channel.length; i++) {
+        const key = channel[i];
+        Object.prototype.hasOwnProperty.call(diffAttrs, key) && void 0 !== diffAttrs[key] && (null != keys || (keys = {}), keys[key] = !0);
+      }
+      return keys;
+    }
+    for (const key in channel) if (Object.prototype.hasOwnProperty.call(channel, key) && Object.prototype.hasOwnProperty.call(diffAttrs, key) && void 0 !== diffAttrs[key]) {
+      const config = channel[key];
+      void 0 === config.to && void 0 === config.from || (null != keys || (keys = {}), keys[key] = !0);
+    }
+    return keys;
+  }
+  includesChannel(channels, key) {
+    if (!(null == channels ? void 0 : channels.length)) return !1;
+    for (let i = 0; i < channels.length; i++) if (channels[i] === key) return !0;
+    return !1;
+  }
+  syncFinalAttrsFromContext(graphic) {
+    var _a;
+    const finalAttrs = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.finalAttrs,
+      setFinalAttributes = graphic.setFinalAttributes;
+    finalAttrs && "function" == typeof setFinalAttributes && setFinalAttributes.call(graphic, finalAttrs);
+  }
   executeItem(params, graphic, index = 0, count = 1) {
-    return Array.isArray(params) ? params.map(param => this._executeItem(param, graphic, index, count)).filter(Boolean) : [this._executeItem(params, graphic, index, count)].filter(Boolean);
+    if (Array.isArray(params)) {
+      const prevConfigList = this._activeConfigList;
+      this._activeConfigList = params;
+      try {
+        return params.map(param => this._executeItem(param, graphic, index, count)).filter(Boolean);
+      } finally {
+        this._activeConfigList = prevConfigList;
+      }
+    }
+    return [this._executeItem(params, graphic, index, count)].filter(Boolean);
   }
   _executeItem(params, graphic, index = 0, count = 1) {
     if (!graphic) return null;
@@ -20374,7 +21339,7 @@ class AnimateExecutor {
   stop(type, callEnd = !0) {
     for (; this._animates.length > 0;) {
       const animate = this._animates.pop();
-      !1 === callEnd && (animate.status = AnimateStatus.END), null == animate || animate.stop(type);
+      !1 === callEnd && (animate.status = AnimateStatus.END, animate.__skipRestoreStaticAttributeOnRemove = !0), null == animate || animate.stop(type);
     }
     this._animates = [], this._activeCount = 0, this._started && (this._started = !1, callEnd && this.onEnd());
   }
@@ -20425,8 +21390,22 @@ class AnimationStateManager {
   hasTrackedAnimate() {
     return this.trackedAnimates.size > 0;
   }
+  hasStateInfo(list, target) {
+    for (let i = 0; i < list.length; i++) if (list[i] === target) return !0;
+    return !1;
+  }
+  takeOverUpdateAttrs(nextState, currentStates, shouldStopState) {
+    if (nextState.state !== AnimationStates.UPDATE || !currentStates.length) return;
+    const nextKeys = nextState.executor.getActiveAttrKeys();
+    if (nextKeys.length) for (let i = 0; i < currentStates.length; i++) {
+      const currentState = currentStates[i];
+      currentState.state !== AnimationStates.UPDATE || currentState === nextState || this.hasStateInfo(shouldStopState, currentState) || currentState.executor.preventAttrs(nextKeys) || (currentState.executor.stop(null, !1), shouldStopState.push(currentState));
+    }
+  }
   applyState(nextState, animationConfig, callback) {
+    var _a;
     const registry = AnimationTransitionRegistry.getInstance(),
+      currentStateList = null !== (_a = this.stateList) && void 0 !== _a ? _a : [],
       shouldStopState = [],
       shouldApplyState = [];
     if (this.stateList && this.stateList.length ? nextState.forEach((state, index) => {
@@ -20434,14 +21413,14 @@ class AnimationStateManager {
         allowTransition: !0,
         stopOriginalTransition: !0
       };
-      this.stateList.forEach(currState => {
+      currentStateList.forEach(currState => {
         const _result = registry.isTransitionAllowed(currState.state, state, this.graphic);
         result.allowTransition = result.allowTransition && _result.allowTransition;
       }), result.allowTransition && (shouldApplyState.push({
         state: state,
         animationConfig: isArray(animationConfig[index]) ? animationConfig[index].map(item => item.animation) : animationConfig[index].animation,
         executor: new AnimateExecutor(this.graphic)
-      }), this.stateList.forEach(currState => {
+      }), currentStateList.forEach(currState => {
         registry.isTransitionAllowed(currState.state, state, this.graphic).stopOriginalTransition && shouldStopState.push(currState);
       }));
     }) : nextState.forEach((state, index) => {
@@ -20453,12 +21432,18 @@ class AnimationStateManager {
     }), shouldStopState.forEach(state => {
       state.executor.stop(null, !1);
     }), shouldApplyState.length) {
-      shouldApplyState[0].executor.execute(shouldApplyState[0].animationConfig);
+      shouldApplyState[0].executor.execute(shouldApplyState[0].animationConfig), this.takeOverUpdateAttrs(shouldApplyState[0], currentStateList, shouldStopState);
       for (let i = 0; i < shouldApplyState.length; i++) {
         const nextState = shouldApplyState[i + 1],
           currentState = shouldApplyState[i];
         currentState.executor.onEnd(() => {
-          nextState && nextState.executor.execute(nextState.animationConfig), this.stateList = this.stateList.filter(state => state !== currentState), i === shouldApplyState.length - 1 && callback && callback(!1);
+          var _a;
+          if (nextState) {
+            nextState.executor.execute(nextState.animationConfig);
+            const stoppedStates = [];
+            this.takeOverUpdateAttrs(nextState, null !== (_a = this.stateList) && void 0 !== _a ? _a : [], stoppedStates), stoppedStates.length && this.stateList && (this.stateList = this.stateList.filter(state => !this.hasStateInfo(stoppedStates, state)));
+          }
+          this.stateList = this.stateList.filter(state => state !== currentState), i === shouldApplyState.length - 1 && callback && callback(!1);
         });
       }
     } else callback && callback(!0);
@@ -20636,9 +21621,7 @@ class AnimateExtension {
     return this.initAnimateExecutor(), this._animateExecutor.execute(config), this;
   }
   executeAnimations(configs) {
-    return this.initAnimateExecutor(), configs.forEach(config => {
-      this._animateExecutor.execute(config);
-    }), this;
+    return this.initAnimateExecutor(), this._animateExecutor.execute(configs), this;
   }
   getFinalAttribute() {
     return this.finalAttribute;
@@ -20701,8 +21684,11 @@ class ComponentAnimator {
     }), this));
   }
   deleteSelfAttr(key) {
+    this.deleteSelfAttrs([key]);
+  }
+  deleteSelfAttrs(keys) {
     this.tasks.forEach(task => {
-      task.animate && task.animate.forEach(animate => animate.preventAttr(key));
+      task.animate && task.animate.forEach(animate => animate.preventAttrs(keys));
     });
   }
   stop(type) {
@@ -20807,7 +21793,9 @@ class IncreaseCount extends ACustomAnimate {
       const parts = formattedNumber.toString().split(".");
       parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","), formattedWithBasicFormat = parts.join(".");
     } else formattedWithBasicFormat = formattedNumber;
-    formattedText = this.formatTemplate ? this.formatTemplate.replace("{{var}}", formattedWithBasicFormat.toString()) : formattedWithBasicFormat, this.target.setAttribute("text", formattedText);
+    formattedText = this.formatTemplate ? this.formatTemplate.replace("{{var}}", formattedWithBasicFormat.toString()) : formattedWithBasicFormat, applyAnimationTransientAttributes(this.target, {
+      text: formattedText
+    });
   }
 }
 
@@ -20827,7 +21815,7 @@ class AxisEnter extends AComponentAnimate {
             const point = getTickCoord(oldValue);
             const newX = this.target.attribute.x;
             const newY = this.target.attribute.y;
-            this.target.setAttributes({ x: point.x, y: point.y });
+            commitUpdateAnimationTarget(this.target, { x: newX, y: newY }, { x: point.x, y: point.y });
             animator.animate(this.target, {
                 type: 'to',
                 to: { x: newX, y: newY },
@@ -20850,7 +21838,8 @@ class AxisUpdate extends AComponentAnimate {
         this._animator = animator;
         const duration = this.duration;
         const easing = this.easing;
-        const { config, diffAttrs } = this.params;
+        const { diffAttrs } = this.params;
+        commitUpdateAnimationTarget(this.target, Object.assign({}, diffAttrs));
         animator.animate(this.target, {
             type: 'to',
             to: Object.assign({}, diffAttrs),
@@ -20863,8 +21852,11 @@ class AxisUpdate extends AComponentAnimate {
         this.completeBind(animator);
     }
     deleteSelfAttr(key) {
-        super.deleteSelfAttr(key);
-        this._animator.deleteSelfAttr(key);
+        this.deleteSelfAttrs([key]);
+    }
+    deleteSelfAttrs(keys) {
+        super.deleteSelfAttrs(keys);
+        this._animator.deleteSelfAttrs(keys);
     }
     tryPreventConflict() {
         return;
@@ -21559,8 +22551,8 @@ class LineAxis extends AxisBase {
         }
         return offset;
     }
-    release() {
-        super.release();
+    release(all) {
+        super.release(all);
         this._breaks = null;
     }
 }
@@ -21897,6 +22889,7 @@ class GroupTransition extends ACustomAnimate {
         this.mode = AnimateMode.NORMAL;
     }
     onBind() {
+        this._started = false;
         const currentInnerView = this.target.getInnerView();
         const prevInnerView = this.target.getPrevInnerView();
         if (!prevInnerView) {
@@ -21915,7 +22908,7 @@ class GroupTransition extends ACustomAnimate {
                             node: el,
                             attrs: Object.assign(Object.assign({}, newProps), { opacity: (_a = newProps.opacity) !== null && _a !== void 0 ? _a : 1, fillOpacity: (_b = newProps.fillOpacity) !== null && _b !== void 0 ? _b : 1, strokeOpacity: (_c = newProps.strokeOpacity) !== null && _c !== void 0 ? _c : 1 })
                         };
-                        el.setAttributes(oldEl.attribute);
+                        commitUpdateAnimationTarget(el, this._newElementAttrMap[el.id].attrs, cloneDeep(oldEl.attribute));
                     }
                 }
                 else {
@@ -21929,7 +22922,7 @@ class GroupTransition extends ACustomAnimate {
                         node: el,
                         attrs: finalOpacityAttrs
                     };
-                    el.setAttributes({
+                    commitUpdateAnimationTarget(el, finalOpacityAttrs, {
                         opacity: 0,
                         fillOpacity: 0,
                         strokeOpacity: 0
@@ -21939,6 +22932,10 @@ class GroupTransition extends ACustomAnimate {
         });
     }
     onStart() {
+        if (this._started) {
+            return;
+        }
+        this._started = true;
         let duration = this.duration;
         let easing = this.easing;
         this._newElementAttrMap &&
@@ -23434,6 +24431,17 @@ function shiftY(texts, option) {
 }
 
 loadLabelComponent();
+function cloneAttributeSnapshot(value) {
+    if (!isObject(value) || isArray(value)) {
+        return value;
+    }
+    const snapshot = {};
+    Object.keys(value).forEach(key => {
+        const nextValue = value[key];
+        snapshot[key] = isObject(nextValue) && !isArray(nextValue) ? cloneAttributeSnapshot(nextValue) : nextValue;
+    });
+    return snapshot;
+}
 class LabelBase extends AnimateComponent {
     setBitmap(bitmap) {
         this._bitmap = bitmap;
@@ -23522,8 +24530,9 @@ class LabelBase extends AnimateComponent {
                     }, attrs, new CustomPath2D());
                 };
             }
-            if (baseMark && baseMark.getAttributes(true).fill) {
-                lineGraphic.setAttribute('stroke', baseMark.getAttributes(true).fill);
+            const baseMarkAttrs = baseMark && this.getGraphicFinalLayoutAttributes(baseMark);
+            if (baseMarkAttrs === null || baseMarkAttrs === void 0 ? void 0 : baseMarkAttrs.fill) {
+                lineGraphic.setAttribute('stroke', baseMarkAttrs.fill);
             }
             if (this.attribute.line && !isEmpty(this.attribute.line.style)) {
                 lineGraphic.setAttributes(this.attribute.line.style);
@@ -23532,7 +24541,92 @@ class LabelBase extends AnimateComponent {
             return lineGraphic;
         }
     }
+    _finalizeExitRelease() {
+        var _a, _b, _c, _d;
+        const state = this._exitReleaseState;
+        if (state === null || state === void 0 ? void 0 : state.finalized) {
+            return;
+        }
+        if (state) {
+            state.finalized = true;
+        }
+        const parent = this.parent;
+        const removeFromParent = !!(state === null || state === void 0 ? void 0 : state.removeFromParent);
+        const callbacks = (_a = state === null || state === void 0 ? void 0 : state.onComplete) !== null && _a !== void 0 ? _a : [];
+        this._exitReleaseState = undefined;
+        this._graphicToText = new Map();
+        (_b = this._idToGraphic) === null || _b === void 0 ? void 0 : _b.clear();
+        (_c = this._idToPoint) === null || _c === void 0 ? void 0 : _c.clear();
+        this._baseMarks = undefined;
+        this.removeAllChild(true);
+        super.release(true);
+        if (removeFromParent) {
+            (_d = (parent !== null && parent !== void 0 ? parent : this.parent)) === null || _d === void 0 ? void 0 : _d.removeChild(this);
+        }
+        runExitReleaseCallbacks(callbacks);
+    }
+    _runExitAnimationBeforeRelease(options = {}) {
+        var _a, _b;
+        if (this._exitReleaseState && !this._exitReleaseState.finalized) {
+            this._exitReleaseState.removeFromParent = this._exitReleaseState.removeFromParent || !!options.removeFromParent;
+            appendExitReleaseCallback(this._exitReleaseState, options.onComplete);
+            return true;
+        }
+        if (!this.stage ||
+            this.attribute.animation === false ||
+            this.attribute.animationExit === false ||
+            !((_a = this._graphicToText) === null || _a === void 0 ? void 0 : _a.size)) {
+            return false;
+        }
+        this._prepareAnimate(DefaultLabelAnimation);
+        if (!((_b = this._animationConfig) === null || _b === void 0 ? void 0 : _b.exit)) {
+            return false;
+        }
+        const exitTargets = new Set();
+        this._graphicToText.forEach(label => {
+            (label === null || label === void 0 ? void 0 : label.text) && exitTargets.add(label.text);
+            (label === null || label === void 0 ? void 0 : label.labelLine) && exitTargets.add(label.labelLine);
+        });
+        if (!exitTargets.size) {
+            return false;
+        }
+        const existingAnimates = collectTrackedAnimates(this);
+        exitTargets.forEach(target => {
+            var _a;
+            target.applyAnimationState(['exit'], [
+                {
+                    name: 'exit',
+                    animation: Object.assign(Object.assign({}, this._animationConfig.exit), { type: (_a = this._animationConfig.exit.type) !== null && _a !== void 0 ? _a : 'fadeOut', selfOnly: true })
+                }
+            ]);
+        });
+        const animates = collectTrackedAnimates(this);
+        const exitAnimates = animates.filter(animate => !existingAnimates.includes(animate));
+        if (!exitAnimates.length) {
+            return false;
+        }
+        this.setAttribute('childrenPickable', false);
+        this.releaseStatus = 'willRelease';
+        const pendingAnimates = new Set(exitAnimates);
+        this._exitReleaseState = {
+            pendingAnimates,
+            finalized: false,
+            removeFromParent: !!options.removeFromParent,
+            onComplete: options.onComplete ? [options.onComplete] : []
+        };
+        bindExitReleaseAnimates(exitAnimates, () => this._exitReleaseState, () => this._finalizeExitRelease());
+        return true;
+    }
+    releaseWithExitAnimation(options = {}) {
+        if (this.releaseStatus === 'released') {
+            return false;
+        }
+        return this._runExitAnimationBeforeRelease(options);
+    }
     render() {
+        if (this._exitReleaseState) {
+            return;
+        }
         this._prepare();
         if (isNil(this._idToGraphic) || (this._isCollectionBase && isNil(this._idToPoint))) {
             return;
@@ -23540,8 +24634,8 @@ class LabelBase extends AnimateComponent {
         const markAttributeList = [];
         if (this._enableAnimation !== false) {
             this._baseMarks.forEach(mark => {
-                markAttributeList.push(mark.attribute);
-                mark.initAttributes(mark.getAttributes(true));
+                markAttributeList.push(cloneAttributeSnapshot(mark.attribute));
+                mark.initAttributes(this.getGraphicFinalLayoutAttributes(mark));
             });
         }
         const { overlap, smartInvert, dataFilter, customLayoutFunc, customOverlapFunc } = this.attribute;
@@ -23710,6 +24804,14 @@ class LabelBase extends AnimateComponent {
     getRelatedGraphic(item) {
         return this._idToGraphic.get(item.id);
     }
+    getGraphicFinalLayoutAttributes(graphic) {
+        var _a, _b;
+        return ((_b = (_a = graphic.context) === null || _a === void 0 ? void 0 : _a.finalAttrs) !== null && _b !== void 0 ? _b : graphic.getAttributes(true));
+    }
+    hasGraphicContextFinalLayoutAttributes(graphic) {
+        var _a;
+        return !!((_a = graphic === null || graphic === void 0 ? void 0 : graphic.context) === null || _a === void 0 ? void 0 : _a.finalAttrs);
+    }
     _initText(data = []) {
         const { textStyle = {} } = this.attribute;
         const labels = [];
@@ -23719,7 +24821,7 @@ class LabelBase extends AnimateComponent {
             if (!baseMark) {
                 continue;
             }
-            const graphicAttribute = baseMark.getAttributes(true);
+            const graphicAttribute = this.getGraphicFinalLayoutAttributes(baseMark);
             const labelAttribute = Object.assign(Object.assign({ fill: this._isCollectionBase
                     ? isArray(graphicAttribute.stroke)
                         ? graphicAttribute.stroke.find(entry => !!entry && entry !== true)
@@ -23971,9 +25073,9 @@ class LabelBase extends AnimateComponent {
         var _a;
         if (graphic) {
             if (graphic.attribute.visible !== false) {
-                if ((_a = graphic.context) === null || _a === void 0 ? void 0 : _a.animationState) {
+                if (((_a = graphic.context) === null || _a === void 0 ? void 0 : _a.animationState) || this.hasGraphicContextFinalLayoutAttributes(graphic)) {
                     const clonedGraphic = graphic.clone();
-                    Object.assign(clonedGraphic.attribute, graphic.getAttributes(true));
+                    Object.assign(clonedGraphic.attribute, this.getGraphicFinalLayoutAttributes(graphic));
                     return clonedGraphic.AABBBounds;
                 }
                 return graphic.AABBBounds;
@@ -24054,6 +25156,8 @@ class LabelBase extends AnimateComponent {
     _runUpdateAnimation(prevLabel, currentLabel) {
         const { text: prevText, labelLine: prevLabelLine } = prevLabel;
         const { text: curText, labelLine: curLabelLine } = currentLabel;
+        commitUpdateAnimationTarget(prevText, curText === null || curText === void 0 ? void 0 : curText.attribute);
+        commitUpdateAnimationTarget(prevLabelLine, curLabelLine === null || curLabelLine === void 0 ? void 0 : curLabelLine.attribute);
         prevText.applyAnimationState(['update'], [
             {
                 name: 'update',
@@ -24085,7 +25189,7 @@ class LabelBase extends AnimateComponent {
         this.runEnterAnimation(text, labelLine);
     }
     _updateLabel(prevLabel, currentLabel) {
-        const { text: prevText, labelLine: prevLabelLine } = prevLabel;
+        const { labelLine: prevLabelLine } = prevLabel;
         const { text: curText, labelLine: curLabelLine } = currentLabel;
         if (this._enableAnimation === false || this._animationConfig.update === false) {
             prevLabel.text.setAttributes(curText.attribute);
@@ -24160,8 +25264,9 @@ class LabelBase extends AnimateComponent {
                 continue;
             }
             const baseMark = this.getRelatedGraphic(label.attribute);
-            let backgroundColor = baseMark.getAttributes(true).fill;
-            const backgroundOpacity = baseMark.getAttributes(true).fillOpacity;
+            const baseMarkAttrs = this.getGraphicFinalLayoutAttributes(baseMark);
+            let backgroundColor = baseMarkAttrs.fill;
+            const backgroundOpacity = baseMarkAttrs.fillOpacity;
             let foregroundColor = label.attribute.fill;
             if (isObject(backgroundColor) && backgroundColor.gradient) {
                 const firstStopColor = (_g = (_f = backgroundColor.stops) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.color;
@@ -24220,6 +25325,21 @@ class LabelBase extends AnimateComponent {
         }
         return shapeBound.encloses(textBound);
     }
+    release(all) {
+        var _a, _b;
+        if (this._exitReleaseState) {
+            this._finalizeExitRelease();
+            return;
+        }
+        if (all) {
+            this.removeAllChild(true);
+        }
+        super.release(all);
+        this._graphicToText = new Map();
+        (_a = this._idToGraphic) === null || _a === void 0 ? void 0 : _a.clear();
+        (_b = this._idToPoint) === null || _b === void 0 ? void 0 : _b.clear();
+        this._baseMarks = undefined;
+    }
     setLocation(point) {
         this.translateTo(point.x, point.y);
     }
@@ -24487,15 +25607,16 @@ class ArcLabel extends LabelBase {
         this._arcRight.clear();
         this._ellipsisWidth = ellipsisWidth;
         let maxRadius = 0;
-        currentMarks.forEach(currentMarks => {
-            if (currentMarks.attribute.outerRadius > maxRadius) {
-                maxRadius = currentMarks.attribute.outerRadius;
+        currentMarks.forEach(currentMark => {
+            const graphicAttribute = this.getGraphicFinalLayoutAttributes(currentMark);
+            if (graphicAttribute.outerRadius > maxRadius) {
+                maxRadius = graphicAttribute.outerRadius;
             }
         });
         data.forEach((d, index) => {
             var _a, _b;
             const currentMark = this._idToGraphic.get(d.id);
-            const graphicAttribute = currentMark.getAttributes(true);
+            const graphicAttribute = this.getGraphicFinalLayoutAttributes(currentMark);
             const center = { x: (_a = graphicAttribute === null || graphicAttribute === void 0 ? void 0 : graphicAttribute.x) !== null && _a !== void 0 ? _a : 0, y: (_b = graphicAttribute === null || graphicAttribute === void 0 ? void 0 : graphicAttribute.y) !== null && _b !== void 0 ? _b : 0 };
             if (!isNil(data[index]) && !isNil(textBoundsArray[index])) {
                 const item = data[index] ? data[index] : null;
@@ -24680,8 +25801,9 @@ class ArcLabel extends LabelBase {
         };
         let maxRadius = 0;
         currentMarks.forEach((currentMark) => {
-            if (currentMark.getAttributes(true).outerRadius > maxRadius) {
-                maxRadius = currentMark.getAttributes(true).outerRadius;
+            const graphicAttribute = this.getGraphicFinalLayoutAttributes(currentMark);
+            if (graphicAttribute.outerRadius > maxRadius) {
+                maxRadius = graphicAttribute.outerRadius;
             }
         });
         const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height);
@@ -24914,8 +26036,9 @@ class ArcLabel extends LabelBase {
         const labelConfig = attribute;
         let maxRadius = 0;
         currentMarks.forEach((currentMark) => {
-            if (currentMark.getAttributes(true).outerRadius > maxRadius) {
-                maxRadius = currentMark.getAttributes(true).outerRadius;
+            const graphicAttribute = this.getGraphicFinalLayoutAttributes(currentMark);
+            if (graphicAttribute.outerRadius > maxRadius) {
+                maxRadius = graphicAttribute.outerRadius;
             }
         });
         const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height);
@@ -24957,8 +26080,9 @@ class ArcLabel extends LabelBase {
         const plotRect = { width: center.x * 2, height: center.y * 2 };
         let maxRadius = 0;
         currentMarks.forEach((currentMark) => {
-            if (currentMark.getAttributes(true).outerRadius > maxRadius) {
-                maxRadius = currentMark.getAttributes(true).outerRadius;
+            const graphicAttribute = this.getGraphicFinalLayoutAttributes(currentMark);
+            if (graphicAttribute.outerRadius > maxRadius) {
+                maxRadius = graphicAttribute.outerRadius;
             }
         });
         const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height);
@@ -25029,8 +26153,9 @@ class ArcLabel extends LabelBase {
         const line1MinLength = labelConfig.line.line1MinLength;
         let maxRadius = 0;
         currentMarks.forEach((currentMark) => {
-            if (currentMark.getAttributes(true).outerRadius > maxRadius) {
-                maxRadius = currentMark.getAttributes(true).outerRadius;
+            const graphicAttribute = this.getGraphicFinalLayoutAttributes(currentMark);
+            if (graphicAttribute.outerRadius > maxRadius) {
+                maxRadius = graphicAttribute.outerRadius;
             }
         });
         const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height);
@@ -25118,7 +26243,7 @@ class ArcLabel extends LabelBase {
                 });
             }
             if (baseMark.type === 'arc3d' && baseMark) {
-                const { beta, x, y } = baseMark.getAttributes(true);
+                const { beta, x, y } = this.getGraphicFinalLayoutAttributes(baseMark);
                 lineGraphic.setAttributes({
                     beta,
                     anchor3d: [x, y]
@@ -25180,6 +26305,9 @@ class DataLabel extends AbstractComponent {
     }
     render() {
         var _a;
+        if (this._exitReleaseState) {
+            return;
+        }
         const { dataLabels, size } = this.attribute;
         if (!dataLabels || dataLabels.length === 0) {
             return;
@@ -25228,6 +26356,101 @@ class DataLabel extends AbstractComponent {
         });
         this._componentMap = currentComponentMap;
     }
+    _finalizeExitRelease() {
+        var _a, _b, _c;
+        const state = this._exitReleaseState;
+        if (state === null || state === void 0 ? void 0 : state.finalized) {
+            return;
+        }
+        if (state) {
+            state.finalized = true;
+        }
+        const parent = this.parent;
+        const removeFromParent = !!(state === null || state === void 0 ? void 0 : state.removeFromParent);
+        const callbacks = (_a = state === null || state === void 0 ? void 0 : state.onComplete) !== null && _a !== void 0 ? _a : [];
+        this._exitReleaseState = undefined;
+        (_b = this._componentMap) === null || _b === void 0 ? void 0 : _b.clear();
+        this.removeAllChild(true);
+        super.release(true);
+        if (removeFromParent) {
+            (_c = (parent !== null && parent !== void 0 ? parent : this.parent)) === null || _c === void 0 ? void 0 : _c.removeChild(this);
+        }
+        runExitReleaseCallbacks(callbacks);
+    }
+    releaseWithExitAnimation(options = {}) {
+        var _a;
+        if (this.releaseStatus === 'released') {
+            return false;
+        }
+        if (this._exitReleaseState && !this._exitReleaseState.finalized) {
+            this._exitReleaseState.removeFromParent = this._exitReleaseState.removeFromParent || !!options.removeFromParent;
+            appendExitReleaseCallback(this._exitReleaseState, options.onComplete);
+            return true;
+        }
+        if (!this.stage || !((_a = this._componentMap) === null || _a === void 0 ? void 0 : _a.size)) {
+            return false;
+        }
+        const state = {
+            pendingCount: 0,
+            finalized: false,
+            removeFromParent: !!options.removeFromParent,
+            onComplete: options.onComplete ? [options.onComplete] : []
+        };
+        const exitingComponents = [];
+        const fallbackComponents = [];
+        let initializing = true;
+        const finish = () => {
+            if (state.finalized) {
+                return;
+            }
+            state.pendingCount -= 1;
+            if (state.pendingCount <= 0 && !initializing) {
+                this._finalizeExitRelease();
+            }
+        };
+        this._exitReleaseState = state;
+        this._componentMap.forEach(component => {
+            state.pendingCount += 1;
+            const releasedWithExit = component.releaseWithExitAnimation({
+                removeFromParent: false,
+                onComplete: finish
+            });
+            if (releasedWithExit) {
+                exitingComponents.push(component);
+            }
+            else {
+                state.pendingCount -= 1;
+                fallbackComponents.push(component);
+            }
+        });
+        if (!exitingComponents.length) {
+            this._exitReleaseState = undefined;
+            return false;
+        }
+        fallbackComponents.forEach(component => {
+            component.release(true);
+            this.removeChild(component);
+        });
+        this.setAttribute('childrenPickable', false);
+        this.releaseStatus = 'willRelease';
+        initializing = false;
+        if (state.pendingCount <= 0) {
+            this._finalizeExitRelease();
+        }
+        return true;
+    }
+    release(all) {
+        var _a;
+        if (this._exitReleaseState) {
+            this._finalizeExitRelease();
+            return;
+        }
+        if (all) {
+            this.removeAllChild(true);
+        }
+        super.release(all);
+        (_a = this._componentMap) === null || _a === void 0 ? void 0 : _a.clear();
+    }
     setLocation(point) {
         this.translateTo(point.x, point.y);
     }
@@ -26937,15 +28160,95 @@ class Marker extends AbstractComponent {
             y: clipInRange ? -((_b = limitRect.y) !== null && _b !== void 0 ? _b : 0) : 0
         });
     }
-    render() {
+    _finalizeExitRelease() {
+        var _a, _b;
+        const state = this._exitReleaseState;
+        if (state === null || state === void 0 ? void 0 : state.finalized) {
+            return;
+        }
+        if (state) {
+            state.finalized = true;
+        }
+        const parent = this.parent;
+        const removeFromParent = !!(state === null || state === void 0 ? void 0 : state.removeFromParent);
+        const releaseSelf = !!(state === null || state === void 0 ? void 0 : state.releaseSelf);
+        const callbacks = (_a = state === null || state === void 0 ? void 0 : state.onComplete) !== null && _a !== void 0 ? _a : [];
+        this._exitReleaseState = undefined;
+        this._releaseEvent();
+        this._container = null;
+        this._containerClip = null;
+        this.removeAllChild(true);
+        if (releaseSelf) {
+            super.release(true);
+            if (removeFromParent) {
+                (_b = (parent !== null && parent !== void 0 ? parent : this.parent)) === null || _b === void 0 ? void 0 : _b.removeChild(this);
+            }
+        }
+        runExitReleaseCallbacks(callbacks);
+    }
+    _runExitAnimationBeforeCleanup(options = {}) {
         var _a;
+        const releaseSelf = !!options.releaseSelf;
+        if (this._exitReleaseState && !this._exitReleaseState.finalized) {
+            this._exitReleaseState.releaseSelf = this._exitReleaseState.releaseSelf || releaseSelf;
+            this._exitReleaseState.removeFromParent = this._exitReleaseState.removeFromParent || !!options.removeFromParent;
+            appendExitReleaseCallback(this._exitReleaseState, options.onComplete);
+            return true;
+        }
+        if (!this.stage ||
+            this.attribute.animation === false ||
+            this.attribute.animationExit === false ||
+            !this._container) {
+            return false;
+        }
+        this.transAnimationConfig();
+        if (!((_a = this._animationConfig) === null || _a === void 0 ? void 0 : _a.exit)) {
+            return false;
+        }
+        const existingAnimates = collectTrackedAnimates(this);
+        this.markerAnimate('exit');
+        const animates = collectTrackedAnimates(this);
+        const exitAnimates = animates.filter(animate => !existingAnimates.includes(animate));
+        if (!exitAnimates.length) {
+            return false;
+        }
+        this._releaseEvent();
+        this.setAttribute('childrenPickable', false);
+        if (releaseSelf) {
+            this.releaseStatus = 'willRelease';
+        }
+        const pendingAnimates = new Set(exitAnimates);
+        this._exitReleaseState = {
+            pendingAnimates,
+            finalized: false,
+            releaseSelf,
+            removeFromParent: !!options.removeFromParent,
+            onComplete: options.onComplete ? [options.onComplete] : []
+        };
+        bindExitReleaseAnimates(exitAnimates, () => this._exitReleaseState, () => this._finalizeExitRelease());
+        return true;
+    }
+    releaseWithExitAnimation(options = {}) {
+        if (this.releaseStatus === 'released') {
+            return false;
+        }
+        return this._runExitAnimationBeforeCleanup(Object.assign(Object.assign({}, options), { releaseSelf: true }));
+    }
+    render() {
+        var _a, _b;
+        if ((_a = this._exitReleaseState) === null || _a === void 0 ? void 0 : _a.releaseSelf) {
+            return;
+        }
         this.transAnimationConfig();
         this.setAttribute('pickable', false);
-        const markerVisible = (_a = this.attribute.visible) !== null && _a !== void 0 ? _a : true;
+        const markerVisible = (_b = this.attribute.visible) !== null && _b !== void 0 ? _b : true;
         if (this.attribute.interactive === false) {
             this.setAttribute('childrenPickable', false);
         }
         if (markerVisible && this.isValidPoints()) {
+            if (this._exitReleaseState) {
+                this._finalizeExitRelease();
+            }
             if (!this._container) {
                 this._initContainer();
                 this.initMarker(this._container);
@@ -26958,18 +28261,30 @@ class Marker extends AbstractComponent {
             }
         }
         else {
-            this.markerAnimate('exit');
-            this._container = null;
-            this.removeAllChild(true);
+            if (!this._runExitAnimationBeforeCleanup()) {
+                this._container = null;
+                this._containerClip = null;
+                this.removeAllChild(true);
+            }
         }
         this._releaseEvent();
         this._bindEvent();
     }
-    release() {
-        this.markerAnimate('exit');
-        super.release();
+    release(all) {
+        if (this._exitReleaseState) {
+            this._finalizeExitRelease();
+            return;
+        }
+        if (this.attribute.animation !== false && this.attribute.animationExit !== false) {
+            this.markerAnimate('exit');
+        }
+        if (all) {
+            this.removeAllChild(true);
+        }
+        super.release(all);
         this._releaseEvent();
         this._container = null;
+        this._containerClip = null;
     }
 }
 
@@ -26981,7 +28296,10 @@ function graphicFadeIn(graphic, delay, duration, easing) {
     (_a = graphic === null || graphic === void 0 ? void 0 : graphic.animates) === null || _a === void 0 ? void 0 : _a.forEach(a => a.stop('end'));
     const fillOpacityConfig = (_c = (_b = graphic.attribute) === null || _b === void 0 ? void 0 : _b.fillOpacity) !== null && _c !== void 0 ? _c : 1;
     const strokeOpacityConfig = (_e = (_d = graphic.attribute) === null || _d === void 0 ? void 0 : _d.strokeOpacity) !== null && _e !== void 0 ? _e : 1;
-    graphic.setAttributes({
+    commitUpdateAnimationTarget(graphic, {
+        fillOpacity: fillOpacityConfig,
+        strokeOpacity: strokeOpacityConfig
+    }, {
         fillOpacity: 0,
         strokeOpacity: 0
     });
@@ -27011,7 +28329,10 @@ function graphicFadeOut(graphic, delay, duration, easing) {
     if (!graphic) {
         return;
     }
-    graphic.setAttributes({
+    commitUpdateAnimationTarget(graphic, {
+        fillOpacity: 0,
+        strokeOpacity: 0
+    }, {
         fillOpacity: (_b = (_a = graphic.attribute) === null || _a === void 0 ? void 0 : _a.fillOpacity) !== null && _b !== void 0 ? _b : 1,
         strokeOpacity: (_d = (_c = graphic.attribute) === null || _c === void 0 ? void 0 : _c.strokeOpacity) !== null && _d !== void 0 ? _d : 1
     });
@@ -27040,7 +28361,7 @@ function commonLineClipIn(line, label, duration, delay, easing) {
     const endSymbolDuration = 0.1 * duration;
     const labelDuration = 0.1 * duration;
     graphicFadeIn(line.startSymbol, delay, startSymbolDuration, easing);
-    line.lines.forEach(line => line.setAttribute('clipRange', 0));
+    line.lines.forEach(line => commitUpdateAnimationTarget(line, { clipRange: 1 }, { clipRange: 0 }));
     line.lines.forEach((l, index) => {
         const stepDuration = lineDuration / line.lines.length;
         l.animate()
@@ -27123,7 +28444,7 @@ function pointCallIn(itemLine, decorativeLine, item, duration, delay, easing) {
     const endSymbolDuration = 0.1 * duration;
     const labelDuration = 0.1 * duration;
     graphicFadeIn(itemLine.startSymbol, delay, startSymbolDuration, easing);
-    itemLine.lines.forEach(line => line.setAttribute('clipRange', 0));
+    itemLine.lines.forEach(line => commitUpdateAnimationTarget(line, { clipRange: 1 }, { clipRange: 0 }));
     itemLine.lines.forEach((l, index) => {
         const stepDuration = lineDuration / itemLine.lines.length;
         l.animate()
@@ -29470,8 +30791,10 @@ class DiscreteLegend extends LegendBase {
             ? this.attribute.item.width
             : innerGroupWidth + parsedPadding[1] + parsedPadding[3];
         const itemGroupHeight = this._itemHeightByUser || innerGroupHeight + parsedPadding[0] + parsedPadding[2];
-        itemGroup.attribute.width = itemGroupWidth;
-        itemGroup.attribute.height = itemGroupHeight;
+        itemGroup.setAttributes({
+            width: itemGroupWidth,
+            height: itemGroupHeight
+        });
         focusShape && focusShape.setAttribute('visible', false);
         innerGroup.translateTo(-innerGroupBounds.x1 + parsedPadding[3], -innerGroupBounds.y1 + parsedPadding[0]);
         return itemGroup;
@@ -29622,9 +30945,9 @@ class DiscreteLegend extends LegendBase {
             }
             if (!this._itemContext.isScrollbar) {
                 if (animation) {
-                    this._itemsContainer
-                        .animate()
-                        .to({ [channel]: -(newPage - 1) * pageSize }, animationDuration, animationEasing);
+                    const attrs = { [channel]: -(newPage - 1) * pageSize };
+                    commitUpdateAnimationTarget(this._itemsContainer, attrs);
+                    this._itemsContainer.animate().to(attrs, animationDuration, animationEasing);
                 }
                 else {
                     this._itemsContainer.setAttribute(channel, -(newPage - 1) * pageSize);
@@ -29642,7 +30965,9 @@ class DiscreteLegend extends LegendBase {
                 const startOffset = containerSize * start;
                 this.updateScrollMask();
                 if (animation) {
-                    this._itemsContainer.animate().to({ [channel]: -startOffset }, animationDuration, animationEasing);
+                    const attrs = { [channel]: -startOffset };
+                    commitUpdateAnimationTarget(this._itemsContainer, attrs);
+                    this._itemsContainer.animate().to(attrs, animationDuration, animationEasing);
                 }
                 else {
                     this._itemsContainer.setAttribute(channel, -startOffset);
@@ -31455,9 +32780,11 @@ class Title extends AbstractComponent {
                 totalHeight = maxHeight;
             }
         }
-        group.attribute.width = totalWidth;
-        group.attribute.height = totalHeight;
-        group.attribute.boundsPadding = parsedPadding;
+        group.setAttributes({
+            width: totalWidth,
+            height: totalHeight,
+            boundsPadding: parsedPadding
+        });
         if (this._mainTitle) {
             if (isValid(align) || isValid(textStyle.align)) {
                 const mainTitleAlign = textStyle.align ? textStyle.align : align;
@@ -33595,6 +34922,7 @@ class Timeline extends AbstractComponent {
         setActive(symbolGroup, activeSymbolStyle);
     }
     appearAnimate(animateConfig) {
+        var _a;
         const { duration = 1000, easing = 'quadOut' } = animateConfig;
         const { activeLabelStyle, activeSymbolStyle } = this.attribute;
         const percent = duration / 1000;
@@ -33605,30 +34933,33 @@ class Timeline extends AbstractComponent {
         const symbolDelay = percent * 100;
         const symbolNormalDelay = percent * 600;
         if (this._line) {
-            this._line.setAttributes({ clipRange: 0 });
+            commitUpdateAnimationTarget(this._line, { clipRange: 1 }, { clipRange: 0 });
             this._line.animate().to({ clipRange: 1 }, lineDuration, easing);
         }
         if (this._activeLine) {
-            this._activeLine.setAttributes({ opacity: 0 });
+            const opacity = (_a = this._activeLine.attribute.opacity) !== null && _a !== void 0 ? _a : 1;
+            commitUpdateAnimationTarget(this._activeLine, { opacity }, { opacity: 0 });
             this._activeLine
                 .animate()
                 .wait(500)
-                .to({ opacity: 1 }, activeLineDuration, easing);
+                .to({ opacity }, activeLineDuration, easing);
         }
         if (this._symbolGroup) {
             const size = this._symbolGroup.count - 1;
             const delay = percent * (size === 1 ? 0 : (500 - 100) / (size - 1));
             const delayNormal = percent * (size === 1 ? 0 : (400 - 160) / (size - 1));
             this._symbolGroup.forEachChildren((symbol, i) => {
+                var _a;
                 const originAttrs = {};
                 Object.keys(activeSymbolStyle).forEach(k => {
                     originAttrs[k] = symbol.attribute[k];
                 });
-                symbol.setAttributes({ opacity: 0 });
+                const opacity = (_a = symbol.attribute.opacity) !== null && _a !== void 0 ? _a : 1;
+                commitUpdateAnimationTarget(symbol, { opacity }, { opacity: 0 });
                 symbol
                     .animate()
                     .wait(symbolDelay + delay * i)
-                    .to({ opacity: 1 }, perSymbolDuration, easing);
+                    .to({ opacity }, perSymbolDuration, easing);
                 symbol
                     .animate()
                     .wait(symbolNormalDelay + delayNormal * i)
@@ -33641,15 +34972,17 @@ class Timeline extends AbstractComponent {
             const delay = percent * (size === 1 ? 0 : (500 - 100) / (size - 1));
             const delayNormal = percent * (size === 1 ? 0 : (400 - 160) / (size - 1));
             this._labelGroup.forEachChildren((label, i) => {
+                var _a;
                 const originAttrs = {};
                 Object.keys(activeLabelStyle).forEach(k => {
                     originAttrs[k] = label.attribute[k];
                 });
-                label.setAttributes({ opacity: 0 });
+                const opacity = (_a = label.attribute.opacity) !== null && _a !== void 0 ? _a : 1;
+                commitUpdateAnimationTarget(label, { opacity }, { opacity: 0 });
                 label
                     .animate()
                     .wait(symbolDelay + delay * i)
-                    .to({ opacity: 1 }, perSymbolDuration, easing);
+                    .to({ opacity }, perSymbolDuration, easing);
                 label
                     .animate()
                     .wait(symbolNormalDelay + delayNormal * i)
@@ -33689,6 +35022,7 @@ class Timeline extends AbstractComponent {
         const nextClipRange = flag > 0 ? this._timesPercent[i] || 1 : this._timesPercent[i - 1] || 0;
         if (animation) {
             const { duration = 1000, easing = 'quadOut' } = animateConfig;
+            commitUpdateAnimationTarget(this, { clipRange: nextClipRange }, { clipRange });
             this.animate().to({ clipRange: nextClipRange }, duration, easing);
         }
         else {
@@ -35535,6 +36869,6 @@ TableSeriesNumber.defaultAttributes = {
     select: true
 };
 
-const version = "1.1.0-alpha.2";
+const version = "1.1.0-alpha.21";
 
 export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IDataZoomEvent, IDataZoomInteractiveEvent, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PolygonSectorCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SeriesNumberCellStateValue, SeriesNumberEvent, SizeContinuousLegend, Slider, StoryLabelItem, Switch, SymbolLabel, TableSeriesNumber, Tag, Timeline, Title, Tooltip, TopZIndex, VTag, WeatherBox, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getAxisBreakSymbolAttrs, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, hasOverlap, htmlAttributeTransform, initTextMeasure, installPoptipToApp, installScrollbarToApp, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, loadScrollbar, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, textIntersect, ticks, traverseGroup, version };