鸿蒙NEXT开发动画案例13

 1.创建空白项目


2.Page文件夹下面新建Spin.ets文件，代码如下：

/**
 * TODO SpinKit动画组件 - 使用缩放效果的十二点旋转加载动画
 * author: CSDN-鸿蒙布道师
 * since: 2025/05/23
 */
@ComponentV2
export struct SpinThirteen{
  @Require @Param spinSize: number = 36; // 整体尺寸
  @Require @Param spinColor: ResourceColor; // 圆点颜色
  @Require @Param dotCount: number = 12; // 圆点数量，默认为12

  // 每个圆点大小
  @Local roundSize: number = this.spinSize * 0.15;

  // 每个圆点的缩放比例数组
  @Local scales: number[] = Array(this.dotCount).fill(0);

  aboutToAppear(): void {
    this.roundSize = this.spinSize * 0.15;
  }

  build() {
    Stack() {
      ForEach(range(0, this.dotCount), (index: number) => {
        Column() {
          Canvas()
            .width(this.roundSize)
            .height(this.roundSize)
            .borderRadius(this.roundSize)
            .backgroundColor(this.spinColor)
            .shadow(ShadowStyle.OUTER_DEFAULT_XS)
            .scale({ x: this.scales[index], y: this.scales[index], z: 1 })
        }
        .width(this.roundSize)
        .height('100%')
        .rotate({ angle: index * (360 / this.dotCount) })
      });
    }
    .renderFit(RenderFit.CENTER)
    .width(this.spinSize)
    .height(this.spinSize)
    .onAppear(() => {
      this.startAnimations();
    });
  }

  private startAnimations() {
    const totalDuration = 1200; // 总动画周期时间
    const delayStep = Math.floor(totalDuration / this.dotCount); // 自动计算延迟步长

    for (let i = 0; i < this.dotCount; i++) {
      const delay = -(i * delayStep); // 使用负数延迟制造交错效果

      const keyframes: KeyframeState[] = [
        {
          duration: 480,
          curve: Curve.Linear,
          event: () => {
            this.scales[i] = 1;
          }
        },
        {
          duration: 480,
          curve: Curve.Linear,
          event: () => {
            this.scales[i] = 0;
          }
        },
        {
          duration: 240,
          curve: Curve.Linear,
          event: () => {} // 空操作
        }
      ];

      this.getUIContext().keyframeAnimateTo(
        { iterations: -1, delay: delay }, // -1 表示无限循环
        keyframes
      );
    }
  }
}

// 辅助函数：生成 [start, end) 的整数数组
function range(start: number, end: number): number[] {
  const result: number[] = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
}

代码如下：

/**
 * TODO SpinKit动画组件 - 使用缩放效果的十二点旋转加载动画
 * author: CSDN-鸿蒙布道师
 * since: 2025/05/23
 */
@ComponentV2
export struct SpinThirteen{
  @Require @Param spinSize: number = 36; // 整体尺寸
  @Require @Param spinColor: ResourceColor; // 圆点颜色
  @Require @Param dotCount: number = 12; // 圆点数量，默认为12

  // 每个圆点大小
  @Local roundSize: number = this.spinSize * 0.15;

  // 每个圆点的缩放比例数组
  @Local scales: number[] = Array(this.dotCount).fill(0);

  aboutToAppear(): void {
    this.roundSize = this.spinSize * 0.15;
  }

  build() {
    Stack() {
      ForEach(range(0, this.dotCount), (index: number) => {
        Column() {
          Canvas()
            .width(this.roundSize)
            .height(this.roundSize)
            .borderRadius(this.roundSize)
            .backgroundColor(this.spinColor)
            .shadow(ShadowStyle.OUTER_DEFAULT_XS)
            .scale({ x: this.scales[index], y: this.scales[index], z: 1 })
        }
        .width(this.roundSize)
        .height('100%')
        .rotate({ angle: index * (360 / this.dotCount) })
      });
    }
    .renderFit(RenderFit.CENTER)
    .width(this.spinSize)
    .height(this.spinSize)
    .onAppear(() => {
      this.startAnimations();
    });
  }

  private startAnimations() {
    const totalDuration = 1200; // 总动画周期时间
    const delayStep = Math.floor(totalDuration / this.dotCount); // 自动计算延迟步长

    for (let i = 0; i < this.dotCount; i++) {
      const delay = -(i * delayStep); // 使用负数延迟制造交错效果

      const keyframes: KeyframeState[] = [
        {
          duration: 480,
          curve: Curve.Linear,
          event: () => {
            this.scales[i] = 1;
          }
        },
        {
          duration: 480,
          curve: Curve.Linear,
          event: () => {
            this.scales[i] = 0;
          }
        },
        {
          duration: 240,
          curve: Curve.Linear,
          event: () => {} // 空操作
        }
      ];

      this.getUIContext().keyframeAnimateTo(
        { iterations: -1, delay: delay }, // -1 表示无限循环
        keyframes
      );
    }
  }
}

// 辅助函数：生成 [start, end) 的整数数组
function range(start: number, end: number): number[] {
  const result: number[] = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
}

3.修改Index.ets文件，代码如下：

import { SpinThirteen } from './Spin';

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

  build() {
    Column() {
      SpinThirteen({
        spinSize: 100, // 设置动画组件大小
        spinColor: '#FF0000', // 设置动画组件颜色
        dotCount: 12
      })
    }
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}

代码如下：

import { SpinThirteen } from './Spin';

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

  build() {
    Column() {
      SpinThirteen({
        spinSize: 100, // 设置动画组件大小
        spinColor: '#FF0000', // 设置动画组件颜色
        dotCount: 12
      })
    }
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}

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

5.动画效果如下：