MotionCanvas
已弃用
已弃用
React Three Fiber (R3F) 使用Canvas 组件来建立 3D 场景。使用此组件会破坏与父组件的上下文。
为了将 Motion 3D 上下文与 DOM Motion 链接，例如共享默认过渡或链接LayoutCamera与布局动画，可以使用 MotionCanvas 组件来代替。
import { MotionConfig, motion } from "motion/react" import { MotionCanvas, motion as motion3d } from "framer-motion-3d" export function App() { return ( <MotionConfig transition={{ type: "spring" }}> <motion.div animate={{ scale: 2 }}> <MotionCanvas> <motion3d.boxGeometry animate={{ x: 1 }} /> </MotionCanvas> </motion.div> </MotionConfig> ) }
它与 R3F 的 Canvas 组件共享所有相同的 props，但省略了 resize，因为 MotionCanvas 实现了自己的 resize 选项以与 Framer Motion 的布局动画同步。
还需要强制启用布局动画中的 3D 场景.
React Three Fiber (R3F) 使用Canvas 组件来建立 3D 场景。使用此组件会破坏与父组件的上下文。
为了将 Motion 3D 上下文与 DOM Motion 链接，例如共享默认过渡或链接LayoutCamera与布局动画，可以使用 MotionCanvas 组件来代替。
import { MotionConfig, motion } from "motion/react" import { MotionCanvas, motion as motion3d } from "framer-motion-3d" export function App() { return ( <MotionConfig transition={{ type: "spring" }}> <motion.div animate={{ scale: 2 }}> <MotionCanvas> <motion3d.boxGeometry animate={{ x: 1 }} /> </MotionCanvas> </motion.div> </MotionConfig> ) }
它与 R3F 的 Canvas 组件共享所有相同的 props，但省略了 resize，因为 MotionCanvas 实现了自己的 resize 选项以与 Framer Motion 的布局动画同步。
还需要强制启用布局动画中的 3D 场景.
React Three Fiber (R3F) 使用Canvas 组件来建立 3D 场景。使用此组件会破坏与父组件的上下文。
为了将 Motion 3D 上下文与 DOM Motion 链接，例如共享默认过渡或链接LayoutCamera与布局动画，可以使用 MotionCanvas 组件来代替。
import { MotionConfig, motion } from "motion/react" import { MotionCanvas, motion as motion3d } from "framer-motion-3d" export function App() { return ( <MotionConfig transition={{ type: "spring" }}> <motion.div animate={{ scale: 2 }}> <MotionCanvas> <motion3d.boxGeometry animate={{ x: 1 }} /> </MotionCanvas> </motion.div> </MotionConfig> ) }
它与 R3F 的 Canvas 组件共享所有相同的 props，但省略了 resize，因为 MotionCanvas 实现了自己的 resize 选项以与 Framer Motion 的布局动画同步。
还需要强制启用布局动画中的 3D 场景.
