本文同步发表于我的微信公众号，微信搜索 程语新视界 即可关注，每个工作日都有文章更新

animateTo是鸿蒙ArkUI框架中实现显式动画的核心API，它通过对比闭包执行前后的状态差异自动生成过渡动画，支持丰富的参数配置和复杂的动画效果实现。

一、基础语法与参数

1. 基本接口定义

animateTo(value: AnimateParam, event: () => void): void

• value：动画参数配置对象
• event：执行状态变化的闭包函数

2. AnimateParam参数详解

二、核心使用场景

1. 基础属性动画

@State scale: number = 1.0

Button('缩放按钮')
  .scale({ x: this.scale, y: this.scale })
  .onClick(() => {
    animateTo({
      duration: 300,
      curve: Curve.Spring
    }, () => {
      this.scale = this.scale === 1.0 ? 1.5 : 1.0
    })
  })

实现点击按钮缩放效果

2. 复合动画（多属性同时变化）

@State rotate: number = 0
@State opacity: number = 1

animateTo({
  duration: 500,
  iterations: 2,
  playMode: PlayMode.Alternate
}, () => {
  this.rotate = 45
  this.opacity = 0.5
})

同时执行旋转和透明度动画

3. 动画序列控制

// 使用onFinish实现动画序列
animateTo({
  duration: 200,
  onFinish: () => {
    animateTo({ duration: 300 }, () => {
      this.widthSize = 250
    })
  }
}, () => {
  this.widthSize = 150
})

替代setTimeout的更优雅方案

三、高级功能特性

1. 自定义缓动曲线

animateTo({
  curve: curves.cubicBezier(0.1, 0.8, 0.2, 1) // 自定义贝塞尔曲线
}, () => { /*...*/ })

2. 动画中断处理

// 通过duration=0中断当前动画
animateTo({ duration: 0 }, () => {
  this.rotateAngle = 0 // 立即停止旋转
})

适用于手势交互场景

3. 性能优化配置

animateTo({
  expectedFrameRateRange: {
    min: 10, 
    max: 120,
    expected: 60
  }
}, () => { /*...*/ })

API 11+支持设置目标帧率

四、注意事项

1. 生命周期限制：

   • 避免在aboutToAppear/aboutToDisappear中使用 
   • 组件出现动画应在onAppear中触发 

2. 性能优化：

   • 复杂动画建议拆分多个animateTo调用
   • 卡片中动画时长不超过1000ms 

3. 特殊场景处理：

   • 布局变化动画需配合renderFit属性 
   • 无限循环动画(iterations=-1)注意内存管理 

4. 版本兼容性：

   • 元服务支持需API 11+ 
   • 帧率控制需API 11+ 

五、完整示例

@Entry
@Component
struct ButtonAnimation {
  @State scale: number = 1.0
  @State rotate: number = 0
  @State bgColor: Color = Color.Blue

  build() {
    Column() {
      Button('交互按钮')
        .width(150)
        .height(60)
        .scale({ x: this.scale, y: this.scale })
        .rotate({ angle: this.rotate })
        .backgroundColor(this.bgColor)
        .onClick(() => {
          // 组合动画
          animateTo({
            duration: 200,
            curve: Curve.EaseIn
          }, () => {
            this.scale = 0.9
            this.rotate = 10
          })
          
          animateTo({
            duration: 300,
            delay: 200,
            curve: Curve.Spring
          }, () => {
            this.scale = 1.1
            this.rotate = -5
            this.bgColor = Color.Red
          })
        })
    }
  }
}

通过合理配置animateTo参数和组合使用，可以实现从简单过渡到复杂交互的各种动画效果。可根据实际场景选择最适合的动画实现方式。