一、功能简介

本篇将模拟一个**图文卡片“聚合 → 爆炸散落 → 再聚焦重组”**的动画效果，适用于 AI推荐、内容聚合展示、动态标签处理等场景，强调空间感与视觉注意力引导。

二、关键技术点

三、页面结构

entry/src/main/ets/pages/CardExplosionFocusDemo.ets

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

@Entry
@Component
struct CardExplosionFocusDemo {
  @State mode: string = 'center'
  @State scatterOffsets: { x: number, y: number, r: number }[] = []

  cardData: string[] = ['推荐', '学习', '探索', 'AI工具', '创作']

  aboutToAppear() {
    // 初始化随机散落方向
    this.scatterOffsets = this.cardData.map(() => ({
      x: (Math.random() - 0.5) * 300,
      y: (Math.random() - 0.5) * 300,
      r: (Math.random() - 0.5) * 60
    }))
  }

  triggerExplosion() {
    this.mode = this.mode === 'center' ? 'scatter' :
                this.mode === 'scatter' ? 'reset' : 'center'
  }

  buildCard(text: string, index: number): void {
    let offset = { x: 0, y: 0, r: 0 }

    if (this.mode === 'scatter') offset = this.scatterOffsets[index]
    if (this.mode === 'reset') offset = { x: 0, y: 0, r: 0 }

    Column() {
      Text(text).fontSize(14).fontWeight(FontWeight.Medium)
    }
    .width(90).height(90)
    .borderRadius(12)
    .backgroundColor('#ffffff')
    .shadow({ radius: 6 })
    .align(Alignment.Center)
    .translate({ x: offset.x, y: offset.y })
    .rotate({ angle: offset.r })
    .opacity(this.mode === 'center' ? 0 : 1)
    .scale({ x: this.mode === 'center' ? 0 : 1, y: this.mode === 'center' ? 0 : 1 })
    .animate({ duration: 400, curve: Curve.EaseOutBack })
    .margin(8)
  }

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

      Button(this.mode === 'center' ? '💥 爆炸散落' :
             this.mode === 'scatter' ? '🔄 聚焦还原' : '↩ 返回中心')
        .onClick(() => this.triggerExplosion())
        .margin({ bottom: 24 })

      Stack() {
        ForEach(this.cardData, (item, i) => {
          this.buildCard(item, i)
        }, (_, i) => i)
      }
      .width('100%').height(360)
    }
    .padding(20)
    .backgroundColor('#f3f3f3')
    .width('100%').height('100%')
  }
}

五、运行效果说明

• 初始所有卡片聚焦在中心点，透明 + 缩放为 0；

• 点击“爆炸散落”按钮 → 所有卡片以动画方式飞出；

• 再次点击 → 卡片回聚焦、逐步重组；

• 支持连续切换三种状态：聚合 → 散落 → 重置 → 聚合。

六、常见问题与优化建议

七、拓展建议

• 接入点击卡片展开详细视图；

• 支持从不同方向聚合（如上中下左右）；

• 加入圆形聚合排列或瀑布流聚焦；

• 可用于关键词热度可视化、AI兴趣图谱展示；

• 封装为 <ExplodingCardGroup data=[] /> 通用组件。

下一篇为第36篇：

《HarmonyOS 5.0.0 或以上：实现页面底部菜单栏的上滑弹出与选中变形动画》