鸿蒙 HarmonyOS 动画使用总结_鸿蒙动画-CSDN博客

✍️作者简介：小北编程（专注于HarmonyOS、Android、Java、Web、TCP/IP等技术方向）
🐳博客主页：开源中国、稀土掘金、51cto博客、博客园、知乎、简书、慕课网、CSDN
🔔如果文章对您有一定的帮助请👉关注✨、点赞👍、收藏📂、评论💬。
🔥如需转载请参考【转载须知】

一、文字动画

1.文字闪烁动画

请添加图片描述

1.创建：Constants.ts
export class Constants {
  static readonly FULL_PARENT: string = '100%';
  static readonly BLINK_DURATION: number = 500; // 动画持续时间为0.5秒
}

2.使用动画
 @State columnOpacity: number = 1;

  startBlinkAnimation(): void {
    setInterval(() => {
      this.columnOpacity = this.columnOpacity === 1 ? 0 : 1; // 在0和1之间切换透明度
    }, Constants.BLINK_DURATION);
  }
  
  build() {
    Column() {
      Text("AI-ERP")
        .fontColor('#999999')
        .fontSize('40')
        .fontWeight(FontWeight.Bold)
        .opacity(this.columnOpacity)
        .onAppear(() => {
          this.startBlinkAnimation();
        })
    }.justifyContent(FlexAlign.Center)
  }
}

1.文字变暗

请添加图片描述
因无法捕捉一次的效果，增加了循环，可以参考上面设置一直闪烁
this.columnOpacity = this.columnOpacity === 1 ? 0.5 : 1;

示例：一次闪烁的效果

1.创建：Constants.ts
export class Constants {
  static readonly FULL_PARENT: string = '100%';
  static readonly SKELETON_ANIMATION: { duration: number; fill: string } = {
    duration: 2000, // 设置时长
    fill: 'forwards',
  };
}

2.使用动画
  @State columnOpacity: number = 1;
  
    startAnimation(): void {
    animateTo(Constants.SKELETON_ANIMATION, () => {
      this.columnOpacity = 0.5;
    });
  }
  
  @Builder
  baseSkeletonView() {
    Column() {
      Text("AI-ERP")
        .fontColor('#999999')
        .fontSize('40')
        .fontWeight(FontWeight.Bold)
        .opacity(this.columnOpacity)
        .onAppear(() => {
          this.startAnimation();
        })
    }.justifyContent(FlexAlign.Center)
  }