引言

在前几篇文章中，我们分别介绍了鸿蒙系统动画的基础概念、属性动画、显式动画、转场动画、路径动画、动画曲线以及高级动画技巧的实现方法。本文将通过实用动画案例，帮助您将所学知识应用到实际开发中，进一步提升动画设计能力。

实用动画案例

1. 加载动画

加载动画是应用中常见的动画效果，用于在数据加载过程中提供视觉反馈。以下是一个加载动画的示例：

@Component
struct LoadingAnimation {
  @State rotation: number = 0;
  @State isLoading: boolean = true;
  
  aboutToAppear() {
    // 开始加载动画
    this.startLoadingAnimation();
  }
  
  startLoadingAnimation() {
    if (!this.isLoading) return;
    
    // 旋转动画
    animateTo({
      duration: 1000,
      curve: Curve.Linear,
      iterations: -1, // 无限循环
      playMode: PlayMode.Normal
    }, () => {
      this.rotation = 360;
    });
  }
  
  build() {
    Stack() {
      // 外圈
      Progress({ value: 100, total: 100, type: ProgressType.Ring })
        .width(50)
        .height(50)
        .color(Color.Gray.opacity(0.2))
        .style({ strokeWidth: 5 })
      
      // 动态圆弧
      Progress({ value: 30, total: 100, type: ProgressType.Ring })
        .width(50)
        .height(50)
        .color('#3478f6')
        .style({ strokeWidth: 5 })
        .rotate({ angle: this.rotation })
    }
  }
  
  aboutToDisappear() {
    // 组件销毁时停止动画
    this.isLoading = false;
  }
}

代码解析

上述代码展示了如何实现加载动画：

1. 旋转动画：使用animateTo函数创建持续旋转的动画效果。
2. 动画配置：
   • duration：设置动画持续时间为1000毫秒。
   • curve：使用Linear曲线，使动画以恒定速度运行。
   • iterations：设置为-1，使动画无限循环。
   • playMode：设置为Normal，即正向播放。
3. 进度环：使用Progress组件创建外圈和动态圆弧，模拟加载进度。
4. 生命周期控制：在aboutToAppear方法中启动动画，在aboutToDisappear方法中停止动画。

2. 点赞动画

点赞动画是社交应用中常见的交互效果，用于反馈用户的点赞操作。以下是一个点赞动画的示例：

@Component
struct LikeAnimation {
  @State isLiked: boolean = false;
  @State scale: number = 1;
  
  build() {
    Image(this.isLiked ? $r('app.media.heart_filled') : $r('app.media.heart_outline'))
      .width(30)
      .height(30)
      .scale({ x: this.scale, y: this.scale })
      .fillColor(this.isLiked ? Color.Red : Color.Gray)
      .onClick(() => {
        this.isLiked = !this.isLiked;
        this.playLikeAnimation();
      })
  }
  
  playLikeAnimation() {
    if (this.isLiked) {
      // 先放大
      animateTo({ duration: 200, curve: Curve.EaseOut }, () => {
        this.scale = 1.5;
      });
      
      // 然后缩小
      setTimeout(() => {
        animateTo({ duration: 100, curve: Curve.Ease }, () => {
          this.scale = 1.0;
        });
      }, 200);
    } else {
      // 简单的缩小动画
      animateTo({ duration: 200, curve: Curve.EaseIn }, () => {
        this.scale = 1.0;
      });
    }
  }
}

代码解析

上述代码展示了如何实现点赞动画：

1. 状态切换：点击图标时切换isLiked状态，改变图标样式。
2. 动画效果：
   • 点赞状态：先放大图标，然后缩小回原大小。
   • 取消点赞状态：直接缩小图标。
3. 动画配置：
   • duration：设置动画持续时间为200毫秒或100毫秒。
   • curve：根据动画阶段选择不同的曲线，如EaseOut、Ease和EaseIn。
4. 定时器控制：使用setTimeout方法控制动画的执行顺序。

实用动画案例的优势

实用动画案例具有以下优势：

1. 增强用户交互：通过动画效果增强用户与应用的交互体验。
2. 提供视觉反馈：在用户操作时提供即时的视觉反馈，提升用户满意度。
3. 提升应用品质：丰富的动画效果使应用界面更加生动和专业。

实际应用场景

实用动画案例在实际开发中有很多应用场景，例如：

• 数据加载：在数据加载过程中使用加载动画，提供视觉反馈。
• 社交应用：在点赞、评论等交互操作中使用动画效果，增强用户体验。
• 电商应用：在商品展示中使用动画效果，吸引用户注意力。

总结

本文通过加载动画和点赞动画两个实用案例，展示了如何将鸿蒙动画技术应用到实际开发中。这些案例帮助您更好地理解和运用所学的动画知识，提升动画设计能力。

在接下来的文章中，我们将继续介绍更多实用动画案例，进一步扩展您的动画设计能力，帮助您为鸿蒙应用创建更加丰富和生动的用户界面。