布局相机

LayoutCamera 和 LayoutOrthographicCamera 允许我们将 React Three Fiber 场景融入 Motion 的布局动画中.

用法

Motion 的布局动画中工作原理是通过 transform 样式。通过 transform 动画 width 和 height 的缺点是图像可能会失真。

当将 React Three Fiber 场景融入布局动画时，我们可以使用 Motion 的 LayoutCamera 和 LayoutOrthographicCamera 组件来预先扭曲 3D 场景，这样当 CSS transform 应用于宿主 canvas 元素时，在整个动画过程中看起来都是正确的。

要实现相机，我们首先需要将 @react-three/fiber 中的 Canvas 替换为这个MotionCanvas组件。然后，可以将相机组件添加到场景中的任何位置

import { MotionCanvas, LayoutCamera } from "framer-motion"

function Scene() {
  <MotionCanvas>
    <LayoutCamera />
    <Box />
  </MotionCanvas>
}

LayoutCamera 提供了一个正常的透视相机

而 LayoutOrthographicCamera 提供了一个正交视图

属性

在内部，LayoutCamera 渲染一个 <motion.perspectiveCamera />，而 LayoutOrthographicCamera 渲染一个 <motion.orthographicCamera /> 组件，因此它们可以接受所有常见的 React Three Fiber 属性，如 position 和 zoom，以及 motion 属性，如 initial 和 animate。

<LayoutCamera
  position={[0, 0, 5]}
  zoom={20}
  animate={{ zoom: 100 }}
  transition={{ duration: 2 }}
/>