qidao123.com ToB IT社区-企服评测·应用市场»论坛 › 软件与程序人生 › 移动端开发 › 鸿蒙 › 鸿蒙NEXT开发动画案例10

鸿蒙NEXT开发动画案例10

[复制链接]
发表于 2025-5-31 05:48:35 | 显示全部楼层 |阅读模式
 1.创建空白项目


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


  1. interface TranslateOffset {
  2.   x?:number
  3.   y?:number
  4. }
  5. /**
  6. * SpinKit动画组件 - SpinTen
  7. * author: CSDN-鸿蒙布道师
  8. * since: 2025/05/16
  9. */
  10. @ComponentV2
  11. export struct SpinTen {
  12.   @Require @Param spinSize: number = 36;
  13.   @Require @Param spinColor: ResourceColor;
  15.   @Local scaleSize: number = this.spinSize * 0.75;
  16.   @Local tran1: number = 0;
  17.   private oldSize: number = this.spinSize;
  19.   aboutToAppear(): void {
  20.     this.oldSize = this.spinSize;
  21.     this.scaleSize = this.spinSize * 0.75;
  22.   }
  24.   build() {
  25.     Stack() {
  26.       Grid() {
  27.         // 使用循环构建9个 GridItem
  28.         ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8], (index: number) => {
  29.           GridItem() {
  30.             Canvas()
  31.               .chunkStyle()
  32.           }
  33.           .translate(this.getTranslateOffset(index))
  34.         })
  35.       }
  36.       .rowsTemplate('1fr 1fr 1fr')
  37.       .columnsTemplate('1fr 1fr 1fr')
  38.       .width(this.scaleSize)
  39.       .height(this.scaleSize)
  40.     }
  41.     .width(this.oldSize)
  42.     .height(this.oldSize)
  43.     .alignContent(Alignment.Center)
  44.     .onAppear(() => {
  45.       this.startAnimation();
  46.     })
  47.   }
  49.   // 抽取 translate 偏移量计算逻辑
  50.   getTranslateOffset(index: number): TranslateOffset {
  51.     switch (index) {
  52.       case 0: return { x: this.tran1 };
  53.       case 1: return { x: this.tran1 };
  54.       case 2: return { y: this.tran1 };
  55.       case 3: return { y: -this.tran1 };
  56.       case 4: return {}; // 中间项无偏移
  57.       case 5: return { y: this.tran1 };
  58.       case 6: return { y: -this.tran1 };
  59.       case 7: return { x: -this.tran1 };
  60.       case 8: return { x: -this.tran1 };
  61.       default: return {};
  62.     }
  63.   }
  65.   // 启动 Keyframe 动画
  66.   startAnimation(): void {
  67.     this.getUIContext().keyframeAnimateTo({ iterations: -1, delay: 0 }, [
  68.       {
  69.         duration: 500,
  70.         curve: Curve.EaseInOut,
  71.         event: () => {
  72.           this.tran1 = 0;
  73.           this.scaleSize = this.oldSize * 1.1;
  74.         }
  75.       },
  76.       {
  77.         duration: 190,
  78.         curve: Curve.Linear,
  79.         event: () => {
  80.           this.tran1 = this.oldSize / 3;
  81.         }
  82.       },
  83.       {
  84.         duration: 0,
  85.         curve: Curve.Linear,
  86.         event: () => {
  87.           this.tran1 = 0;
  88.         }
  89.       },
  90.       {
  91.         duration: 10,
  92.         curve: Curve.Linear,
  93.         event: () => {}
  94.       },
  95.       {
  96.         duration: 500,
  97.         curve: Curve.EaseIn,
  98.         event: () => {
  99.           this.scaleSize = this.oldSize * 0.75;
  100.           this.tran1 = 0;
  101.         }
  102.       }
  103.     ]);
  104.   }
  106.   @Styles
  107.   chunkStyle() {
  108.     .width(this.oldSize * 0.25)
  109.     .height(this.oldSize * 0.25)
  110.     .backgroundColor(this.spinColor)
  111.     .shadow(ShadowStyle.OUTER_DEFAULT_XS)
  112.   }
  113. }
复制代码
  1. <strong>代码如下：</strong>
复制代码
  1. interface TranslateOffset {
  2.   x?:number
  3.   y?:number
  4. }
  5. /**
  6. * SpinKit动画组件 - SpinTen
  7. * author: CSDN-鸿蒙布道师
  8. * since: 2025/05/16
  9. */
  10. @ComponentV2
  11. export struct SpinTen {
  12.   @Require @Param spinSize: number = 36;
  13.   @Require @Param spinColor: ResourceColor;
  15.   @Local scaleSize: number = this.spinSize * 0.75;
  16.   @Local tran1: number = 0;
  17.   private oldSize: number = this.spinSize;
  19.   aboutToAppear(): void {
  20.     this.oldSize = this.spinSize;
  21.     this.scaleSize = this.spinSize * 0.75;
  22.   }
  24.   build() {
  25.     Stack() {
  26.       Grid() {
  27.         // 使用循环构建9个 GridItem
  28.         ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8], (index: number) => {
  29.           GridItem() {
  30.             Canvas()
  31.               .chunkStyle()
  32.           }
  33.           .translate(this.getTranslateOffset(index))
  34.         })
  35.       }
  36.       .rowsTemplate('1fr 1fr 1fr')
  37.       .columnsTemplate('1fr 1fr 1fr')
  38.       .width(this.scaleSize)
  39.       .height(this.scaleSize)
  40.     }
  41.     .width(this.oldSize)
  42.     .height(this.oldSize)
  43.     .alignContent(Alignment.Center)
  44.     .onAppear(() => {
  45.       this.startAnimation();
  46.     })
  47.   }
  49.   // 抽取 translate 偏移量计算逻辑
  50.   getTranslateOffset(index: number): TranslateOffset {
  51.     switch (index) {
  52.       case 0: return { x: this.tran1 };
  53.       case 1: return { x: this.tran1 };
  54.       case 2: return { y: this.tran1 };
  55.       case 3: return { y: -this.tran1 };
  56.       case 4: return {}; // 中间项无偏移
  57.       case 5: return { y: this.tran1 };
  58.       case 6: return { y: -this.tran1 };
  59.       case 7: return { x: -this.tran1 };
  60.       case 8: return { x: -this.tran1 };
  61.       default: return {};
  62.     }
  63.   }
  65.   // 启动 Keyframe 动画
  66.   startAnimation(): void {
  67.     this.getUIContext().keyframeAnimateTo({ iterations: -1, delay: 0 }, [
  68.       {
  69.         duration: 500,
  70.         curve: Curve.EaseInOut,
  71.         event: () => {
  72.           this.tran1 = 0;
  73.           this.scaleSize = this.oldSize * 1.1;
  74.         }
  75.       },
  76.       {
  77.         duration: 190,
  78.         curve: Curve.Linear,
  79.         event: () => {
  80.           this.tran1 = this.oldSize / 3;
  81.         }
  82.       },
  83.       {
  84.         duration: 0,
  85.         curve: Curve.Linear,
  86.         event: () => {
  87.           this.tran1 = 0;
  88.         }
  89.       },
  90.       {
  91.         duration: 10,
  92.         curve: Curve.Linear,
  93.         event: () => {}
  94.       },
  95.       {
  96.         duration: 500,
  97.         curve: Curve.EaseIn,
  98.         event: () => {
  99.           this.scaleSize = this.oldSize * 0.75;
  100.           this.tran1 = 0;
  101.         }
  102.       }
  103.     ]);
  104.   }
  106.   @Styles
  107.   chunkStyle() {
  108.     .width(this.oldSize * 0.25)
  109.     .height(this.oldSize * 0.25)
  110.     .backgroundColor(this.spinColor)
  111.     .shadow(ShadowStyle.OUTER_DEFAULT_XS)
  112.   }
  113. }
复制代码
3.修改Index.ets文件，代码如下：
  1. import { SpinTen } from './Spin';
  3. @Entry
  4. @Component
  5. struct Index {
  6.   @State message: string = 'Hello World';
  8.   build() {
  9.     Column() {
  10.       SpinTen({
  11.         spinSize: 60,
  12.         spinColor: '#FF0000'
  13.       })
  14.     }
  15.     .alignItems(HorizontalAlign.Center)
  16.     .justifyContent(FlexAlign.Center)
  17.     .height('100%')
  18.     .width('100%')
  19.   }
  20. }
复制代码
  1. <strong>代码如下：</strong>
复制代码
  1. import { SpinTen } from './Spin';
  3. @Entry
  4. @Component
  5. struct Index {
  6.   @State message: string = 'Hello World';
  8.   build() {
  9.     Column() {
  10.       SpinTen({
  11.         spinSize: 60,
  12.         spinColor: '#FF0000'
  13.       })
  14.     }
  15.     .alignItems(HorizontalAlign.Center)
  16.     .justifyContent(FlexAlign.Center)
  17.     .height('100%')
  18.     .width('100%')
  19.   }
  20. }
复制代码
4.运行项目，登录华为账号，需举行署名

5.动画结果如下：

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表

杀鸡焉用牛刀
+ 我要发帖

登录后关闭弹窗

登录参与点评抽奖  加入IT实名职场社区
去登录
快速回复 返回顶部 返回列表