一、功能简介

本篇将实现卡片组件的自由拖拽与释放后回弹归位动效，通过手势识别与位移动画模拟“弹性反馈感”，常用于卡片浏览、任务操作、可交互物理动效体验等场景。

二、关键技术点

三、页面结构

entry/src/main/ets/pages/DraggableCardDemo.ets

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

@Entry
@Component
struct DraggableCardDemo {
  @State offsetX: number = 0
  @State offsetY: number = 0
  @State isDragging: boolean = false

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

      Stack() {
        Column() {
          Text('🃏 拖我试试')
            .fontSize(18)
            .fontWeight(FontWeight.Bold)
        }
        .width(200)
        .height(140)
        .backgroundColor('#ffffff')
        .borderRadius(16)
        .shadow({ radius: 8, color: '#888888' })
        .translate({ x: this.offsetX, y: this.offsetY })
        .gesture(
          PanGesture()
            .onActionStart(() => {
              this.isDragging = true
            })
            .onActionUpdate(event => {
              this.offsetX += event.offsetX
              this.offsetY += event.offsetY
            })
            .onActionEnd(() => {
              this.offsetX = 0
              this.offsetY = 0
              this.isDragging = false
            })
        )
        .animate({
          duration: this.isDragging ? 0 : 300,
          curve: this.isDragging ? Curve.Linear : Curve.EaseOutBack
        })
      }
      .width('100%')
      .height(300)
      .align(Alignment.Center)
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .backgroundColor('#f5f5f5')
  }
}

五、运行效果说明

• 用户长按卡片后可随意拖动；

• 松手时卡片自动带弹性回归初始位置；

• 拖动无延迟，回弹柔和自然；

• 整体动效适合物理感交互体验设计。

六、常见问题与优化建议

七、拓展建议

• 添加拖拽方向限制（如只能左右滑动）；

• 拖动至一定距离自动删除/进入下一卡片；

• 多张卡片叠层展示，拖动后自动切换（Tinder 风）；

• 可封装为 <DraggableCard>...</DraggableCard> 并添加拖动反馈事件；

• 搭配“缩放+透明度”构建更立体拖拽效果。

下一篇为第14篇：

《HarmonyOS 5.0.0 或以上：实现对话气泡弹出与消失的渐变动画》