콘텐츠로 이동

제너레이터, 셰이프, 텍스트

This content is for v0.4. Switch to the latest version for up-to-date documentation.

이 페이지는 문서 버전에 해당하는 project.v1.schema.json에서 자동 생성되며, 필드 설명은 원문(영어) 그대로입니다. 스키마는 형태만 검사합니다. 범위, 한도, 참조, 키프레임 순서는 엔진 검증 단계에서 검사합니다.

Dash

A dash pattern.

FieldTypeDescription
offsetAnimated_float

How far into the pattern the stroke starts.

Default: {"mode":"constant","value":0}

patternrequiredAnimated_float[]

Alternating dash and gap lengths, as fractions of the shorter side: one to MAX_DASH_ENTRIES non-negative entries, not all zero. An odd count repeats once more to pair up.

FillRule

Which regions of a path are inside it.

  • "nonzero" Where the outline winds around a point at all.
  • "evenodd" Where it winds around a point an odd number of times.

Generator

The picture of a generated source.

A generated picture has the canvas's size and aspect, like a source that fills the frame at scale 1. Positions are in its normalized space, (0, 0) top-left to (1, 1) bottom-right; lengths (radii, stroke widths) are fractions of its shorter side, so the picture is the same at any render resolution. A fill or text does not change over time (a clip animates it with its transform, effects, and masks); shapes and layouts may.

One of:

type: "fill"

Paint over the whole picture.

FieldTypeDescription
paintrequiredPaint

What covers the picture.

type: "shapes"

Shapes drawn from an ordered content tree, as an After Effects shape layer or a Lottie shape layer draws them. Unlike the other generators, its picture changes over time: every value in the tree may be keyframed, in the picture's time.

FieldTypeDescription
itemsrequiredShapeItem[]

The content tree, front first. See ShapeItem.

type: "text"

Text on a transparent picture, laid out and placed by its style as a caption track's cues are: its size and wrapping width fractions of the canvas, its anchor at style.position. The engine draws it with the fonts its host registered.

FieldTypeDescription
styleTextStyle

How it looks and where it lies. The font size is at most MAX_TEXT_GENERATOR_FONT_SIZE.

Default: {"align":"center","anchor":{"x":0.5,"y":1},"background":n…

textrequiredstring

The text; \n starts a line. Non-empty, at most MAX_TEXT_CONTENT_BYTES bytes.

type: "layout"

Boxes laid out by CSS flexbox around their text and shapes. Its picture changes over time when any value in the tree is keyframed, in the picture's time. The engine lays it out with the fonts it draws with. See LayoutNode.

FieldTypeDescription
rootrequiredLayoutNode

The root box: the whole picture.

GradientStop

One color of a gradient.

FieldTypeDescription
colorrequiredRgba

Color at that position.

offsetrequirednumber (float)

Position along the gradient, in 0..=1, not before the previous stop.

LineCap

How an open stroke ends.

  • "butt" Flat at the end point.
  • "round" A half circle past the end point.
  • "square" A half square past the end point.

LineJoin

How stroke segments meet at a vertex.

  • "miter" Extended edges meeting at a point, up to the miter limit.
  • "round" A circular arc.
  • "bevel" A straight cut across the corner.

Paint

A color or gradient.

Gradients interpolate between stops premultiplied, in linear light: the engine's working space, so a gradient between two colors passes through the physical mix of them, and a stop fading to transparent does not darken its neighbour.

A color (hex or object) is read as a solid paint of it; a paint is written back tagged.

One of:

type: "solid"

One color.

FieldTypeDescription
colorrequiredRgba

The color.

type: "linear_gradient"

Colors along the line from start to end, constant across it.

FieldTypeDescription
endrequiredVec2

Where offset 1 lies. Distinct from start.

spreadSpread

What lies beyond the first and last offsets.

Default: "pad"

startrequiredVec2

Where offset 0 lies.

stopsrequiredGradientStop[]

Two to MAX_GRADIENT_STOPS stops.

type: "radial_gradient"

Colors along the radius of a circle.

FieldTypeDescription
centerrequiredVec2

Where offset 0 lies.

radiusrequirednumber (float)

The distance of offset 1 from the centre, as a fraction of the picture's shorter side. Positive.

spreadSpread

What lies beyond the first and last offsets.

Default: "pad"

stopsrequiredGradientStop[]

Two to MAX_GRADIENT_STOPS stops.

type: "conic_gradient"

Colors around a point: offsets 0 to 1 are one clockwise turn.

FieldTypeDescription
angle_degreesnumber (float)

Where offset 0 lies, in degrees clockwise from straight up.

Default: 0

centerrequiredVec2

The point the gradient turns around.

stopsrequiredGradientStop[]

Two to MAX_GRADIENT_STOPS stops.

<a href="/ko/0.4/reference/project-schema/animation/#rgba">Rgba</a>

Path

One or more subpaths.

FieldTypeDescription
subpathsrequiredSubpath[]

The subpaths, at most MAX_PATH_SUBPATHS, with at most MAX_PATH_VERTICES vertices among them.

PathVertex

A path vertex and its tangents. The segment from vertex a to vertex b is the cubic Bezier through a.point, a.point + a.out_tangent, b.point + b.in_tangent, and b.point; zero tangents make it straight.

FieldTypeDescription
in_tangentVec2

The control point of the segment ending here, relative to point.

Default: {"x":0,"y":0}

out_tangentVec2

The control point of the segment starting here, relative to point.

Default: {"x":0,"y":0}

pointrequiredVec2

Where the vertex lies.

PolystarKind

What kind of figure a polystar is.

  • "star" Points joined by inner corners.
  • "polygon" Points joined by straight sides.

ShapeGeometry

A geometry alone, as a mask's outline is.

One of:

type: "rectangle"

A rectangle, optionally with rounded corners.

FieldTypeDescription
centerrequiredAnimatedPoint

Centre.

corner_radiusAnimated_float

Corner radius, as a fraction of the shorter side. Non-negative; a radius past half the rectangle is capped.

Default: {"mode":"constant","value":0}

rotation_degreesAnimated_float

Clockwise rotation about the centre, in degrees.

Default: {"mode":"constant","value":0}

sizerequiredAnimated_Vec2

Full width and height, before rotation, per axis: x a fraction of the picture's width, y of its height. Non-negative.

type: "ellipse"

An ellipse.

FieldTypeDescription
centerrequiredAnimatedPoint

Centre.

rotation_degreesAnimated_float

Clockwise rotation about the centre, in degrees.

Default: {"mode":"constant","value":0}

sizerequiredAnimated_Vec2

Full width and height, before rotation, per axis: x a fraction of the picture's width, y of its height. Non-negative.

type: "polystar"

A regular polygon or star.

FieldTypeDescription
centerrequiredAnimatedPoint

Centre.

inner_radiusAnimated_float

A star's distance of its inner corners from the centre. Non-negative.

Default: {"mode":"constant","value":0}

inner_roundnessAnimated_float

How round a star's inner corners are, in 0..=1.

Default: {"mode":"constant","value":0}

kindrequiredPolystarKind

A polygon or a star.

outer_radiusrequiredAnimated_float

Distance of the points from the centre, as a fraction of the shorter side. Non-negative.

outer_roundnessAnimated_float

How round the outer corners are: 0 sharp, 1 a smooth curve through them. In 0..=1.

Default: {"mode":"constant","value":0}

pointsrequiredAnimated_float

Number of points (corners of a polygon, tips of a star), from MIN_POLYSTAR_POINTS to MAX_POLYSTAR_POINTS. A fraction is dropped when drawn, as Lottie drops it, so an animated count changes the figure one whole point at a time.

rotation_degreesAnimated_float

Clockwise rotation about the centre, in degrees.

Default: {"mode":"constant","value":0}

type: "path"

A Bezier path.

FieldTypeDescription
pathrequiredAnimated_Path

The path.

ShapeItem

One entry of a shapes generator's content tree.

A group is read front to back. Geometry accumulates in its group; a fill or a stroke paints the geometry listed before it in the same group, nested groups before it included; a trim cuts that geometry and replaces it. A paint listed earlier is drawn on top of one listed later, as in After Effects and Lottie.

One of:

type: "group"

Items drawn together, through one transform and opacity. Their geometry also counts as the enclosing group's, for the paints and trims after the group.

FieldTypeDescription
itemsrequiredShapeItem[]

The group's items, front first.

transformShapeTransform

Where the group lies, and how opaque it is.

Default: {"anchor":{"mode":"constant","value":{"x":0,"y":0}},"opac…

type: "rectangle"

A rectangle, optionally with rounded corners.

FieldTypeDescription
centerrequiredAnimatedPoint

Centre.

corner_radiusAnimated_float

Corner radius, as a fraction of the shorter side. Non-negative; a radius past half the rectangle is capped.

Default: {"mode":"constant","value":0}

rotation_degreesAnimated_float

Clockwise rotation about the centre, in degrees.

Default: {"mode":"constant","value":0}

sizerequiredAnimated_Vec2

Full width and height, before rotation, per axis: x a fraction of the picture's width, y of its height. Non-negative.

type: "ellipse"

An ellipse.

FieldTypeDescription
centerrequiredAnimatedPoint

Centre.

rotation_degreesAnimated_float

Clockwise rotation about the centre, in degrees.

Default: {"mode":"constant","value":0}

sizerequiredAnimated_Vec2

Full width and height, before rotation, per axis: x a fraction of the picture's width, y of its height. Non-negative.

type: "polystar"

A regular polygon or star.

FieldTypeDescription
centerrequiredAnimatedPoint

Centre.

inner_radiusAnimated_float

A star's distance of its inner corners from the centre. Non-negative.

Default: {"mode":"constant","value":0}

inner_roundnessAnimated_float

How round a star's inner corners are, in 0..=1.

Default: {"mode":"constant","value":0}

kindrequiredPolystarKind

A polygon or a star.

outer_radiusrequiredAnimated_float

Distance of the points from the centre, as a fraction of the shorter side. Non-negative.

outer_roundnessAnimated_float

How round the outer corners are: 0 sharp, 1 a smooth curve through them. In 0..=1.

Default: {"mode":"constant","value":0}

pointsrequiredAnimated_float

Number of points (corners of a polygon, tips of a star), from MIN_POLYSTAR_POINTS to MAX_POLYSTAR_POINTS. A fraction is dropped when drawn, as Lottie drops it, so an animated count changes the figure one whole point at a time.

rotation_degreesAnimated_float

Clockwise rotation about the centre, in degrees.

Default: {"mode":"constant","value":0}

type: "path"

A Bezier path.

FieldTypeDescription
pathrequiredAnimated_Path

The path.

type: "fill"

Paints the inside of the geometry listed before it in its group, all of it as one compound path under rule. An open path is closed for it.

FieldTypeDescription
opacityAnimated_float

Opacity in 0..=1.

Default: {"mode":"constant","value":1}

paintrequiredAnimated_Paint

What covers it.

ruleFillRule

Which regions of the compound path are inside.

Default: "nonzero"

type: "stroke"

Strokes the geometry listed before it in its group.

FieldTypeDescription
capLineCap

How open ends look.

Default: "butt"

dashDash | null

Dashes, or a solid stroke when absent.

Default: null

joinLineJoin

How segments meet.

Default: "miter"

miter_limitnumber (float)

Longest a miter join reaches, as a multiple of half the width, before it is beveled. At least 1.

Default: 4

opacityAnimated_float

Opacity in 0..=1.

Default: {"mode":"constant","value":1}

paintrequiredAnimated_Paint

What covers the stroke.

widthrequiredAnimated_float

Full width, as a fraction of the shorter side. Non-negative; zero draws nothing.

type: "trim"

Keeps part of the geometry listed before it in its group, by length.

FieldTypeDescription
endrequiredAnimated_float

Where it ends, in 0..=1. Nothing is kept unless it is after start.

modeTrimMode

Whether the span is of all the geometry together or of each part.

Default: "together"

offsetAnimated_float

Turns the span is shifted by; it wraps around a closed path.

Default: {"mode":"constant","value":0}

startrequiredAnimated_float

Where the kept span starts, as a fraction of the length, in 0..=1.

ShapeMask

A shape that limits where a clip is visible.

Geometry is in the clip's source space, before its transform, so the mask moves with the clip: (0, 0) is the source's top-left corner and (1, 1) its bottom-right. Distances (feather, a rectangle's corner_radius, a polystar's radii) are fractions of that space's shorter side, so a mask covers the same part of the picture at any render resolution.

FieldTypeDescription
featherAnimated_float

How soft the edge is. Non-negative; zero is the outline's antialiased edge. The coverage is blurred by a Gaussian of standard deviation 0.3125 * feather, which spreads its 10 to 90 percent ramp over 0.8 * feather across the outline.

Default: {"mode":"constant","value":0}

fill_ruleFillRule

Which regions of the outline are inside it.

Default: "nonzero"

invertboolean

Whether the mask keeps the outside of the shape instead of its inside.

Default: false

modeMaskMode

How this mask combines with the ones before it.

Default: "add"

shaperequiredShapeGeometry

The shape's outline, as a shapes generator's geometry.

ShapeTransform

A group's placement: in pixel space, translate by position, rotate, scale, and translate by minus anchor, so anchor lands on position. The default leaves its items where they are.

FieldTypeDescription
anchorAnimated_Vec2

The point of the items that is placed at position.

Default: {"mode":"constant","value":{"x":0,"y":0}}

opacityAnimated_float

Opacity of the group as a whole, in 0..=1: overlapping items are composited first and faded together.

Default: {"mode":"constant","value":1}

positionAnimatedPoint

Where anchor is placed.

Default: {"mode":"constant","value":{"x":0,"y":0}}

rotation_degreesAnimated_float

Clockwise rotation, in degrees.

Default: {"mode":"constant","value":0}

scaleAnimated_Vec2

Per-axis scale; 1 leaves the items unscaled. Stroke widths scale with it.

Default: {"mode":"constant","value":{"x":1,"y":1}}

Spread

What a linear or radial gradient shows outside its first and last stops.

  • "pad" The end colors continue.
  • "repeat" The gradient starts again.
  • "reflect" The gradient runs back and forth.

Subpath

A run of vertices joined by cubic Bezier segments.

FieldTypeDescription
closedboolean

Whether a segment joins the last vertex back to the first.

Default: false

verticesrequiredPathVertex[]

The vertices, in order.

TextAlign

How lines of text align within it.

  • "start" Left.
  • "center" Centred.
  • "end" Right.

TextBackground

A box behind each line of text.

FieldTypeDescription
colorrequiredRgba

Box color.

paddingnumber (float)

Space between the text and the box edge, as a fraction of the font size, in [0, 2].

Default: 0

TextOutline

A band around the glyphs, drawn behind them.

FieldTypeDescription
colorrequiredRgba

Band color.

widthrequirednumber (float)

Band width as a fraction of the font size, in (0, 0.5].

TextStyle

How text looks and where it lies: a caption track's cues, or a text Generator.

Sizes are resolution-independent: the font size is a fraction of the canvas's shorter side, as every other length is, the wrapping width a fraction of the canvas width, and the outline and background padding fractions of the font size. The engine draws with the fonts its host registered: those of font_family first, then the rest in their fallback order.

FieldTypeDescription
alignTextAlign

How lines align within the text.

Default: "center"

anchorVec2

The point of the text, background included, placed at position: (0.5, 1) is its bottom centre.

Default: {"x":0.5,"y":1}

backgroundTextBackground | null

A box behind each line.

Default: null

colorRgba

Text color.

Default: {"alpha":1,"blue":1,"green":1,"red":1}

font_familystring | null

The family the text draws in, as the font's own name table gives it (typographic family, else family), matched without regard to ASCII case. Glyphs its fonts lack, and a family no registered font has, draw from the other fonts in fallback order. None draws from the fallback order alone. Non-empty, at most MAX_FONT_FAMILY_BYTES bytes.

font_sizenumber (float)

Font size as a fraction of the canvas's shorter side: positive, at most MAX_CAPTION_FONT_SIZE on a caption track and MAX_TEXT_GENERATOR_FONT_SIZE in a text generator.

Default: 0.05

font_weightinteger (uint16)

The weight, in [1, 1000], a family's faces are matched by, as CSS Fonts 4 matches font-weight; a variable face draws at it, clamped to its wght axis. No face is emboldened: a weight the family lacks draws its nearest face.

Default: 400

letter_spacingnumber (float)

Space after each character, as a fraction of the font size, in [-0.5, 1], as CSS letter-spacing adds it: none after a line's last character, and none after a character of a cursive script (Arabic, say), whose joins it would break. Not zero, it turns optional ligatures off.

Default: 0

line_heightnumber (float)

Baseline-to-baseline distance in font sizes, in [0.5, 3]. Each line's em box, 0.8 of a font size above its baseline and 0.2 below, is centred in its line when the line is taller than an em.

Default: 1.2

max_widthnumber (float)

Width text wraps at, as a fraction of the canvas width, in (0, 1].

Default: 0.9

outlineTextOutline | null

A band around the glyphs.

Default: null

positionVec2

Where on the canvas the text's anchor lies, (0, 0) top-left to (1, 1) bottom-right.

Default: {"x":0.5,"y":0.92}

TrimMode

What a trim measures.

  • "together" One span over the length of every subpath end to end, in order.
  • "individually" A span of each subpath alone.