ArkUI 组件动画：列表和轮播自己也会动

今天我们看组件自带动画，不急着自己手写一套。

有些 ArkUI 组件本来就提供动画参数。比如 List 可以开链式动画，Swiper 可以控制切换时长和曲线，Tabs 也能调切换动画。我们先用它们自己的能力，别一上来就把所有变化都包进自定义动画。

这个 Demo 看什么

这个页面分三块：

• List.chainAnimation(true)：列表项出现时有轻微节奏。
• Swiper.duration(...) 和 curve(...)：控制轮播切换速度和曲线。
• Tabs.animationDuration(...) 和 animationCurve(...)：控制 Tab 切换节奏。

这里不做业务联动，也不展示当前索引。我们只看组件本身能提供什么动画入口。

如果你的页面里已经用了这些组件，先翻一下它们自己的动画属性。少写一层自定义动画，后面维护会轻松很多。

完整代码

@Entry
@Component
struct ArkUIComponentAnimationDemo {
  @Builder
  HeaderBlock() {
    Column({ space: 8 }) {
      Text('ArkUI 组件动画')
        .fontSize(28)
        .fontWeight(700)
        .fontColor('#111827')
      Text('列表和轮播自己也会动')
        .fontSize(16)
        .fontColor('#4B5563')
      Text('有些组件本来就带动画开关。我们先看 List、Swiper、Tabs 的基础写法，不把它们和业务状态绑在一起。')
        .fontSize(14)
        .fontColor('#6B7280')
        .lineHeight(22)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  @Builder
  SectionTitle(title: string, desc: string) {
    Column({ space: 6 }) {
      Text(title)
        .fontSize(18)
        .fontWeight(700)
        .fontColor('#111827')
      Text(desc)
        .fontSize(13)
        .fontColor('#6B7280')
        .lineHeight(20)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  build() {
    Scroll() {
      Column({ space: 22 }) {
        this.HeaderBlock()

        Column({ space: 12 }) {
          this.SectionTitle('List.chainAnimation', '列表出现时可以带一点链式节奏，别每一项都硬邦邦冒出来。')
          List({ space: 10 }) {
            ForEach(['待办整理', '资料归档', '设计验收'], (item: string, index: number) => {
              ListItem() {
                Row({ space: 12 }) {
                  Text(`${index + 1}`)
                    .width(30)
                    .height(30)
                    .borderRadius(15)
                    .textAlign(TextAlign.Center)
                    .fontColor('#FFFFFF')
                    .backgroundColor('#2563EB')
                  Text(item)
                    .fontSize(15)
                    .fontColor('#111827')
                }
                .width('100%')
                .padding(12)
                .borderRadius(14)
                .backgroundColor('#FFFFFF')
              }
            }, (item: string) => item)
          }
          .height(166)
          .chainAnimation(true)
          .scrollBar(BarState.Off)
        }
        .width('100%')
        .padding(16)
        .borderRadius(16)
        .backgroundColor('#F8FAFC')

        Column({ space: 12 }) {
          this.SectionTitle('Swiper.duration / curve', '轮播切换不只是换下一张，也可以控制切换时长和曲线。')
          Swiper() {
            ForEach(['#DBEAFE', '#DCFCE7', '#FEF3C7'], (colorValue: string, index: number) => {
              Column({ space: 8 }) {
                Text(`轮播卡片 ${index + 1}`)
                  .fontSize(20)
                  .fontWeight(700)
                  .fontColor('#111827')
                Text('左右滑动时观察切换速度')
                  .fontSize(13)
                  .fontColor('#4B5563')
              }
              .width('100%')
              .height(118)
              .borderRadius(16)
              .justifyContent(FlexAlign.Center)
              .backgroundColor(colorValue)
            }, (colorValue: string) => colorValue)
          }
          .height(130)
          .duration(520)
          .curve(Curve.EaseInOut)
          .indicator(true)
        }
        .width('100%')
        .padding(16)
        .borderRadius(16)
        .backgroundColor('#F8FAFC')

        Column({ space: 12 }) {
          this.SectionTitle('Tabs.animationDuration / animationCurve', 'Tab 切换也能调节过渡节奏，不需要自己再包一层动画。')
          Tabs() {
            TabContent() {
              Text('概览内容')
                .fontSize(16)
                .fontColor('#111827')
            }
            .tabBar('概览')

            TabContent() {
              Text('详情内容')
                .fontSize(16)
                .fontColor('#111827')
            }
            .tabBar('详情')
          }
          .height(120)
          .barMode(BarMode.Fixed)
          .animationDuration(360)
          .animationCurve(Curve.EaseInOut)
        }
        .width('100%')
        .padding(16)
        .borderRadius(16)
        .backgroundColor('#F8FAFC')
      }
      .width('100%')
      .padding(24)
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }
}