Animation timing not working as expected

I’m having some trouble animating a set of meshes. Here’s my code:

  public async setColour(position: Position, hex: Hex, duration: number = 5) {
    this.log(`Setting mat ${position} to colour ${hex}`);
    const colour = Color4.FromColor3(Color3.FromHexString(hex));
    let totalFrames = duration * FPS;
    let animationPromises: Array<any> = [];
    // Iterate through all mat frame elements
    for (let i in this.mats[position]) {
      const changeEmissive = new Animation(
        'CHANGE_MAT_EMISSIVE_COLOUR',
        'material.emissiveColor',
        FPS,
        Animation.ANIMATIONTYPE_COLOR3,
        Animation.ANIMATIONLOOPMODE_RELATIVE
      );
      changeEmissive.setKeys([{ frame: totalFrames, value: colour }]);
      const changeDiffuse = new Animation(
        'CHANGE_MAT_DIFFUSE_COLOUR',
        'material.diffuseColor',
        FPS,
        Animation.ANIMATIONTYPE_COLOR3,
        Animation.ANIMATIONLOOPMODE_RELATIVE
      );
      changeDiffuse.setKeys([{ frame: totalFrames, value: colour }]);
      this.mats[position]![i].animations.push(
        changeDiffuse,
        changeEmissive
      );
      animationPromises.push(
        this._scene.beginAnimation(this.mats[position]![i], 0, totalFrames, false, FPS).waitAsync()
      );
    }
    return Promise.all(animationPromises);
  }

The above should run for 5 seconds, changing the value on my meshes then finish with the promise. It seems like the animation is kicking in instantly, the colour is set right away.

I don’t think I’ve used it incorrectly. I want it to tween the meshes previous colour to the newly set one in for the duration I’ve specified.

scratches head

I think you should provide a repro in the PG as it may be difficult to help with only an excerpt of the code.

1 Like