windows平台下，代码创建Animation浏览器可用，模拟器失败

Creator 3.x
#1

  • Creator 版本： 3.8.3

  • 目标平台： Windows模拟器预览失效，但web浏览正常

  • 重现方式：
    我写了一个FadeIn的类，用代码来创建过渡效果，代码如下

// fadeIn.ts
import { animation, Animation, AnimationClip, Node, UIOpacity } from "cc";

interface Options {
  duration: number;
}

function resolveOptions(options?: Partial<Options>) {
  return {
    duration: options?.duration !== undefined
      ? options?.duration / 1000
      : 1,
  };
}

export class FadeIn {
  #uiOpacity: UIOpacity;

  #animation: Animation;

  #clip: AnimationClip;

  #track: animation.RealTrack;

  #options: Options;

  constructor(node: Node, options?: Partial<Options>) {
    this.#options = resolveOptions(options);
    this.#uiOpacity = node.getComponent(UIOpacity);
    this.#animation = node.addComponent(Animation);

    this.#clip = new AnimationClip(FadeIn.name);
    this.#clip.duration = this.#options.duration;

    this.#track = new animation.RealTrack();

    this.#track.channel.curve.addKeyFrame(0, 0);
    this.#track.channel.curve.addKeyFrame(this.#options.duration, 255);

    this.#track.path.toComponent(UIOpacity);
    this.#track.path.toProperty('opacity');

    this.#clip.addTrack(this.#track);
    this.#animation.addClip(this.#clip);
  }

  play = () => new Promise<void>((resolve) => {
    this.#animation.play(FadeIn.name);
    this.#animation.on(Animation.EventType.FINISHED, resolve);
  });
}

然后在script中使用这个类，web浏览正常，模拟器浏览失败

  async start() {
    const fadeIn = new FadeIn(find('Canvas/Advice'), { duration: 1000 });
    const fadeOut = new FadeOut(find('Canvas/Advice'), { duration: 1000 });

    await fadeIn.play();
    await delay(1000);
    await fadeOut.play();
  }

  • 首个报错： 无报错，动画直接失效

  • 之前哪个版本是正常的： 无

  • 手机型号： 无

  • 手机浏览器： 无

  • 编辑器操作系统：Windows

  • 重现概率：100%

#2

找到问题了。。。光写 this.#clip = new AnimationClip(FadeIn.name); 只能在web下生效。要在windows下生效得在addClip函数中指定clip的名字。。。

这样写就有用了 this.#animation.addClip(this.#clip, FadeOut.name); :sweat:

1赞