鸿蒙开发中动画的详细使用

本文同步发表于我的微信公众号，扫一扫文章底部二维码或微信搜索 程语新视界 即可关注，每个工作日都有文章更新。

在鸿蒙（HarmonyOS）开发中，动画是实现交互体验的重要部分，ArkTS提供了多种动画实现方式。以下是结合显式动画、属性动画及实际案例的详细说明：

一、显式动画（animateTo）

说明 显式动画通过全局接口 animateTo 实现，可在闭包函数中触发状态变化，系统自动生成过渡动画。适用于布局变化、组件联动等场景。 核心特性：

• 支持布局类属性（如宽高、位置）的过渡效果；
• 内容默认直接跳转到终点状态，需通过 renderFit 属性实现内容跟随动画 。

示例代码：

// AnimationWidgets.ets 示例（修改状态触发动画）
export struct AnimationWidgets {
  //通过 @State 变量控制平移量，确保动画与数据绑定联动
  @State mainFlag: boolean = false;

  build() {
    Column() {
      Button("点击触发动画")
        .onClick(() => {
          animateTo({
            duration: 1000,
            curve: Curve.EaseInOut // 缓动曲线：先加速后减速
          }, () => {
            this.mainFlag = !this.mainFlag; // 状态变化触发动画
          })
        })
      // 受状态影响的组件
      Text("动态文本")
        .width(this.mainFlag ? 200 : 100)  // 宽度过渡动画
        .opacity(this.mainFlag ? 0.5 : 1)  // 透明度过渡动画
    }
  }
}

二、属性动画

说明 属性动画针对组件通用属性（如 width、opacity、rotate 等）的渐变效果，无需显式调用动画接口。 支持属性：

• 布局类：width、height、backgroundColor；
• 视觉类：opacity、scale、rotate、translate 。

示例代码：

// 按钮点击后旋转并放大
@Entry
@Component
struct IconAnimation {
  @State rotateAngle: number = 0;
  @State scaleValue: number = 1;

  build() {
    Column() {
      Button("旋转放大")
        .onClick(() => {
          this.rotateAngle += 90;
          this.scaleValue = 1.5;
        })
        //通过 @State 变量控制平移量，确保动画与数据绑定联动
        .rotate({ angle: this.rotateAngle }) // 旋转动画
        .scale({ x: this.scaleValue, y: this.scaleValue }) // 缩放动画
    }
  }
}

三、组合动画与参数配置

1. 动画参数详解（AnimateParam）

参数	类型	说明
duration	number	动画时长（ms），默认1000，卡片环境最大1000
curve	Curve | string	动画曲线（如 EaseInOut、Linear），支持自定义贝塞尔曲线
delay	number	延迟播放时间，负值表示提前渲染
iterations	number	播放次数（-1表示无限循环）
playMode	PlayMode	播放模式（如 Normal 顺序播放，Alternate 往返播放）

2. 组合动画示例

// 同时实现移动、旋转、透明度变化的组合动画
animateTo({
  duration: 1500,
  curve: Curve.Spring,// 缓动曲线，更多动画曲线效果可参考 Curve 枚举类型（如 Curve.Spring             
                                  //弹性动画、Curve.Friction 阻尼效果）
  iterations: 2,// 执行2次（往返算1次）
  playMode: PlayMode.Alternate// 往返播放
}, () => {
  this.translateX = 100;// 配合translate属性
  this.rotateAngle = 180;// 配合rotate属性
  this.opacityValue = 0.3;// 配合opacity属性（透明度）
})

四、实际开发建议

• 避免在频繁触发的回调（如滚动事件）中使用复杂动画；

关注公众号，每天都有优质技术文章推送。

微信扫一扫下方二维码即可关注：