跳到主要内容

定位

Motion Canvas 使用笛卡尔坐标系。其原点位于场景的中心,x 轴向右,y 轴向下。

变换​

所有节点都相对于其父节点定位。这意味着应用于父节点的任何变换也将应用于其子节点。每个节点的变换由以下属性组成:

Node.position​

API 文档

Node.scale​

API 文档

Node.rotation​

API 文档

绝对变换​

每个基本变换属性都有一个专用的辅助方法,在世界空间中运行。

例如,当我们需要匹配位于不同父节点中的两个节点的变换时,这会很有帮助。考虑以下示例:

const circleA = createRef<Node>();
const circleB = createRef<Node>();

view.add(
  <>
    <Node position={[200, 100]}>
      <Circle
        position={[0, 100]}
        ref={circleA}
        width={20}
        height={20}
        fill={'white'}
      />
    </Node>
    <Circle ref={circleB} width={10} height={10} fill={'red'} />
  </>,
);

circleB().absolutePosition(circleA().absolutePosition());

我们访问 circleA 的绝对位置(世界空间中的位置),并将其分配为 circleB 的绝对位置。这将使 circleB 移动到 circleA 的正上方。

请注意,我们仍然需要设置 circleB 的 absolutePosition,而不仅仅是 position。这似乎是多余的,因为 circleB 是场景视图的直接子节点。但场景视图的局部空间不等于世界空间。

下面列出了所有可用的世界空间属性:

Node.absolutePosition​

API 文档

Node.absoluteScale​

API 文档

Node.absoluteRotation​

API 文档

矩阵​

对于更高级的用途,节点公开了将向量从一个空间映射到另一个空间所需的所有矩阵。例如,可以使用 worldToParent 和 localToWorld 矩阵重新实现上述辅助属性:

// 获取绝对位置:
node.absolutePosition();
// 等同于:
Vector2.zero.transformAsPoint(node.localToWorld());

// 设置绝对位置:
node.absolutePosition(vector);
// 等同于:
node.position(vector.transformAsPoint(node.worldToParent()));

可用的矩阵包括:

Node.localToWorld​

API 文档

Node.worldToLocal​

API 文档

Node.localToParent​

API 文档

Node.parentToWorld​

API 文档

Node.worldToParent​

API 文档