HarmonyOS Next 之弹性拖拽球(物理仿真动画)

该代码实现了一个弹性小球拖拽回弹效果，主要包含以下功能：1) 使用PanGesture手势识别实现小球拖拽；2) 通过Curve.Spring弹簧动画曲线模拟物理回弹效果；3) 实时更新小球坐标位置；4) 状态管理防止拖拽和动画冲突。关键技术包括手势交互、物理仿真动画和状态控制，实现小球被拖拽后自动弹回原点的效果。 流程图如下：

// ElasticBall.ets
import { Curve, animateTo } from '@ohos.animation';

@Entry
@Component
struct ElasticBall {
  @State ballX: number = 200;
  @State ballY: number = 400;
  @State isDragging: boolean = false;
  private originX: number = 200;
  private originY: number = 400;

  build() {
    Stack({ alignContent: Alignment.Center }) {
      // 原点标记
      Circle()
        .width(10)
        .height(10)
        .fill(Color.Red)
        .position({ x: this.originX - 5, y: this.originY - 5 })
      
      // 弹性小球
      Circle()
        .width(60)
        .height(60)
        .fill('#4D90FE')
        .position({ x: this.ballX - 30, y: this.ballY - 30 })
        .gesture(
          PanGesture({ distance: 5 })
            .onActionStart(() => {
              this.isDragging = true;
            })
            .onActionUpdate((event: GestureEvent) => {
              this.ballX = this.originX + event.offsetX;
              this.ballY = this.originY + event.offsetY;
            })
            .onActionEnd(() => {
              this.springBack();
            })
        )
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F0F0F0')
  }

  // 弹性回弹动画
  springBack() {
    const springParams = {
      mass: 1,
      stiffness: 300,
      damping: 15
    };
    
    animateTo({
      duration: 800,
      curve: Curve.Spring(springParams)
    }, () => {
      this.ballX = this.originX;
      this.ballY = this.originY;
      this.isDragging = false;
    });
  }
}

技术要点

1. 手势识别：PanGesture实现拖拽控制

2. 物理仿真：Curve.Spring弹簧物理曲线

3. 位置计算：实时更新球体坐标

4. 状态管理：拖拽状态切换防止动画冲突