鸿蒙NEXT开发动画案例5

1.创建空白项目

2.Page文件夹下面新建Spin.ets文件,代码如下:

复制代码
/**
 * TODO SpinKit动画组件 - Pulse 脉冲动画
 * author: CSDN—鸿蒙布道师
 * since: 2024/05/09
 */
@ComponentV2
export struct SpinFive {
  // 参数定义
  @Require @Param spinSize: number = 48;
  @Require @Param spinColor: ResourceColor = '#209ED8';

  // 局部状态
  @Local scale1: number = 1;
  @Local opacity1: number = 1;

  build() {
    Canvas()
      .width(this.spinSize)
      .height(this.spinSize)
      .borderRadius(this.spinSize)
      .backgroundColor(this.spinColor)
      .renderFit(RenderFit.CENTER)
      .scale({ x: this.scale1, y: this.scale1 })
      .opacity(this.opacity1)
      .onAppear(() => {
        this.startAnimation();
      })
  }

  /**
   * 启动无限循环的关键帧动画
   */
  private startAnimation(): void {
    const uiContext = this.getUIContext();
    if (!uiContext) return;

    const keyframes: Array<KeyframeState> = [
      {
        duration: 0,
        curve: Curve.EaseInOut,
        event: (): void => {
          this.scale1 = 0;
          this.opacity1 = 1;
        },
      },
      {
        duration: 1000,
        curve: Curve.EaseInOut,
        event: (): void => {
          this.scale1 = 1.0;
          this.opacity1 = 0.01;
        },
      }
    ];

    uiContext.keyframeAnimateTo(
      { iterations: -1, delay: 0 },
      keyframes
    );
  }
}
复制代码
代码如下:
TypeScript 复制代码
/**
 * TODO SpinKit动画组件 - Pulse 脉冲动画
 * author: CSDN---鸿蒙布道师
 * since: 2024/05/09
 */
@ComponentV2
export struct SpinFive {
  // 参数定义
  @Require @Param spinSize: number = 48;
  @Require @Param spinColor: ResourceColor = '#209ED8';

  // 局部状态
  @Local scale1: number = 1;
  @Local opacity1: number = 1;

  build() {
    Canvas()
      .width(this.spinSize)
      .height(this.spinSize)
      .borderRadius(this.spinSize)
      .backgroundColor(this.spinColor)
      .renderFit(RenderFit.CENTER)
      .scale({ x: this.scale1, y: this.scale1 })
      .opacity(this.opacity1)
      .onAppear(() => {
        this.startAnimation();
      })
  }

  /**
   * 启动无限循环的关键帧动画
   */
  private startAnimation(): void {
    const uiContext = this.getUIContext();
    if (!uiContext) return;

    const keyframes: Array<KeyframeState> = [
      {
        duration: 0,
        curve: Curve.EaseInOut,
        event: (): void => {
          this.scale1 = 0;
          this.opacity1 = 1;
        },
      },
      {
        duration: 1000,
        curve: Curve.EaseInOut,
        event: (): void => {
          this.scale1 = 1.0;
          this.opacity1 = 0.01;
        },
      }
    ];

    uiContext.keyframeAnimateTo(
      { iterations: -1, delay: 0 },
      keyframes
    );
  }
}

3.修改Index.ets文件,代码如下:

复制代码
import { SpinFive } from './Spin';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column() {
      SpinFive({
        spinSize: 60,
        spinColor: '#FF0000'
      })
    }
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}

代码如下:
TypeScript 复制代码
import { SpinFive } from './Spin';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column() {
      SpinFive({
        spinSize: 60,
        spinColor: '#FF0000'
      })
    }
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}

4.运行项目,登录华为账号,需进行签名

5.动画效果如下:

相关推荐
懒人村杂货铺8 小时前
Android BLE 扫描完整实战
android
光锥智能9 小时前
小平板元年,华为MatePad Mini创出一片蓝海
华为·电脑
祥睿夫子9 小时前
零基础搞定 ArkTS 类与对象!保姆级教程:定义→创建→测试全流程 + 代码示例
harmonyos
TeleostNaCl10 小时前
如何安装 Google 通用的驱动以便使用 ADB 和 Fastboot 调试(Bootloader)设备
android·经验分享·adb·android studio·android-studio·android runtime
白玉cfc11 小时前
【iOS】push,pop和present,dismiss
macos·ios·cocoa
fatiaozhang952711 小时前
中国移动浪潮云电脑CD1000-系统全分区备份包-可瑞芯微工具刷机-可救砖
android·网络·电脑·电视盒子·刷机固件·机顶盒刷机
程序员潘Sir11 小时前
HarmonyOS实现快递APP自动识别地址
harmonyos·鸿蒙
萌虎不虎11 小时前
【鸿蒙(openHarmony)自定义音频播放器的开发使用说明】
华为·音视频·harmonyos
李洋-蛟龙腾飞公司11 小时前
HarmonyOSAI编程万能卡片生成(一)
华为·ai编程·harmonyos