HarmonyOS鸿蒙Next中播放lottie动画，连续播放的时候为啥不连续，会出现空白

尊敬的开发者您好！

动画播放过程中出现闪烁现象，由于存在lottie动画切换，怀疑是动画切换导致的闪烁问题。通过修改代码，使得上锁过程一次播放一个动画，可以发现并无闪烁现象，因此需要继续分析动画切换为何导致闪烁，主要排查以下方面：

1. 动画切换时的资源加载和销毁。lottie从2.0.15版本开始，lottie动画的Canvas渲染模式每次只能加载一个动画，加载新动画时会自动清理旧动画资源，动画资源加载和清理有可能会导致动画播放的间隔；
2. 动画加载和播放的时机。lottie动画分为加载和播放两个阶段，如果切换第二个动画时才进行动画加载，也可能导致动画播放的间隔。

【分析结论】

1. lottie2.0.15动画的Canvas渲染模式每次只能加载一个动画，动画切换时，会清理动画资源后再加载播放第二个动画，导致动画播放出现间隔；
2. 两个动画依次进行加载并播放，动画切换时，动画加载耗时导致动画播放出现间隔。

【修改建议】

• lottie版本降低至2.0.14或更早版本（不推荐）；
• 多Canvas分层架构，即一个lottie动画使用一个Canvas加载（推荐方案）。
  1. 使用一个Canvas加载一个lottie动画，避免动画切换时进行资源清理；
  2. 在Canvas的onready中并行加载两个动画，在第一个动画播放完成后再启动第二个动画播放，避免动画切换时加载动画耗时。

针对问题代码，修改示例如下。经验证，修改后动画切换时无闪烁问题。

import lottie, { AnimationItem } from '@ohos/lottie';

@Entry
@Component
struct Index {
  private startSettings: RenderingContextSettings = new RenderingContextSettings(true);
  private startRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.startSettings);
  private loadSettings: RenderingContextSettings = new RenderingContextSettings(true);
  private loadRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.loadSettings);
  private timerId: number;
  private directionFlag: boolean;
  animateItemStart: AnimationItem = {} as AnimationItem
  animateItemEnd: AnimationItem = {} as AnimationItem
  @State isStopMove: boolean = false
  @State isStatic: boolean = true // 中间的锁开关是否是静态图
  @State isConvas: boolean = false;

  loadStartAnimation(mPath?: string, mName?: string, isLoop: boolean = false, afterPlayCallback?: (() => void) | null,
    completeCallback?: (() => void) | null) {
    this.animateItemStart = lottie.loadAnimation({
      container: this.startRenderingContext,
      renderer: 'Canvas',
      frameRate: 60, // 设置animator的刷帧率为30
      loop: isLoop,
      autoplay: false,
      name: mName,
      path: mPath,
    });
    this.animateItemStart.addEventListener('DOMLoaded', () => {
      this.animateItemStart.play()
      if (afterPlayCallback) {
        afterPlayCallback()
      }
    })
    this.animateItemStart.addEventListener('complete', () => {
      if (completeCallback) {
        completeCallback()
      }
    })
  }

  loadLoadAnimation(mPath?: string, mName?: string, isLoop: boolean = false, afterPlayCallback?: (() => void) | null,
    completeCallback?: (() => void) | null) {
    this.animateItemEnd = lottie.loadAnimation({
      container: this.loadRenderingContext,
      renderer: 'Canvas',
      frameRate: 60, // 设置animator的刷帧率为30
      loop: isLoop,
      autoplay: false,
      name: mName,
      path: mPath,
    });
    this.animateItemEnd.addEventListener('DOMLoaded', () => {
      if (afterPlayCallback) {
        afterPlayCallback()
      }
    })
    this.animateItemEnd.addEventListener('complete', () => {
      if (completeCallback) {
        completeCallback()
      }
    })
  }
  onChangeRight() {}
  onChangeLeft() {}
  build() {
    Stack() {
      Canvas(this.loadRenderingContext)
        .width(60)
        .height(60)
        .borderRadius(40)
        .backgroundColor($r('app.color.color_F7F7F7'))
        .onReady(() => {
          // 抗锯齿的设置
          this.loadRenderingContext.imageSmoothingEnabled = true;
          this.loadRenderingContext.imageSmoothingQuality = 'medium'
          this.loadLoadAnimation("common/lottie/loading.json", 'loading', false, () => {
            clearTimeout(this.timerId)
            // 请求接口，成功了回复静态图
            this.timerId = setTimeout(() => {
              this.isConvas = false
              this.isStopMove = false
              this.isStatic = true
              if (this.directionFlag) {
                this.onChangeRight()
              } else {
                this.onChangeLeft()
              }
            }, 2000)
          })
        })
        .visibility(this.isStatic ? Visibility.None : Visibility.Visible)
        .onDisAppear(() => {
          // 组件移除时，可销毁动画资源
          lottie.destroy('loading');
        })
      Canvas(this.startRenderingContext)
        .width(60)
        .height(60)
        .borderRadius(40)
        .backgroundColor($r('app.color.color_F7F7F7'))
        .onReady(() => {
          // 抗锯齿的设置
          this.startRenderingContext.imageSmoothingEnabled = true;
          this.startRenderingContext.imageSmoothingQuality = 'medium'
          this.loadStartAnimation('common/lottie/data.json', 'start', false, () => {
            this.isStopMove = true
          }, () => {
            this.isStatic = false;
            this.isConvas = true;
            this.animateItemEnd.play();
          })
        })
        .visibility((!this.isStatic && !this.isConvas) ? Visibility.Visible : Visibility.None)
        .onDisAppear(() => {
          // 组件移除时，可销毁动画资源
          lottie.destroy('start');
        })
      Image($r('app.media.home_clock_static'))
        .width(60)
        .aspectRatio(1)
        .height(60)
        .borderRadius(40)
        .visibility(this.isStatic ? Visibility.Visible : Visibility.Hidden)
    }
  }
}