Floating 浮动层

TxFloating 提供容器级鼠标/触摸位置跟踪，TxFloatingElement 按 depth 参数产生不同方向和强度的缓动位移。它适合用于轻量视差、引导卡片、视觉装饰和状态面板，不适合承载关键布局。

基础用法

深度缓动

多个浮动元素可以放在同一个 TxFloating 容器内，通过 depth 控制运动强度。

示例即将加载...

<template>
  <TxFloating class="stage" :sensitivity="0.55" :easing-factor="0.08">
    <TxFloatingElement class-name="status-rail" :depth="-0.06" />
    <TxFloatingElement class-name="status-panel" :depth="0.04">
      鼠标移动时，状态层会按 depth 缓动
    </TxFloatingElement>
  </TxFloating>
</template>

API（Lite）

属性名	类型	默认值	说明
sensitivity			整体位移敏感度
easingFactor			每帧靠近目标位置的比例
disabled			禁用动画、停止监听并重置子元素位置
className			透传到容器或元素的类名
depth			TxFloatingElement 的位移深度，支持负数反向移动

交互契约

TxFloating 监听 window mousemove / touchmove，并以容器左上角为原点计算指针位置。
每个元素位移目标为 pointerPosition * (depth * sensitivity / 20)，每帧按 easingFactor 缓动靠近。
disabled=true 时停止事件监听和 RAF，取消当前动画帧，并将已注册元素重置为 translate3d(0px, 0px, 0)。
disabled=false 后会重新启动事件监听和 RAF。
TxFloatingElement 挂载时注册，depth 变化时重新注册，卸载时注销。

Source

查看源码

packages/tuffex/packages/components/src/floating/index.ts