Skip to main content

Positioning

Motion Canvas uses a Cartesian coordinate system. Its origin is located in the center of the scene, with the x-axis going to the right and the y-axis going down.

Transform​

All nodes are positioned relative to their parents. This means that any transformations applied to the parent are also applied to its children. The transform of each node consists of the following properties:

Node.position​

API 文档

Node.scale​

API 文档

Node.rotation​

API 文档

Absolute transform​

Each of the basic transform properties has a dedicated helper method that operates in world space.

This can be helpful, for instance, when we need to match the transforms of two nodes located within different parents. Consider the following example:

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());

We access the absolute position (position in world space) of circleA and assign it as the absolute position of circleB. This will move the circleB right on top of circleA.

Note that we still need to set the absolutePosition of circleB and not just the position. It may seem redundant since circleB is a direct child of the scene view. But the local space of the scene view is not the same as the world space.

All available world-space properties are listed below:

Node.absolutePosition​

API 文档

Node.absoluteScale​

API 文档

Node.absoluteRotation​

API 文档

Matrices​

For more advanced uses, nodes expose all the matrices necessary to map vectors from one space to another. For example, the helper properties described above could be reimplemented using the worldToParent and localToWorld matrices:

// getting the absolute position:
node.absolutePosition();
// same as:
Vector2.zero.transformAsPoint(node.localToWorld());

// setting the absolute position:
node.absolutePosition(vector);
// same as:
node.position(vector.transformAsPoint(node.worldToParent()));

The available matrices include:

Node.localToWorld​

API 文档

Node.worldToLocal​

API 文档

Node.localToParent​

API 文档

Node.parentToWorld​

API 文档

Node.worldToParent​

API 文档