一、功能简介

本篇实现一个 AI 推荐卡片模块，具备页面加载后自动浮现、卡片组依次滑入的动画效果，适用于首页推荐、个性化内容推送、AI助手建议等场景。

二、关键技术点

三、页面结构

entry/src/main/ets/pages/AIRecommendSlideInDemo.ets

四、ArkTS 实战代码（AIRecommendSlideInDemo.ets）

@Entry
@Component
struct AIRecommendSlideInDemo {
  @State isVisible: boolean = false
  @State animatedCards: number[] = []

  private cards = [
    { title: '你可能喜欢', desc: '智能推荐内容1' },
    { title: '继续学习', desc: '个性化课程建议' },
    { title: '提高效率', desc: '推荐使用AI工具' }
  ]

  aboutToAppear() {
    // 整体模块浮现
    setTimeout(() => {
      this.isVisible = true
      // 卡片逐个滑入
      this.cards.forEach((_, i) => {
        setTimeout(() => {
          this.animatedCards.push(i)
        }, 300 + i * 200)
      })
    }, 600)
  }

  buildCard(item: { title: string; desc: string }, index: number): void {
    const isActive = this.animatedCards.includes(index)

    Column() {
      Text(item.title)
        .fontSize(16).fontWeight(FontWeight.Bold)
        .margin({ bottom: 6 })

      Text(item.desc)
        .fontSize(14).fontColor('#555')

    }
    .padding(16)
    .width('100%')
    .backgroundColor('#ffffff')
    .borderRadius(12)
    .shadow({ radius: 6 })
    .translate({ y: isActive ? 0 : 30 })
    .opacity(isActive ? 1 : 0)
    .animate({ duration: 300, curve: Curve.EaseOut })
    .margin({ bottom: 12 })
  }

  build() {
    Column() {
      Text('HarmonyOS 5.0.0 或以上')
        .fontSize(20).margin({ bottom: 16 })

      If(this.isVisible, () => {
        Column() {
          ForEach(this.cards, (item, i) => this.buildCard(item, i), (_, i) => i)
        }
        .animate({ duration: 300 })
      })
    }
    .padding(20)
    .backgroundColor('#f6f6f6')
    .width('100%')
    .height('100%')
  }
}

五、运行效果说明

• 页面加载 600ms 后整体模块浮现；

• 三张 AI 推荐卡片以下滑渐显方式依次进入；

• 具备空间感与节奏感，适合构建首页推荐体验；

• 数据结构可动态适配 AI 后台接口返回内容。

六、常见问题与优化建议

七、拓展建议

• 支持“刷新推荐”按钮重新触发动画；

• 卡片点击跳转具体推荐详情页；

• 接入实际 AI 推荐接口，动态加载内容；

• 封装为 <AIRecommendCardList data=[] /> 通用组件；

• 每个卡片添加“AI标签”或“模型来源”标识增强可信度。

下一篇为第32篇：

《HarmonyOS 5.0.0 或以上：实现内容骨架屏与数据渐变填充动效》