开始使用 Motion for React

Motion for React 是一个易于上手且精通后充满乐趣的动画库。

它是唯一一个拥有 混合引擎 的库。这意味着它既提供了原生浏览器动画的硬件加速性能，又结合了 JavaScript 动画的无限潜力。

它也受到以下公司的信任Framer为其出色的无代码动画和手势提供支持。

在本指南中，我们将学习如何安装 Motion，并快速了解其主要功能。

安装

Motion 可通过 npm 安装

npm install motion

现在可以通过 "motion/react" 导入功能

import { motion } from "motion/react"

注意：Motion for React 包含专为 React 定制的 API，但来自vanilla Motion的每个功能也兼容并可用于高级用例。

用法

Motion for React 的核心是这个<motion />组件。它是一个普通的 DOM 元素，被动画功能增强。

<motion.div />

动画化 motion 组件就像通过 animate 属性设置值一样简单

<motion.ul animate={{ rotate: 360 }} />

当 animate 中的值更改时，组件将进行动画处理。Motion 具有直观的默认值，但动画当然可以通过这个transition属性.

<motion.div
  animate={{
    scale: 2,
    transition: { duration: 2 }
  }}
/>

进入动画

当组件进入页面时，它将自动动画到 animate 属性中定义的值。

你可以通过 initial 属性提供动画的起始值，否则这些值将从 DOM 中读取。

<motion.button initial={{ scale: 0 }} animate={{ scale: 1 }} />

或者通过将 initial 设置为 false 完全禁用此初始动画。

<motion.button initial={false} animate={{ scale: 1 }} />

手势

<motion /> 使用强大的手势识别器扩展了 React 的事件系统。它目前支持悬停、点击、焦点和拖动。

<motion.button
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.95 }}
  onHoverStart={() => console.log('hover started!')}
/>

Motion 的手势旨在比单独使用 CSS 或 JavaScript 事件感觉更好。了解更多关于 Motion 的手势.

滚动动画

Motion 支持两种类型的滚动动画，滚动触发 和 滚动链接。

要在滚动时触发动画，whileInView 属性定义了当元素进入/离开视口时要动画到/从的状态

<motion.div
  initial={{ backgroundColor: "rgb(0, 255, 0)", opacity: 0 }}
  whileInView={{ backgroundColor: "rgb(255, 0, 0)", opacity: 1 }}
/>

而要将值直接链接到滚动位置，可以使用通过 useScroll 的 MotionValue。

const { scrollYProgress } = useScroll()

return <motion.div style={{ scaleX: scrollYProgress }} />

了解更多关于 Motion 的滚动动画。

布局动画

Motion 拥有行业领先的布局动画引擎，该引擎支持在布局更改之间进行动画处理，仅使用变换，在相同或不同的元素之间，并具有完整的比例校正。

它就像应用 layout 属性一样简单。

<motion.div layout />

或者要在不同元素之间进行动画处理，可以使用 layoutId

<motion.div layoutId="underline" />

了解更多关于布局动画。

退出动画

当元素从 DOM 中移除时进行动画处理通常很麻烦。

通过使用 <AnimatePresence> 包裹 motion 组件，我们可以访问 exit 属性。

<AnimatePresence>
  {show ? <motion.div key="box" exit={{ opacity: 0 }} /> : null}
</AnimatePresence>

了解更多关于 AnimatePresence。

下一步学习

这是 Motion for React 基本功能的快速概览。但还有很多东西要学习！

接下来，我们建议深入了解这个<motion />组件以了解更多关于其强大功能的信息，例如 variants。

或者，您可以直接深入我们的基础示例。每个示例都附带完整的源代码，您可以复制/粘贴到您的项目中。