第6章：手势与动画

属性动画

1. 属性动画概述

属性动画是ArkTS中实现UI动态效果的核心技术之一，它通过随时间改变组件的属性值（如位置、大小、透明度等）来创建平滑的视觉过渡效果。与传统的帧动画不同，属性动画直接操作视图属性，具有更高的灵活性和性能优势。

2. 核心API与使用方式

ArkTS提供了animateTo和animation两种主要方式实现属性动画：

// 方式1：animateTo函数式动画
animateTo({
  duration: 1000, // 动画时长(ms)
  curve: Curve.EaseInOut // 插值曲线
}, () => {
  this.translateX = 200 // 目标属性值
})

// 方式2：animation修饰符
@Component
struct AnimatedBox {
  @State translateX: number = 0
  
  build() {
    Column() {
      Rect()
        .width(100)
        .height(100)
        .translate({ x: this.translateX })
        .animation({
          duration: 500,
          curve: Curve.Spring
        })
    }
    .onClick(() => {
      this.translateX = (this.translateX + 100) % 300
    })
  }
}

3. 关键配置参数

参数类型说明
durationnumber动画持续时间(毫秒)
curveCurve动画插值曲线(Linear/EaseIn/Spring等)
delaynumber动画开始前延迟时间
iterationsnumber动画重复次数(Infinity表示无限循环)
playModePlayModeNormal/Reverse/Alternate等播放模式

4. 典型应用场景

  • 视觉反馈：按钮点击缩放效果
@State scale: number = 1

Button("Click Me")
  .scale({ x: this.scale, y: this.scale })
  .onClick(() => {
    animateTo({
      duration: 200,
      curve: Curve.EaseOut
    }, () => {
      this.scale = 1.2
      setTimeout(() => { this.scale = 1 }, 200)
    })
  })
  • 列表项入场动画：
@Entry
@Component
struct ListAnimation {
  @State items: string[] = ['A', 'B', 'C', 'D']
  
  build() {
    List() {
      ForEach(this.items, (item, index) => {
        ListItem() {
          Text(item)
            .opacity(0)
            .animation({
              duration: 300,
              delay: index * 100,
              curve: Curve.EaseIn
            })
        }
        .onAppear(() => {
          this.opacity = 1
        })
      })
    }
  }
}

5. 性能优化建议

  1. 优先使用硬件加速的属性（如transform相关属性）
  2. 避免在动画过程中触发布局重计算
  3. 对于复杂动画考虑使用Canvas绘制
  4. 适当降低动画帧率（30fps通常足够流畅）

6. 进阶技巧：组合动画

通过Promise.all实现多属性同步动画：

async function complexAnimation() {
  await Promise.all([
    animateTo({ /* 动画1配置 */ }, () => { /* 属性变更1 */ }),
    animateTo({ /* 动画2配置 */ }, () => { /* 属性变更2 */ })
  ])
  // 动画完成后的回调
}

最佳实践：建议将动画时长控制在300-500ms之间，符合人类视觉感知的最佳区间。对于交互式动画，响应时间应小于100ms以保证操作跟手性。

Last Updated::