在首先了解帧运动之前,我们应该知道为什么我们需要帧运动? Framer motion 改进并简化了 API,而这种方式在不破坏更改和重写的情况下是无法完成的。作为一名 React 开发人员,我发现它非常令人兴奋,因为我可以使用我已经熟悉的技术创建动画。

什么是 Framer Motion?

Framer Motion 是一个生产就绪的运动库,用于使用 React 创建动画。它带来了声明性动画、轻松的布局转换和手势,同时保持了 HTML 和 SVG 语义。

如何在我们的项目中使用 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 的多功能动画道具驱动。它可以满足最简单、最高级的用例。

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

根据您的要求,您可以通过多种方式使用 animate 属性:

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

进入全屏模式 退出全屏模式

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

过渡

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

默认情况下,x 和 scale 等物理属性通过 spring 设置动画,而 opacity 和 color 等值使用补间设置动画。您还可以使用过渡道具来更改动画的持续时间、延迟和刚度等属性。

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

进入全屏模式 退出全屏模式

在上面的示例中,div 标签将向右移动 200px 并旋转 180 度。持续时间和重复道具用于使动画保持循环,持续时间为 2 秒。

关键帧

animate 中的值也可以设置为一系列关键帧。这将通过序列中的每个值进行动画处理。默认情况下,关键帧动画将从数组中的第一项开始。

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

进入全屏模式 退出全屏模式

在上面的示例中, div 将缩放序列中的每个值。

变体

变体是通过使用变体属性传递到运动组件的预定义目标对象的集合。目标对象对于简单的单组件动画很有用。但有时我们想要创建在整个 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 属性用于指定交错的方向。

手势

Motion 使用一组简单但功能强大的 UI 手势识别器扩展了 React 提供的基本事件侦听器集。它目前支持悬停、点击、平移和拖动手势检测。每个手势都有一系列事件侦听器,您可以将它们附加到您的运动组件。

徘徊

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

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

/>

进入全屏模式 退出全屏模式

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

重点

焦点手势检测组件何时通过单击、焦点或 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

为使平移手势与触摸输入一起正常工作,元素需要使用触摸动作 CSS 规则在 x/y 或两个轴上禁用触摸滚动

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


<motion.div onPan={onPan} />

进入全屏模式 退出全屏模式

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

拖

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

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

</motion.div>

进入全屏模式 退出全屏模式

在上面的示例中,x 方向和 y 方向都启用了拖动。如果只想限制在x方向,可以将drag属性值设置为“x”:dragu003d“x”。

希望它可以帮助您开始在 React 项目中使用帧运动来构建一些非常酷的动画。如果对此有任何疑问,请将其写在下面的评论中。感谢您抽出宝贵时间,希望我的博客对您有所帮助。

快乐学习!!