手势

Motion 通过一套简单而强大的 UI 手势扩展了 React 的基本事件监听器集合。

motion 组件目前支持 hover、tap、pan、drag 和 inView。

每个手势都有一组事件监听器和一个 while- 动画属性。

动画属性

motion 组件提供多种手势动画属性：whileHover、whileTap、whileFocus、whileDrag 和 whileInView。 这些可以定义动画目标，以便在手势活动时临时动画到这些目标。

<motion.button
  whileHover={{
    scale: 1.2,
    transition: { duration: 1 },
  }}
  whileTap={{ scale: 0.9 }}
/>

所有属性都可以设置为要动画到的值的目标，或者通过 variants 属性定义的任何变体的名称。 变体将像往常一样向下传递给子组件。

<motion.button
  whileTap="tap"
  whileHover="hover"
  variants={buttonVariants}
>
  <svg>
    <motion.path variants={iconVariants} />
  </svg>
</motion.button>

手势

Hover

hover 手势检测指针何时悬停在组件上方或离开组件。

它与 onMouseEnter 和 onMouseLeave 的不同之处在于，hover 保证仅在实际鼠标事件发生时触发（而不是浏览器生成的模拟触摸输入的鼠标事件）。

<motion.a
  whileHover={{ scale: 1.2 }}
  onHoverStart={event => {}}
  onHoverEnd={event => {}}
/>

Tap

tap 手势检测 主指针（如鼠标左键单击或第一个触摸点）在同一组件上按下并释放。

<motion.button whileTap={{ scale: 0.9, rotate: 3 }} />

当 tap 或单击在开始的同一组件上结束时，它将触发 tap 事件；如果 tap 或单击在组件外部结束，则触发 tapCancel 事件。

如果可点击的组件是可拖动组件的子组件，则如果指针在手势期间移动超过 3 像素，它将自动取消 tap 手势。

可访问性

具有 tap 事件的元素是键盘可访问的。

任何具有 tap 属性的元素都能够接收焦点，并且可以使用 Enter 键在聚焦的元素上触发 tap 事件。

• 按下 Enter 键将触发 onTapStart 和 whileTap

• 释放 Enter 键将触发 onTap

• 如果元素在 Enter 键释放之前失去焦点，则会触发 onTapCancel。

Pan

pan 手势识别指针何时在组件上按下并移动超过 3 像素。 当指针释放时，pan 手势结束。

<motion.div onPan={(e, pointInfo) => {}} />

Pan 目前没有相关的 while- 属性。

注意： 为了使 pan 手势与触摸输入正确配合使用，元素需要禁用 x/y 轴或两个轴上的触摸滚动，使用 touch-action CSS 规则。

Drag

drag 手势将指针移动应用于组件的 x 和/或 y 轴。

<motion.div drag whileDrag={{ scale: 1.2, backgroundColor: "#f00" }} />

默认情况下，当拖拽结束时，元素将使用结束速度执行惯性动画。

这可以通过将 dragMomentum 设置为 false 来禁用，或者通过 dragTransition 属性来更改。

约束

还可以设置 dragConstraints，可以是一个对象，其中包含以像素为单位的 top、left、right 和 bottom 值。

<motion.div
  drag="x"
  dragConstraints={{ left: 0, right: 300 }}
/>

或者，它可以接受对另一个使用 React 的 useRef hook 创建的组件的 ref。 此 ref 应该同时传递给可拖动组件的 dragConstraints 属性，以及您要用作约束的组件的 ref。

const MyComponent = () => {
  const constraintsRef = useRef(null)

  return (
     <motion.div ref={constraintsRef}>
         <motion.div drag dragConstraints={constraintsRef} />
     </motion.div>
  )
}

默认情况下，将元素拖动到约束之外会产生一定的弹性。 这可以通过将 dragElastic 设置为介于 0 和 1 之间的值来更改，其中 0 等于无运动，1 等于约束外的完全运动。

方向锁定

可以通过设置 dragDirectionLock 将元素锁定到其拖动的第一个轴。

<motion.div
  drag
  dragDirectionLock
  onDirectionLock={callback}
/>

每次拖拽手势开始时，都会检测指针移动的方向，并且该元素将仅在此轴上可拖动。

Focus

focus 手势按照与以下相同的规则检测组件何时获得或失去焦点CSS :focus-visible 选择器.

通常，这是指 input 以任何方式接收焦点时，以及其他元素通过可访问的方式（例如通过键盘导航）接收焦点时。

<motion.a whileFocus={{ scale: 1.2 }} href="#" />

事件传播

子组件可以使用 Capture React 属性阻止指针事件传播到父 motion 组件。

例如，子组件可以通过将 e.stopPropagation() 传递给 onPointerDownCapture 来阻止拖拽和 tap 手势及其相关的 while 动画在父组件上触发。

<motion.div whileTap={{ scale: 2 }}>
  <button onPointerDownCapture={e => e.stopPropagation()} />
</motion.div>

注意：SVG 滤镜

手势在 SVG filter 组件上无法识别，因为这些元素没有物理存在，因此不接收事件。

相反，您可以将 while- 属性和事件处理程序添加到父组件，并使用变体来动画这些元素。

const MyComponent = () => {
  return (
    <motion.svg whileHover="hover">
      <filter id="blur">
        <motion.feGaussianBlur
          stdDeviation={0}
          variants={{ hover: { stdDeviation: 2 } }}
        />
      </filter>
    </motion.svg>
  )
}