Framer Motion 中的点击事件

Framer Motion 是一个流行的 React 动画库，它提供了许多动画效果和交互特性。其中一个常用的交互特性是点击事件，可以在组件被点击时触发一些逻辑或调用一些函数。

1. 点击事件

在 Framer Motion 中，可以通过 whileTap 参数来指定点击事件的处理逻辑。它是一个对象，可以包含多个属性：

• scale: 点击时缩放的比例，默认为 0.95。
• rotate: 点击时旋转的角度，默认为 0 值。
• opacity: 点击时透明度变化，默认为 1。
• transition: 点击时动画过渡效果，默认为 spring 弹簧效果。

<motion.div 
  whileTap={{ 
    scale: 0.9, 
    rotate: -45, 
    opacity: 0.7, 
    transition: { duration: 0.2 } 
  }}
>
  点击我
</motion.div>

上面的代码片段展示了一个简单的点击事件，点击时会将当前组件缩小、旋转并降低透明度。其中 transition 参数指定了过渡效果的持续时间。

2. 点击事件回调函数

除了使用 whileTap 处理点击事件外，在 Framer Motion 中还可以使用 onClick 回调函数来处理点击事件。可以在回调函数中实现处理逻辑、调用 API、变更状态等操作。

function handleClick() {
  console.log("组件被点击了");
}

<motion.div onClick={handleClick}>点击我</motion.div>

上面的代码片段展示了一个简单的点击事件回调函数。当组件被点击时，会按照 handleClick 函数的逻辑进行处理。

3. 额外参数

当点击事件需要传递额外参数时，可以使用 event 参数来获取事件信息，然后将参数传递给回调函数。

function handleClick(event, arg1, arg2) {
  console.log(`组件被点击了，参数为 ${arg1} 和 ${arg2}`);
}

<motion.div onClick={(event) => handleClick(event, "foo", "bar")}>点击我</motion.div>

上面的代码片段展示了一个点击事件传递额外参数的例子。当组件被点击时，会将 "foo" 和 "bar" 两个参数传递给回调函数。

以上就是 Framer Motion 中点击事件的介绍，使用它可以实现丰富的交互体验和动画效果。