布局动画

Motion 业界领先的布局动画使在任意两个布局之间（甚至在不同元素之间）创建动画变得容易。

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

<motion.div layout />

关于布局动画最酷的事情之一是，它们有效地使任何 CSS 属性都可过渡。您无法对 flex-direction 或 grid-template-columns 应用 CSS 过渡，但使用布局动画，您可以做到。 此外，动画使用超高效的 transform，因此运动将非常流畅！

~ Josh W. Comeau,React 的乐趣

这个小小的属性可以为以前无法制作动画的 CSS 值制作动画，例如在 flex-start 和 flex-end 之间切换 justify-content。

<motion.div
  layout
  style={{ justifyContent: isOn ? "flex-start" : "flex-end" }}
/>

或者通过使用 layoutId 属性，可以匹配两个元素并在它们之间创建动画，从而实现一些真正高级的动画。

<motion.li layoutId="item" />

它可以处理从微交互到整页过渡的任何事情。

用法

任何由于 React 重新渲染而发生的布局更改都可以制作动画。

<motion.div layout style={{ width: isOpen ? "80vw" : 0 }} />

请注意，CSS 更改应通过 style 立即发生，而不是 animate，因为 layout 将负责动画。

布局更改可以是任何内容，例如更改 width/height、网格列数、重新排序列表或添加/删除新项目

共享布局动画

当添加一个具有与现有组件匹配的 layoutId 属性的新组件时，它将自动从旧组件动画移出。

isSelected && <motion.div layoutId="underline" />

如果旧组件在新组件进入时仍然挂载，它们将自动从旧组件交叉淡入淡出到新组件。

当删除一个元素以动画返回其原始布局时，可以使用 AnimatePresence 使其保留在 DOM 中，直到其退出动画完成。

<AnimatePresence>
  {isOpen && <motion.div layoutId="modal" />}
</AnimatePresence>

设置过渡

布局动画可以使用以下方式自定义以下transition属性.

<motion.div layout transition={{ duration: 0.3 }} />

如果您想仅为布局动画设置过渡，则可以指定特定的 layout 过渡。

<motion.div
  layout
  animate={{ opacity: 0.5 }}
  transition={{
    default: { ease: "linear" },
    layout: { duration: 0.3 }
  }}
/>

当执行共享布局动画时，将使用为我们正在动画到的元素定义的过渡。

<>
  <motion.button
    layoutId="modal"
    onClick={() => setIsOpen(true)}
    // This transition will be used when the modal closes
    transition={{ type: "spring" }}
  >
    Open
  </motion.button>
  <AnimatePresence>
    {isOn && (
      <motion.dialog
        layoutId="modal"
        // This transition will be used when the modal opens
        transition={{ duration: 0.3 }}
      />
    )}
  </AnimatePresence>
</>

在可滚动元素内制作动画

为了在可滚动元素内正确地制作布局动画，我们需要为它们提供 layoutScroll 属性。

<motion.div layoutScroll style={{ overflow: "scroll" }} />

这使 Motion 可以在测量子元素时考虑元素的滚动偏移量。

在固定容器内制作动画

为了在固定元素内正确地制作布局动画，我们需要为它们提供 layoutRoot 属性。

<motion.div layoutRoot style={{ position: "fixed" }} />

这使 Motion 可以在测量子元素时考虑页面的滚动偏移量。

分组布局动画

当组件重新渲染且其布局已更改时，将触发布局动画。

function Accordion() {
  const [isOpen, setOpen] = useState(false)
  
  return (
    <motion.div
      layout
      style={{ height: isOpen ? "100px" : "500px" }}
      onClick={() => setOpen(!isOpen)}
    />
  )
}

但是，当我们有两个或多个组件不同时重新渲染，但确实相互影响布局时，会发生什么情况？

function List() {
  return (
    <>
      <Accordion />
      <Accordion />
    </>  
  )
}

当一个组件重新渲染时，出于性能原因，另一个组件将无法检测到其布局的变化。

我们可以通过将多个组件包装在 LayoutGroup 组件 中来同步多个组件之间的布局更改。

import { LayoutGroup } from "motion/react"

function List() {
  return (
    <LayoutGroup>
      <Accordion />
      <Accordion />
    </LayoutGroup>  
  )
}

当在任何分组的 motion 组件中检测到布局更改时，将在所有这些组件中触发布局动画。

缩放校正

所有布局动画都使用 transform 样式执行，从而实现流畅的帧率。

使用 transform 制作布局动画有时会在视觉上扭曲子元素。 为了纠正这种扭曲，元素的第一个子元素也可以被赋予 layout 属性。

打开这个沙箱并尝试从粉色圆点中删除 layout，看看这会产生什么不同

Transform 也可能扭曲 boxShadow 和 borderRadius。 motion 组件将自动纠正这两个属性的这种扭曲，只要它们被设置为 motion 值。

如果您不为这些值制作动画，最简单的方法是通过 style 设置它们。

<motion.div layout style={{ borderRadius: 20 }} />

故障排除

组件没有动画

确保组件未设置为 display: inline，因为浏览器不会对这些元素应用 transform。

确保组件在您期望布局动画开始时重新渲染。

SVG 布局动画已损坏

SVG 组件目前不支持布局动画。 SVG 没有布局系统，因此建议直接动画化它们的属性，例如 cx 等。

内容不希望地拉伸

这是使用 scale 动画化 width 和 height 的自然副作用。

通常，可以通过为这些元素提供 layout 动画来解决此问题，它们将被缩放校正。

<motion.section layout>
  <motion.img layout />
</motion.section>

某些元素，例如在不同纵横比之间更改的图像或文本，可能更适合使用 layout="position" 进行动画处理。

边框半径或阴影表现异常

动画化 scale 性能良好，但可能会扭曲某些样式，例如 border-radius 和 box-shadow。

Motion 会自动纠正这些属性上的缩放失真，但它们必须通过 style 在元素上设置。

<motion.div layout style={{ borderRadius: 20 }} />

边框在动画期间看起来被拉伸

具有 border 的元素在动画期间可能看起来被拉伸。 这有两个原因

1. 因为更改 border 会触发布局重新计算，所以它会抵消通过 transform 动画化的性能优势。 您不妨以经典方式动画化 width 和 height。

2. border 无法渲染小于 1px 的大小，这限制了 Motion 可以对此样式执行的缩放校正程度。

一种解决方法是用具有 padding 的父元素替换 border，该父元素充当 border。

<motion.div layout style={{ borderRadius: 10, padding: 5 }}>
  <motion.div layout style={{ borderRadius: 5 }} />
</motion.div>

技术阅读

对布局动画背后的技术细节感兴趣？ Nanda 在以下方面做得非常出色解释挑战使用交互式示例，通过 transform 动画化布局。 Motion 的创建者 Matt 做了一个在 Vercel 会议上的演讲关于很大程度上是最新的实现细节。

与 View Transitions API 的区别

越来越多的浏览器开始支持View Transitions API，这类似于 Motion 的布局动画。

View Transitions API 的优势

View Transitions 的两个主要优点是 它包含在浏览器中，并且具有独特的渲染系统。

文件大小

因为 View Transitions API 已经包含在浏览器中，所以实现非常简单的交叉淡入淡出动画非常便宜。

但是，CSS 复杂性可能会很快扩展。 Motion 的布局动画大约为 12kb，但从那里开始，更改过渡、添加弹簧、标记匹配非常便宜

渲染

虽然 Motion 会动画化页面上存在的元素，但 View Transitions API 做了一些非常独特的事情，即它拍摄上一页状态的图像快照，并将其与新页面状态的实时视图交叉淡入淡出。

对于共享元素，它也做同样的事情，拍摄小的图像快照，然后将这些快照与元素新状态的实时视图交叉淡入淡出。

这可以用来创建有趣的效果，例如全屏擦除，这实际上不在布局动画的范围内。Framer 的页面效果是使用 View Transitions API 构建的，并且它也广泛使用布局动画。 针对正确的工作选择正确的工具。

View Transitions API 的缺点

API 与布局动画相比存在很多缺点

• 不可中断：中途中断动画会将动画捕捉到结尾，然后再开始下一个动画。 这感觉非常不稳定。

• 阻止交互：动画元素覆盖在下面的“真实”页面上并阻止指针事件。 使事情感觉非常粘滞。

• 难以管理 ID：布局动画允许使用多个具有 layoutId 的元素，而如果未删除上一个元素，View Transitions 将会中断。

• 性能较差： View Transitions 拍摄实际屏幕截图并通过 width/height 而不是布局动画的 transform 进行动画处理。 当动画化许多元素时，这在可测量上性能较差。

• 不考虑滚动：如果在视图过渡期间页面滚动发生变化，元素将错误地动画化此增量。

• 没有相对动画： 如果嵌套元素具有 delay，则当其父元素动画移开时，它将被“遗留”，而 Motion 可以处理这种相对动画。

• 一次一个动画：View Transitions 动画化整个屏幕，这意味着将其与其他动画结合起来很困难，而其他视图动画则不可能。

总而言之，每个系统都提供不同的东西，并且每个系统可能更适合您的需求。 未来，Motion 也可能提供基于 View Transitions API 的 API。