Helpers
Transform
Layer transform
Composition Diagram for Transform
Attribute | Type | Title | Description |
---|---|---|---|
a |
Position |
Anchor Point |
Anchor point: a position (relative to its parent) around which transformations are applied (ie: center for rotation / scale) |
p |
Splittable Position |
Position |
Position / Translation |
r |
Scalar |
Rotation |
Rotation in degrees, clockwise |
s |
Vector |
Scale |
Scale factor, |
o |
Scalar |
Opacity |
Opacity |
sk |
Scalar |
Skew |
Skew amount as an angle in degrees |
sa |
Scalar |
Skew Axis |
Direction along which skew is applied, in degrees ( |
To make the anchor point properly line up with the center of location, p
and a
should have the same value.
This example allows you to tweak transform attributes and see how the shape changes.
The anchor point is highlighted with an orange dot.
256 | |
256 | |
256 | |
256 | |
100 | |
100 | |
0 | |
0 | |
0 | |
100 |
Transforms the parent's coordinate system.
When calculating the final transform, properties MUST be applied as follows:
- Translate by
- Scale by
- If :
- Rotate by
- Skew x by
- Rotate by
- Rotate by
- Translate by
Steps that have no effect MAY be skipped.
Assuming a transform matrix with the following layout, with the labels equivalent to the CSS matrix transform:
The final transform is given by chaining transform matrices for each transform step:
Note that if the transform matrix is transposed compared to the above:
The operations need to be chained using right multiplication instead of left multiplication.
Visual Object
Composition Diagram for Visual Object
Attribute | Type | Title | Description |
---|---|---|---|
nm |
string |
Name |
Human readable name, as seen from editors and the like |
Marker
Defines named portions of the composition.
Attribute | Type | Title | Description |
---|---|---|---|
cm |
string |
Comment |
Comment |
tm |
number |
Time |
Time |
dr |
number |
Duration |
Duration |
Slots
Slots are a way to define a property value once and use the value in multiple
properties. Slot definitions are in a dictionary, the slot definition key is the
key that is used to match all properties with a sid
field to the same key for
replacement.
Slot
Defines a property value that will be set to all matched properties
Slotabble Object
Object that may have its value replaced with a slot value
Composition Diagram for Slottable Object
Attribute | Type | Title | Description |
---|---|---|---|
sid |
string |
Slot Id |
Identifier to look up the slot |
Slotabble Property
Property that may have its value replaced with a slot value
Composition Diagram for Slottable Property
Attribute | Type | Title | Description |
---|---|---|---|
sid |
string |
Slot Id |
Identifier to look up the slot |
100 | |
100 | |
0 | |
100 |
Mask
Mask for layer content.
Attribute | Type | Title | Description |
---|---|---|---|
mode |
Mask Mode |
Mode |
Mode |
o |
Scalar |
Opacity |
Mask opacity, as a percentage [0..100]. |
pt |
Bezier |
Shape |
Mask shape |
Masks provide single-channel coverage information (alpha channel) that modulates the layer's content.
When multiple masks are specified, they are combined (blended) into a single coverage buffer,
in order, based on the mode
operator.
Masks are specified in terms of a Path
plus additional properties. For a given mask path,
the coverage is inside the path, outside the path, and possibly in the
range along the path edges (anti-aliasing).
The coverage for a given Mask
is
and the cumulative coverage for all masks is
where the product operator is determined by mode
.
Then the final layer coverage (alpha channel) is
Example
100 |