鸿蒙NEXT开发动画案例2

水军大提督  论坛元老 | 2025-5-9 00:13:42 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1729|帖子 1729|积分 5187

1.创建空缺项目


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


  1. // ===== 接口定义（必须放在使用前）=====
  2. /**
  3. * 关键帧动画整体配置参数
  4. */
  5. interface KeyframeAnimationConfig {
  6.   iterations: number;
  7.   delay: number;
  8. }
  10. /**
  11. * 单个关键帧动画项
  12. */
  13. interface KeyframeItem {
  14.   duration: number;
  15.   curve: Curve;
  16.   event: () => void;
  17. }
  19. /**
  20. * 动画状态更新参数
  21. */
  22. interface AnimationUpdateParams {
  23.   scale1?: number;
  24.   scale2?: number;
  25. }
  26. // ===== 接口定义结束 =====
  28. /**
  29. * SpinKit 风格的弹性缩放加载动画组件。
  30. *
  31. * @component
  32. * @param spinSize - 动画容器大小（必须为正数）
  33. * @param spinColor - 动画颜色（支持资源引用）
  34. *
  35. * 示例：
  36. * ```ets
  37. * SpinTwo({
  38. *   spinSize: 60,
  39. *   spinColor: '#FF0000'
  40. * })
  41. * ```
  42. */
  43. @ComponentV2
  44. export struct SpinTwo {
  45.   // 参数定义（父组件必须传入）
  46.   @Require @Param spinSize: number = 48;
  47.   @Require @Param spinColor: ResourceColor = '#209ED8';
  49.   // 局部状态
  50.   @Local scale1: number = 0;
  51.   @Local scale2: number = 1;
  53.   // 常量定义
  54.   private readonly ANIMATION_DURATION: number = 1000;
  56.   build() {
  57.     Stack() {
  58.       Canvas()
  59.         .scale({ x: this.scale1, y: this.scale1 })
  60.         .bounceStyle()
  62.       Canvas()
  63.         .scale({ x: this.scale2, y: this.scale2 })
  64.         .bounceStyle()
  65.     }
  66.     .width(this.spinSize)
  67.     .height(this.spinSize)
  68.     .onAppear(() => {
  69.       this.startAnimation();
  70.     });
  71.   }
  73.   /**
  74.    * 启动无限循环的关键帧动画
  75.    */
  76.   private startAnimation(): void {
  77.     const uiContext = this.getUIContext();
  78.     if (!uiContext) return;
  80.     const animationConfig: KeyframeAnimationConfig = {
  81.       iterations: -1,
  82.       delay: 0
  83.     };
  85.     uiContext.keyframeAnimateTo(animationConfig, [
  86.       this.createKeyframe(this.ANIMATION_DURATION, { scale1: 1, scale2: 0 }),
  87.       this.createKeyframe(this.ANIMATION_DURATION, { scale1: 0, scale2: 1 })
  88.     ]);
  89.   }
  91.   /**
  92.    * 创建关键帧动画配置项
  93.    * @param duration - 动画持续时间
  94.    * @param update - 更新的状态对象
  95.    */
  96.   private createKeyframe(
  97.     duration: number,
  98.     update: AnimationUpdateParams
  99.   ): KeyframeItem {
  100.     return {
  101.       duration,
  102.       curve: Curve.EaseInOut,
  103.       event: () => {
  104.         if (update.scale1 !== undefined) this.scale1 = update.scale1;
  105.         if (update.scale2 !== undefined) this.scale2 = update.scale2;
  106.       }
  107.     };
  108.   }
  110.   /**
  111.    * 公共样式封装
  112.    */
  113.   @Styles
  114.   bounceStyle() {
  115.     .width('100%')
  116.     .height('100%')
  117.     .opacity(0.6)
  118.     .borderRadius(this.spinSize / 2) // 圆形效果
  119.     .backgroundColor(this.spinColor)
  120.   }
  121. }
复制代码
  1. <strong>代码如下：</strong>
复制代码
  1. // ===== 接口定义（必须放在使用前）=====
  2. /**
  3. * 关键帧动画整体配置参数
  4. */
  5. interface KeyframeAnimationConfig {
  6.   iterations: number;
  7.   delay: number;
  8. }
  10. /**
  11. * 单个关键帧动画项
  12. */
  13. interface KeyframeItem {
  14.   duration: number;
  15.   curve: Curve;
  16.   event: () => void;
  17. }
  19. /**
  20. * 动画状态更新参数
  21. */
  22. interface AnimationUpdateParams {
  23.   scale1?: number;
  24.   scale2?: number;
  25. }
  26. // ===== 接口定义结束 =====
  28. /**
  29. * SpinKit 风格的弹性缩放加载动画组件。
  30. *
  31. * @component
  32. * @param spinSize - 动画容器大小（必须为正数）
  33. * @param spinColor - 动画颜色（支持资源引用）
  34. *
  35. * 示例：
  36. * ```ets
  37. * SpinTwo({
  38. *   spinSize: 60,
  39. *   spinColor: '#FF0000'
  40. * })
  41. * ```
  42. */
  43. @ComponentV2
  44. export struct SpinTwo {
  45.   // 参数定义（父组件必须传入）
  46.   @Require @Param spinSize: number = 48;
  47.   @Require @Param spinColor: ResourceColor = '#209ED8';
  49.   // 局部状态
  50.   @Local scale1: number = 0;
  51.   @Local scale2: number = 1;
  53.   // 常量定义
  54.   private readonly ANIMATION_DURATION: number = 1000;
  56.   build() {
  57.     Stack() {
  58.       Canvas()
  59.         .scale({ x: this.scale1, y: this.scale1 })
  60.         .bounceStyle()
  62.       Canvas()
  63.         .scale({ x: this.scale2, y: this.scale2 })
  64.         .bounceStyle()
  65.     }
  66.     .width(this.spinSize)
  67.     .height(this.spinSize)
  68.     .onAppear(() => {
  69.       this.startAnimation();
  70.     });
  71.   }
  73.   /**
  74.    * 启动无限循环的关键帧动画
  75.    */
  76.   private startAnimation(): void {
  77.     const uiContext = this.getUIContext();
  78.     if (!uiContext) return;
  80.     const animationConfig: KeyframeAnimationConfig = {
  81.       iterations: -1,
  82.       delay: 0
  83.     };
  85.     uiContext.keyframeAnimateTo(animationConfig, [
  86.       this.createKeyframe(this.ANIMATION_DURATION, { scale1: 1, scale2: 0 }),
  87.       this.createKeyframe(this.ANIMATION_DURATION, { scale1: 0, scale2: 1 })
  88.     ]);
  89.   }
  91.   /**
  92.    * 创建关键帧动画配置项
  93.    * @param duration - 动画持续时间
  94.    * @param update - 更新的状态对象
  95.    */
  96.   private createKeyframe(
  97.     duration: number,
  98.     update: AnimationUpdateParams
  99.   ): KeyframeItem {
  100.     return {
  101.       duration,
  102.       curve: Curve.EaseInOut,
  103.       event: () => {
  104.         if (update.scale1 !== undefined) this.scale1 = update.scale1;
  105.         if (update.scale2 !== undefined) this.scale2 = update.scale2;
  106.       }
  107.     };
  108.   }
  110.   /**
  111.    * 公共样式封装
  112.    */
  113.   @Styles
  114.   bounceStyle() {
  115.     .width('100%')
  116.     .height('100%')
  117.     .opacity(0.6)
  118.     .borderRadius(this.spinSize / 2) // 圆形效果
  119.     .backgroundColor(this.spinColor)
  120.   }
  121. }
复制代码
3.修改Index.ets文件，代码如下：
  1. import { SpinTwo } from './Spin';
  3. @Entry
  4. @Component
  5. struct Index {
  6.   @State message: string = 'Hello World';
  8.   build() {
  9.     Column() {
  10.       SpinTwo({
  11.         spinSize: 60,
  12.         spinColor: '#FF0000'
  13.       })
  14.     }
  15.     .alignItems(HorizontalAlign.Center)
  16.     .justifyContent(FlexAlign.Center)
  17.     .height('100%')
  18.     .width('100%')
  19.   }
  20. }
复制代码

<strong>代码如下：</strong>
  1. import { SpinTwo } from './Spin';
  3. @Entry
  4. @Component
  5. struct Index {
  6.   @State message: string = 'Hello World';
  8.   build() {
  9.     Column() {
  10.       SpinTwo({
  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企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

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

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

水军大提督

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

渠道 国产数据库 集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表