跳到主要内容

布局

布局允许您使用 Flexbox 排列节点。任何扩展 Layout 节点的节点都可以成为布局的一部分。这包括但不限于:Rect、Circle 和 Img。

布局根​

布局是一个可选功能,意味着需要启用它们。这是通过在我们希望成为布局根的节点上设置 layout 属性来完成的:

// ↓ layout root
<Rect layout>
  {/* ↓ layout child */}
  <Circle width={320} height={320} />
</Rect>

在上面的示例中,我们将 <Rect> 标记为布局根。这将导致其后代的位置和大小由 Flexbox 控制(在这种情况下,只有一个有效的后代:<Circle>)。布局根本身与其子节点的处理方式不同 - 其大小由 Flexbox 控制,但位置不受影响。

仅设置 layout 属性并不总是会使节点成为布局根。如果节点已经是布局的一部分,它将被像其余后代一样处理:

// ↓ layout root
<Rect layout>
  {/* ↓ layout child, NOT a layout root */}
  <Rect layout>
    {/* ↓ layout child */}
    <Circle width={320} height={320} />
  </Rect>
</Rect>

大小和偏移​

除了位置、旋转和比例之外,任何扩展 Layout 类的节点都有额外的 size 和 offset 属性:

Layout.size​

API 文档

Layout.offset​

API 文档

基本方向​

布局节点带有一组辅助属性,让您可以相对于其边缘/角定位它们。在下面的示例中,我们使用它们将两个正方形放置在灰色矩形的左侧和右侧。黄色正方形的位置使其右侧边缘与矩形左侧边缘位于同一位置。同时,红色正方形的位置使其左下角与矩形的右下角对齐。所有可能的方向包括:middle、top、bottom、left、right、topLeft、topRight、bottomLeft 和 bottomRight。

Click to preview animation

Open in Playground
import {makeScene2D, Rect} from '@motion-canvas/2d';
import {createRef} from '@motion-canvas/core';

export default makeScene2D(function* (view) {
  const rect = createRef<Rect>();

  view.add(
    <>
      <Rect
        ref={rect}
        width={200}
        height={100}
        rotation={-10}
        fill={'#333333'}
      />
      <Rect
        size={50}
        fill={'#e6a700'}
        rotation={rect().rotation}
        // 尝试将 "right" 更改为 "top"
        right={rect().left}
      />
      <Rect
        size={100}
        fill={'#e13238'}
        rotation={10}
        bottomLeft={rect().bottomRight}
      />
    </>,
  );

  yield* rect().rotation(10, 1).to(-10, 1);
});

Flexbox 配置​

CSS 中可用的大多数 flexbox 属性都可用作 Layout 属性。您可以查看此 Flexbox 指南 以更好地了解它们如何工作。下面列出了最有用的属性:

Layout.padding​

API 文档

Layout.margin​

API 文档

Layout.gap​

API 文档

Layout.direction​

API 文档

Layout.alignItems​

API 文档

Layout.justifyContent​

API 文档

组​

不扩展 Layout 类的节点(如 Node 本身)不受布局影响,被视为从未存在过。这使您可以对布局节点应用滤镜和变换,而不会影响层次结构。

从布局的角度来看,下面示例中的所有 <Rect> 都是兄弟节点:

<Layout direction={'column'} width={960} gap={40} layout>
  <Node opacity={0.1}>
    <Rect height={240} fill={'#ff6470'} />
    <Rect height={240} fill={'#ff6470'} />
  </Node>
  <Rect height={240} fill={'#ff6470'} />
</Layout>