Fix animate property is not effect when reference changed

e2e/case/animator-referenceAndProperty.ts

@@ -0,0 +1,121 @@
+/**
+ * @title Animation Reference And Property
+ * @category Animation
+ */
+
+import {
+  AnimationClip,
+  AnimationColorCurve,
+  AnimationFloatCurve,
+  AnimationRefCurve,
+  Animator,
+  AnimatorController,
+  AnimatorControllerLayer,
+  BlinnPhongMaterial,
+  Camera,
+  Color,
+  DirectLight,
+  Keyframe,
+  Logger,
+  Material,
+  MeshRenderer,
+  PBRMaterial,
+  PrimitiveMesh,
+  RenderFace,
+  Transform,
+  Vector3,
+  WebGLEngine
+} from "@galacean/engine";
+import { OrbitControl } from "@galacean/engine-toolkit";
+import { initScreenshot, updateForE2E } from "./.mockForE2E";
+
+Logger.enable();
+WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
+  engine.canvas.resizeByClientSize(2);
+  const scene = engine.sceneManager.activeScene;
+  const rootEntity = scene.createRootEntity();
+
+  // camera
+  const cameraEntity = rootEntity.createChild("camera_node");
+  cameraEntity.transform.position = new Vector3(0, 1, 5);
+  const camera = cameraEntity.addComponent(Camera);
+  cameraEntity.addComponent(OrbitControl).target = new Vector3(0, 1, 0);
+
+  const lightNode = rootEntity.createChild("light_node");
+  lightNode.addComponent(DirectLight).intensity = 0.6;
+  lightNode.transform.lookAt(new Vector3(0, 0, 1));
+  lightNode.transform.rotate(new Vector3(0, 90, 0));
+
+  const material = new BlinnPhongMaterial(engine);
+  material.renderFace = RenderFace.Double;
+  material.baseColor = new Color(1, 0, 0, 1);
+
+  const material2 = new PBRMaterial(engine);
+  material2.renderFace = RenderFace.Double;
+  material2.baseColor = new Color(0, 1, 0, 1);
+
+  const entity = rootEntity.createChild("mesh");
+  const { transform } = entity;
+  transform.setPosition(0, 1, 0);
+  transform.setRotation(0, 0, 0);
+  const meshRenderer = entity.addComponent(MeshRenderer);
+  meshRenderer.mesh = PrimitiveMesh.createCuboid(engine);
+  meshRenderer.setMaterial(material);
+
+  const animator = entity.addComponent(Animator);
+  const controller = new AnimatorController(engine);
+  const layer = new AnimatorControllerLayer("base");
+  controller.addLayer(layer);
+  const stateMachine = layer.stateMachine;
+  const cubeState = stateMachine.addState("material");
+  const cubeClip = (cubeState.clip = new AnimationClip("material"));
+
+  const materialCurve = new AnimationRefCurve();
+  const key1 = new Keyframe<Material>();
+  key1.time = 0;
+  key1.value = material;
+  const key2 = new Keyframe<Material>();
+  key2.time = 1;
+  key2.value = material2;
+  const key3 = new Keyframe<Material>();
+  key3.time = 2;
+  key3.value = material;
+  materialCurve.addKey(key1);
+  materialCurve.addKey(key2);
+  materialCurve.addKey(key3);
+
+  const colorCurve = new AnimationColorCurve();
+  const key6 = new Keyframe<Color>();
+  key6.time = 0;
+  key6.value = new Color(1, 0, 0, 1);
+  const key7 = new Keyframe<Color>();
+  key7.time = 1;
+  key7.value = new Color(0.5, 0.5, 0.5, 1);
+  const key8 = new Keyframe<Color>();
+  key8.time = 2;
+  key8.value = new Color(1, 0, 0, 1);
+  colorCurve.addKey(key6);
+  colorCurve.addKey(key7);
+  colorCurve.addKey(key8);
+
+  const rotateCurve = new AnimationFloatCurve();
+  const key9 = new Keyframe<number>();
+  key9.time = 0;
+  key9.value = 0;
+  const key10 = new Keyframe<number>();
+  key10.time = 2;
+  key10.value = 360;
+  rotateCurve.addKey(key9);
+  rotateCurve.addKey(key10);
+
+  cubeClip.addCurveBinding("", MeshRenderer, "getMaterial().baseColor", colorCurve);
+  cubeClip.addCurveBinding("", MeshRenderer, "setMaterial($value)", "getMaterial()", materialCurve);
+  cubeClip.addCurveBinding("", Transform, "rotation.y", rotateCurve);
+  animator.animatorController = controller;
+  animator.play("material");
+  animator.speed = 0.5;
+
+  updateForE2E(engine, 130);
+
+  initScreenshot(engine, camera);
+});

e2e/config.ts

@@ -69,6 +69,11 @@ export const E2E_CONFIG = {
       category: "Animator",
       caseFileName: "animator-stateMachine",
       threshold: 0.1
+    },
+    referenceAndProperty: {
+      category: "Animator",
+      caseFileName: "animator-referenceAndProperty",
+      threshold: 0.1
     }
   },
   GLTF: {

packages/core/src/animation/AnimationClip.ts

@@ -6,12 +6,15 @@ import { AnimationClipCurveBinding } from "./AnimationClipCurveBinding";
 import { AnimationCurve } from "./animationCurve/AnimationCurve";
 import { AnimationEvent } from "./AnimationEvent";
 import { AnimationCurveOwner } from "./internal/animationCurveOwner/AnimationCurveOwner";
+import { AnimationPropertyReferenceManager } from "./internal/AnimationPropertyReferenceManager";
 import { KeyframeValueType } from "./Keyframe";
 
 /**
  * Stores keyframe based animations.
  */
 export class AnimationClip extends EngineObject {
+  private static _tempReferenceManager: AnimationPropertyReferenceManager;
+
   /** @internal */
   _curveBindings: AnimationClipCurveBinding[] = [];
 
@@ -193,7 +196,20 @@ export class AnimationClip extends EngineObject {
     }
 
     this._length = Math.max(this._length, curveBinding.curve.length);
-    this._curveBindings.push(curveBinding);
+
+    const curveBindings = this._curveBindings;
+    const count = curveBindings.length;
+    const propertyPathLength = curveBinding.property.split(".").length;
+    curveBinding._pathLength = propertyPathLength;
+
+    const maxPropertyPathLength = count ? curveBindings[count - 1]._pathLength : 0;
+    if (propertyPathLength > maxPropertyPathLength) {
+      curveBindings.push(curveBinding);
+    } else {
+      let index = count;
+      while (--index >= 0 && propertyPathLength < curveBindings[index]._pathLength);
+      curveBindings.splice(index + 1, 0, curveBinding);
+    }
   }
 
   /**
@@ -211,6 +227,12 @@ export class AnimationClip extends EngineObject {
    * @param time - The time to sample an animation
    */
   _sampleAnimation(entity: Entity, time: number): void {
+    if (!AnimationClip._tempReferenceManager) {
+      AnimationClip._tempReferenceManager = new AnimationPropertyReferenceManager();
+    }
+
+    AnimationClip._tempReferenceManager.clear();
+
     const { _curveBindings: curveBindings } = this;
     for (let i = curveBindings.length - 1; i >= 0; i--) {
       const curve = curveBindings[i];
@@ -223,7 +245,7 @@ export class AnimationClip extends EngineObject {
         if (!component) {
           continue;
         }
-        const curveOwner = curve._getTempCurveOwner(targetEntity, component);
+        const curveOwner = curve._getTempCurveOwner(AnimationClip._tempReferenceManager, targetEntity, component);
         if (curveOwner && curve.curve.keys.length) {
           const value = curveOwner.evaluateValue(curve.curve, time, false);
           curveOwner.applyValue(value, 1, false);

packages/core/src/animation/AnimationClipCurveBinding.ts

@@ -4,6 +4,7 @@ import { KeyframeValueType } from "./Keyframe";
 import { AnimationCurve } from "./animationCurve";
 import { IAnimationCurveCalculator } from "./animationCurve/interfaces/IAnimationCurveCalculator";
 import { AnimationCurveLayerOwner } from "./internal/AnimationCurveLayerOwner";
+import { AnimationPropertyReferenceManager } from "./internal/AnimationPropertyReferenceManager";
 import { AnimationCurveOwner } from "./internal/animationCurveOwner/AnimationCurveOwner";
 
 /**
@@ -33,14 +34,28 @@ export class AnimationClipCurveBinding {
   /** The animation curve. */
   curve: AnimationCurve<KeyframeValueType>;
 
+  /** @internal */
+  _pathLength: number;
   private _tempCurveOwner: Record<number, AnimationCurveOwner<KeyframeValueType>> = {};
 
   /**
    * @internal
    */
-  _createCurveOwner(entity: Entity, component: Component): AnimationCurveOwner<KeyframeValueType> {
+  _createCurveOwner(
+    referenceManager: AnimationPropertyReferenceManager,
+    entity: Entity,
+    component: Component
+  ): AnimationCurveOwner<KeyframeValueType> {
     const curveType = (<unknown>this.curve.constructor) as IAnimationCurveCalculator<KeyframeValueType>;
-    const owner = new AnimationCurveOwner(entity, this.type, component, this.property, this.getProperty, curveType);
+    const owner = new AnimationCurveOwner(
+      referenceManager,
+      entity,
+      this.type,
+      component,
+      this.property,
+      this.getProperty,
+      curveType
+    );
     curveType._initializeOwner(owner);
     owner.saveDefaultValue();
     return owner;
@@ -62,10 +77,14 @@ export class AnimationClipCurveBinding {
   /**
    * @internal
    */
-  _getTempCurveOwner(entity: Entity, component: Component): AnimationCurveOwner<KeyframeValueType> {
+  _getTempCurveOwner(
+    referenceManager: AnimationPropertyReferenceManager,
+    entity: Entity,
+    component: Component
+  ): AnimationCurveOwner<KeyframeValueType> {
     const { instanceId } = entity;
     if (!this._tempCurveOwner[instanceId]) {
-      this._tempCurveOwner[instanceId] = this._createCurveOwner(entity, component);
+      this._tempCurveOwner[instanceId] = this._createCurveOwner(referenceManager, entity, component);
     }
     return this._tempCurveOwner[instanceId];
   }