HarmonyOS鸿蒙Next中怎么实现类似“智感握姿”左右弹出按钮的动画？

真机效果图：

动画实现思路：

检测到切换手握持后，先让控件消失，然后在动画结束时将控件切换到另一边，最后让控件出现。

完整代码：

需要先在 entry/src/main/module.json5 下配置 ohos.permission.DETECT_GESTURE 权限并向用户申请，具体可看：怎么实现 Mate80 系列同款握持检测？

// 从鸿蒙多模态感知 Kit 中引入 motion 模块，用于监听握持状态
import { motion } from '@kit.MultimodalAwarenessKit';

@Entry
@ComponentV2
struct FloatComponent {
  /* ========================= 状态变量 ========================= */
  // 控制悬浮按钮是否可见
  @Local isVisible: boolean = true;
  // 控制悬浮按钮在左侧还是右侧
  @Local isPositionedLeft: boolean = true;

  /* ========================= 握持状态缓存 ========================= */
  // 上一次握持状态（防抖用）
  private oldHandStatus = motion.HoldingHandStatus.NOT_HELD;
  // 最新一次握持状态（防抖用）
  private newHandStatus = motion.HoldingHandStatus.NOT_HELD;
  // 防抖锁：true 表示可以响应新事件，false 表示正在防抖中
  private isDebouncing: boolean = true;

  /* ========================= 防抖 & 切换逻辑 ========================= */
  /**
   * 真正执行业务逻辑的函数：
   * 1. 隐藏按钮（500ms动画）
   * 2. 切换左右位置
   * 3. 重新显示按钮（500ms动画）
   * 4. 1.5s防抖：期间若状态再次变化则递归调用，否则释放防抖锁
   */
  private processHandHeldChange = (data: motion.HoldingHandStatus) => {
    // 1.5s后检查：如果期间状态又变了，则继续递归防抖；否则释放锁
    setTimeout(() => {
      if (this.newHandStatus != this.oldHandStatus) {
        this.oldHandStatus = this.newHandStatus;
        this.processHandHeldChange(data);
      } else {
        this.isDebouncing = true; // 释放防抖锁
      }
    }, 1500);

    // 立即隐藏按钮
    this.isVisible = false;

    // 500ms后切换左右并重新显示（与隐藏动画衔接）
    setTimeout(() => {
      this.isPositionedLeft = !this.isPositionedLeft;
      this.isVisible = true;
    }, 500);
  };

  /* ========================= 握持事件回调 ========================= */
  /**
   * 监听“握持手改变”事件：
   * - 若状态无变化则直接返回
   * - 仅当左手或右手握持时才触发业务逻辑
   * - 通过防抖锁避免1.5s内重复触发
   */
  private onHandStatusChanged: Callback<motion.HoldingHandStatus> = (
    data: motion.HoldingHandStatus
  ) => {
    // 状态未变，无需处理
    if (this.oldHandStatus == data) return;

    // 只关心“左手握持”或“右手握持”
    if (
      data == motion.HoldingHandStatus.LEFT_HAND_HELD ||
        data == motion.HoldingHandStatus.RIGHT_HAND_HELD
    ) {
      this.newHandStatus = data;
      if (!this.isDebouncing) return; // 防抖中，直接丢弃
      this.isDebouncing = false; // 加锁
      this.oldHandStatus = data; // 更新缓存
      this.processHandHeldChange(data); // 执行业务
    }
  };

  /* ========================= 生命周期 ========================= */
  aboutToAppear(): void {
    try {
      // 注册握持状态监听
      motion.on('holdingHandChanged', this.onHandStatusChanged);
      console.info('on succeeded');
    } catch (e) {
      console.error('Failed on; err code = ' + e.code);
    }
  }

  aboutToDisappear(): void {
    try {
      // 页面销毁时移除监听，防止内存泄漏
      motion.off('holdingHandChanged'); // 移除所有同类订阅
      console.info('off succeeded');
    } catch (e) {
      console.error('Failed off; err code = ' + e.code);
    }
  }

  /* ========================= UI ========================= */
  build() {
    // 根据 isPositionedLeft 决定按钮在左还是右
    Stack({
      alignContent: this.isPositionedLeft ? Alignment.Start : Alignment.End,
    }) {
      // 仅当可见时才渲染按钮
      if (this.isVisible) {
        Button({ type: ButtonType.Circle, stateEffect: true }) {
          SymbolGlyph($r('sys.symbol.camera')); // 相机图标
        }
        .borderRadius(16)
        .clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 0.8 })
        .size({ width: 40, height: 40 })
        .backgroundColor($r('sys.color.multi_color_aux_03'))
        .margin(20)
        // 切换左右时的滑入动画
        .transition(
          TransitionEffect.move(
            this.isPositionedLeft ? TransitionEdge.START : TransitionEdge.END
          ).animation({ duration: 500, curve: Curve.Ease })
        );
      }
    }
    .width('100%')
    .height('100%');
  }
}