文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

JS

React

Vue

示例

开始使用

课程

动画

组件

Motion 值

钩子 (Hooks)

集成

指南

JS

React

Vue

示例

开始使用

课程

动画

组件

Motion 值

钩子 (Hooks)

集成

指南

React

概述

React Three Fiber 的 Motion

已弃用

React Three Fiber 的 Motion 是一个简单而强大的 3D 动画库。它提供了与 React 的 Motion 大部分相同的功能，但用于声明式 3D 场景。

本指南将帮助您使用 React Three Fiber 的 Motion 创建动画，但假设您了解以下两者的基础知识React 的 Motion和React Three Fiber.

安装

React Three Fiber 的 Motion 构建于Three.js和React Three Fiber(R3F) 库之上。从 npm 安装所有三个

npm install three@0.137.0 @react-three/fiber@8.2.2 framer-motion-3d@11.2.0

警告： React Three Fiber 的 Motion 目前仅与 React 18 兼容。

用法

`motion` 组件

对于每个 R3F 组件，都有一个 motion 等效组件。从 "framer-motion-3d" 导入 motion

import { motion } from "framer-motion-3d"

并用它代替您的 R3F 组件

<motion.pointLight animate={{ x: 2 }} />

动画

R3F 的 Motion 支持所有相同的动画选项，与往常一样，包括 initial 和 animate 属性、exit 和 variants。

const variants = {
  hidden: { opacity: 0 },
  visible: { opacity: 1 },
}

return (
  <motion.meshStandardMaterial
    initial="hidden"
    animate="visible"
    variants={variants}
  />
)

目前，variants 无法在 DOM 和 3D 世界之间自动传递，但您仍然可以共享状态以实现类似的结果

// index.js
import { motion } from "framer-motion"
import { Scene } from "./scene"

export function App() {
  const [isHovered, setIsHovered] = useState(false)
  
  return (
    <motion.div
      whileHover={{ scale: 1.2 }}
      onHoverStart={() => setIsHovered(true)}
      onHoverEnd={() => setIsHovered(true)}
    >
      <Scene isHovered={isHovered} />
    </motion.div>
  )
}

// scene.js
import { Canvas } from "@react-three/fiber"
import { motion } from "framer-motion-3d"

export function Scene({ isHovered }) {
  return (
    <Canvas>
      <motion.group animate={isHovered ? "hover" : "rest"}>
        <motion.mesh variants={{ hover: { z: 1 } }} />
      </motion.group>
    </Canvas>
  )
}

支持的值

3D motion 组件支持与其 2D 等效组件大部分相同的变换

x、y 和 z
scale、scaleX、scaleY 和 scaleZ
rotateX、rotateY 和 rotateZ

此外，color 和 opacity 在支持它们的 3D 图元上受支持，例如 meshStandardMaterial，并且在不久的将来会支持更多值。

手势

3D motion 组件支持 hover 和 tap手势在具有物理存在的 R3F 上（例如 mesh）。

<motion.mesh
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.9 }}
  onHoverStart={() => console.log('hover start')}
  onTap={() => console.log('tapped!')}
/>

Motion 值

Motion 值用于跟踪动画值的状态和速度，在 React 渲染生命周期之外。

对于 3D motion 组件，motion 值通过其 R3F 属性注入

import { useMotionValue, useTransform } from "framer-motion"
import { motion } from "framer-motion-3d"

export function Box() {
  const x = useMotionValue(0)
  const scaleZ = useTransform(x, v => v / 100)
  
  return (
    <motion.mesh
      position-x={x}
      scale={[1, 1, scaleZ]}
      animate={{ x: 100 }} 
    />
  )
}

布局动画

参与布局动画的图像，以及因此 3D 场景，可能会表现出比例失真。使用 LayoutCamera和LayoutOrthographicCamera组件这种失真可以得到纠正，并且 3D 场景可以自然地融入布局动画中。

React Three Fiber 的 Motion 是一个简单而强大的 3D 动画库。它提供了与 React 的 Motion 大部分相同的功能，但用于声明式 3D 场景。

本指南将帮助您使用 React Three Fiber 的 Motion 创建动画，但假设您了解以下两者的基础知识React 的 Motion和React Three Fiber.

安装

React Three Fiber 的 Motion 构建于Three.js和React Three Fiber(R3F) 库之上。从 npm 安装所有三个

npm install three@0.137.0 @react-three/fiber@8.2.2 framer-motion-3d@11.2.0

警告： React Three Fiber 的 Motion 目前仅与 React 18 兼容。

用法

`motion` 组件

对于每个 R3F 组件，都有一个 motion 等效组件。从 "framer-motion-3d" 导入 motion

import { motion } from "framer-motion-3d"

并用它代替您的 R3F 组件

<motion.pointLight animate={{ x: 2 }} />

动画

R3F 的 Motion 支持所有相同的动画选项，与往常一样，包括 initial 和 animate 属性、exit 和 variants。

const variants = {
  hidden: { opacity: 0 },
  visible: { opacity: 1 },
}

return (
  <motion.meshStandardMaterial
    initial="hidden"
    animate="visible"
    variants={variants}
  />
)

目前，variants 无法在 DOM 和 3D 世界之间自动传递，但您仍然可以共享状态以实现类似的结果

// index.js
import { motion } from "framer-motion"
import { Scene } from "./scene"

export function App() {
  const [isHovered, setIsHovered] = useState(false)
  
  return (
    <motion.div
      whileHover={{ scale: 1.2 }}
      onHoverStart={() => setIsHovered(true)}
      onHoverEnd={() => setIsHovered(true)}
    >
      <Scene isHovered={isHovered} />
    </motion.div>
  )
}

// scene.js
import { Canvas } from "@react-three/fiber"
import { motion } from "framer-motion-3d"

export function Scene({ isHovered }) {
  return (
    <Canvas>
      <motion.group animate={isHovered ? "hover" : "rest"}>
        <motion.mesh variants={{ hover: { z: 1 } }} />
      </motion.group>
    </Canvas>
  )
}

支持的值

3D motion 组件支持与其 2D 等效组件大部分相同的变换

x、y 和 z
scale、scaleX、scaleY 和 scaleZ
rotateX、rotateY 和 rotateZ

此外，color 和 opacity 在支持它们的 3D 图元上受支持，例如 meshStandardMaterial，并且在不久的将来会支持更多值。

手势

3D motion 组件支持 hover 和 tap手势在具有物理存在的 R3F 上（例如 mesh）。

<motion.mesh
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.9 }}
  onHoverStart={() => console.log('hover start')}
  onTap={() => console.log('tapped!')}
/>

Motion 值

Motion 值用于跟踪动画值的状态和速度，在 React 渲染生命周期之外。

对于 3D motion 组件，motion 值通过其 R3F 属性注入

import { useMotionValue, useTransform } from "framer-motion"
import { motion } from "framer-motion-3d"

export function Box() {
  const x = useMotionValue(0)
  const scaleZ = useTransform(x, v => v / 100)
  
  return (
    <motion.mesh
      position-x={x}
      scale={[1, 1, scaleZ]}
      animate={{ x: 100 }} 
    />
  )
}

布局动画

React Three Fiber 的 Motion 是一个简单而强大的 3D 动画库。它提供了与 React 的 Motion 大部分相同的功能，但用于声明式 3D 场景。

本指南将帮助您使用 React Three Fiber 的 Motion 创建动画，但假设您了解以下两者的基础知识React 的 Motion和React Three Fiber.

安装

React Three Fiber 的 Motion 构建于Three.js和React Three Fiber(R3F) 库之上。从 npm 安装所有三个

npm install three@0.137.0 @react-three/fiber@8.2.2 framer-motion-3d@11.2.0

警告： React Three Fiber 的 Motion 目前仅与 React 18 兼容。

用法

`motion` 组件

对于每个 R3F 组件，都有一个 motion 等效组件。从 "framer-motion-3d" 导入 motion

import { motion } from "framer-motion-3d"

并用它代替您的 R3F 组件

<motion.pointLight animate={{ x: 2 }} />

动画

R3F 的 Motion 支持所有相同的动画选项，与往常一样，包括 initial 和 animate 属性、exit 和 variants。

const variants = {
  hidden: { opacity: 0 },
  visible: { opacity: 1 },
}

return (
  <motion.meshStandardMaterial
    initial="hidden"
    animate="visible"
    variants={variants}
  />
)

目前，variants 无法在 DOM 和 3D 世界之间自动传递，但您仍然可以共享状态以实现类似的结果

// index.js
import { motion } from "framer-motion"
import { Scene } from "./scene"

export function App() {
  const [isHovered, setIsHovered] = useState(false)
  
  return (
    <motion.div
      whileHover={{ scale: 1.2 }}
      onHoverStart={() => setIsHovered(true)}
      onHoverEnd={() => setIsHovered(true)}
    >
      <Scene isHovered={isHovered} />
    </motion.div>
  )
}

// scene.js
import { Canvas } from "@react-three/fiber"
import { motion } from "framer-motion-3d"

export function Scene({ isHovered }) {
  return (
    <Canvas>
      <motion.group animate={isHovered ? "hover" : "rest"}>
        <motion.mesh variants={{ hover: { z: 1 } }} />
      </motion.group>
    </Canvas>
  )
}

支持的值

3D motion 组件支持与其 2D 等效组件大部分相同的变换

x、y 和 z
scale、scaleX、scaleY 和 scaleZ
rotateX、rotateY 和 rotateZ

此外，color 和 opacity 在支持它们的 3D 图元上受支持，例如 meshStandardMaterial，并且在不久的将来会支持更多值。

手势

3D motion 组件支持 hover 和 tap手势在具有物理存在的 R3F 上（例如 mesh）。

<motion.mesh
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.9 }}
  onHoverStart={() => console.log('hover start')}
  onTap={() => console.log('tapped!')}
/>

Motion 值

Motion 值用于跟踪动画值的状态和速度，在 React 渲染生命周期之外。

对于 3D motion 组件，motion 值通过其 R3F 属性注入

import { useMotionValue, useTransform } from "framer-motion"
import { motion } from "framer-motion-3d"

export function Box() {
  const x = useMotionValue(0)
  const scaleZ = useTransform(x, v => v / 100)
  
  return (
    <motion.mesh
      position-x={x}
      scale={[1, 1, scaleZ]}
      animate={{ x: 100 }} 
    />
  )
}

布局动画

useVelocity

布局相机

保持关注

订阅以获取最新的新闻和更新。

网站

关于

博客

文档

示例

Motion+

赞助

社交媒体

Discord

GitHub

X/Twitter

Bluesky

保持关注

订阅以获取最新的新闻和更新。

网站

关于

博客

文档

示例

Motion+

赞助

社交媒体

Discord

GitHub

X/Twitter

Bluesky

JS

React

示例

开始使用

课程

动画

组件

Motion 值

钩子 (Hooks)

集成

指南

JS

React

示例

开始使用

课程

动画

组件

Motion 值

钩子 (Hooks)

集成

指南

React Three Fiber 的 Motion

保持关注

©2025 Motion Division Ltd.

网站

社交媒体

保持关注

©2025 Motion Division Ltd.

网站

社交媒体