使用 Framer Motion 的 React 动画

在了解 Framer Motion 之前，我们首先应该知道为什么需要它。Framer Motion改进并简化了API，而这在不进行破坏性更改和重写代码的情况下是无法实现的。作为一名 React 开发者，我对此感到非常兴奋，因为我可以使用自己熟悉的技术来创建动画。

Framer Motion是什么？

Framer Motion 是一个可用于生产环境的动画库，它使用 React 创建动画。它提供声明式动画、轻松的布局过渡和手势，同时保持 HTML 和 SVG 语义。

如何在我们的项目中使用 Framer Motion

在您的项目中使用安装 Framer Motion

npm install framer-motion 

请记住，Framer-Motion 要求您使用 React 版本 16.8 或更高版本。

安装完成后，您可以通过 framer-motion 将 Motion 导入到您的组件中。

import { motion } from "framer-motion"

好了，现在你可以在项目中使用 Framer Motion 了。接下来我们通过几个示例来了解 Framer Motion 的基本语法。

动画
由Framer Motion功能强大的动画道具驱动。它可以满足最简单的和最复杂的应用场景。

运动组件是Framer Motion的核心元素之一，Framer Motion中的大多数动画都是通过运动组件灵活的animate属性来控制的。*

根据您的需求，您可以以多种方式使用 animate 属性：

<motion.div animate={{ x: 200,rotate:180 }} />

在上面的例子中，div 标签将向右移动 200px 并旋转 180 度。

过渡效果
可以使用 Popmotion 熟悉的补间动画、弹簧动画和惯性动画来配置此过渡效果（可选）。

默认情况下，x 轴和缩放等物理属性使用弹簧动画，而透明度和颜色等值则使用补间动画。您还可以使用 transition 属性来更改动画的持续时间、延迟和刚度等属性。

<motion.div animate={{ x: 200,rotate:180 }}   
transition={{ duration: 2, repeat: Infinity }} />

在上面的例子中，div 标签将向右移动 200px 并旋转 180 度。duration 和 repeat 属性用于使该动画以 2 秒的持续时间循环播放。

关键帧

动画中的值也可以设置为一系列关键帧。这样，动画就会按顺序依次播放每个值。默认情况下，关键帧动画会从数组中的第一个元素开始。

<motion.div animate={{ scale: [2, 2, 1] }} />

在上面的例子中，div 将按顺序缩放每个值。

变体

变体是一组预定义的目标对象，通过 `variants` 属性传递给运动组件。目标对象适用于简单的单组件动画。但有时我们希望创建能够遍历整个 DOM 的动画，并以声明式的方式协调这些动画。

通过定义一组组件的变体，提供变体标签来设置动画效果，可以将此动画效果传播到所有子组件，就像添加 when、delayChildren 和 staggerChildren 等过渡属性一样。

import * as React from "react";
import { motion } from "framer-motion";


    const variants = {
     open: {
      transition: { staggerChildren: 0.09, delayChildren: 0.3 }
     },
     closed: {
      transition: { staggerChildren: 0.06, staggerDirection: -1 }
     }
    };
    export const Navigation = () => (
      <motion.ul variants={variants}>
        {itemIds.map(i => (
          <MenuItem i={i} key={i} />
        ))}
      </motion.ul>
    );


const itemIds = [ 1, 2, 3, 4];

在上面的示例中，staggerChildren 和 delayChildren 属性用于延迟菜单项的过渡效果。此外，staggerDirection 属性用于指定交错方向。

Gestures
Motion 扩展了 React 提供的基础事件监听器集，提供了一套简洁而强大的 UI 手势识别器。它目前支持悬停、点击、平移和拖拽手势检测。每种手势都有一系列事件监听器，您可以将其附加到您的运动组件上。

徘徊

悬停手势用于检测指针何时悬停在组件上或离开组件。有三个悬停属性可用——whileHover、onHoverStart(event, info) 和 onHoverEnd(event, info)。

<motion.div
  whileHover={{ scale: 1.2 }}
  onHoverStart={() => console.log("starts")}
  onHoverEnd={() => console.log("ends")}

/>

在上面的例子中，当我们将鼠标悬停在 div 上时，它的大小会增加；当我们开始悬停时，控制台会打印“开始”，当我们停止悬停时，控制台会打印“结束”。

重点

焦点手势检测组件何时通过点击、聚焦或 tabindex 获得或失去焦点。焦点属性为 whileFocus。

<motion.div
whileFocus={{ scale: 1.5 }}
/>

在上面的例子中，当我们聚焦到 div 元素上时，它的大小会增加。

轻敲

点击手势可以检测指针何时按下并释放到同一组件上。

有三个悬停属性可用——whiletap、onTap(event,info)、onTapStart(event, info)、onTapCancel(event, info)

<motion.div whileTap={{ scale: 1.2 }} />

在上面的例子中，当我们点击 div 元素时，它的大小会增加
。

平移手势功能用于识别指针按下组件并移动超过 3 个像素的情况。当指针松开时，平移手势结束。

有三个悬停道具可用——onPanStart、onPan 和 onPanEnd。

为了使平移手势能够正确地与触摸输入配合使用，需要使用 touch-action CSS 规则禁用元素在 x/y 轴或两个轴上的触摸滚动。

function onPan(event, info) {
  console.log(info.point.x, info.point.y)
}


<motion.div onPan={onPan} />

在上面的示例中，包含点的 x 和 y 值的 Info 对象是相对于设备或页面的。delta 是自上次事件以来移动的距离。offset 是相对于原始平移事件的偏移量。velocity 是指针的当前速度。
拖动

拖动手势遵循平移手势的规则，但指针移动应用于组件的 x 轴和/或 y 轴。

<motion.div
  drag
  dragTransition={{
    min: 0,
    max: 100,
    bounceStiffness: 100
  }}
>
 Drag 

</motion.div>

在上面的例子中，拖动操作同时支持 x 方向和 y 方向。如果您只想支持 x 方向的拖动，可以将 drag 属性值设置为“x”：drag=“x”。

希望这篇文章能帮助你开始在 React 项目中使用 FramerMotion 来创建一些炫酷的动画。如有任何疑问，请在下方评论区留言。感谢你的阅读，希望我的博客对你有所帮助。

快乐学习！