OpenHarmony列表组件怎样动画

在 OpenHarmony（ArkUI） 中，列表组件（如 List、LazyForEach、ForEach）的“动画”通常分为几类：列表项增删改动画、滚动动画、状态变化动画、转场动画。下面按常见场景给你说明。

一、列表项增删改动画（最常用）

1️⃣ 使用 ForEach + 状态变化（自动动画）

OpenHarmony 的 ForEach 在数据源变化时会自动做进场 / 退场动画。

@Entry
@Component
struct ListAnimDemo {
  @State items: string[] = ['A', 'B', 'C']

  build() {
    Column() {
      Button('添加')
        .onClick(() => {
          this.items.push(`Item ${this.items.length}`)
        })

      Button('删除')
        .onClick(() => {
          this.items.pop()
        })

      List() {
        ForEach(this.items, (item: string) => {
          ListItem() {
            Text(item)
              .fontSize(20)
              .padding(10)
          }
        }, (item: string) => item)
      }
    }
  }
}

✅ 效果：

• 添加：列表项滑入
• 删除：列表项滑出

二、自定义列表项动画（显隐 / 位移 / 缩放）

2️⃣ 使用 animateTo

@State show: boolean = true

ListItem() {
  Text('动画项')
    .opacity(this.show ? 1 : 0)
    .height(this.show ? 50 : 0)
}

Button('切换')
  .onClick(() => {
    animateTo({ duration: 300 }, () => {
      this.show = !this.show
    })
  })

✅ 常用于：

• 折叠展开
• 高度变化
• 透明度变化

三、列表滚动动画

3️⃣ List 滚动到指定位置

private listScroller: ListScroller = new ListScroller()

List(this.listScroller) {
  // items
}

Button('滚动到顶部')
  .onClick(() => {
    this.listScroller.scrollToIndex(0)
  })

可选参数：

scrollToIndex(index, smooth: true)

✅ 支持平滑滚动动画

四、列表项点击动画

4️⃣ scale / translate 动画

@State scaleValue: number = 1

ListItem() {
  Text('点击放大')
    .scale({ x: this.scaleValue, y: this.scaleValue })
    .onClick(() => {
      animateTo({ duration: 200 }, () => {
        this.scaleValue = 1.2
      })
    })
}

五、页面 / 列表转场动画

5️⃣ pageTransition

pageTransition() {
  PageTransitionEnter({ duration: 300, type: RouteType.Push })
  PageTransitionExit({ duration: 300, type: RouteType.Pop })
}

适用于：

• 列表 → 详情页
• 返回列表动画

六、性能建议（重要）

✅ 推荐

• 使用 LazyForEach（长列表）
• 列表项动画尽量用 opacity / translate / scale

❌ 避免

• 大范围 width / height 动画
• 每一帧频繁 setState

七、常见动画组合

如果你能告诉我：

• 用的是 ArkTS / eTS
• 列表是 短列表还是长列表
• 想做 哪种动画（增删 / 滚动 / 点击 / 转场）

我可以给你更精准的示例代码。