| Prop | Type | Required | Example | Value Range | Description |
|---|---|---|---|---|---|
| shapeType | string | true | - | SHAPE_RECT | SHAPE_ELLIPSE | SHAPE_STAR | SHAPE_POLYGON | SHAPE_PATH | The type of shape element, such as rectangle, circle, or polygon. |
| fill | string | object | true | #FFFFFF | - | The fill of the shape. Can be a hex color string (e.g., "#FFFFFF") or a gradient object with type "linear" or "radial", colorStops array, and start/end coordinates. |
| stroke | string | false | - | - | The stroke color of the shape, in hex format. |
| strokeWidth | number | false | - | >= 0 | The width of the stroke applied to the shape, in pixels. |
| keyframes | array | false | - | - | An array of keyframes defining animation states and transitions for the shape element. |
| view | object | true | - | - | The view settings for the shape element, including position, scale, and rotation. |
| transform | object | true | - | - | The transformation settings for the shape element, including skew and alpha. |
| paths | array | false | - | - | An array of path data for the shape element, used when shapeType is SHAPE_PATH. |
Note: SHAPE_RECT, SHAPE_ELLIPSE, SHAPE_STAR, and SHAPE_POLYGON are basic shapes, while SHAPE_PATH refers to a path shape constructed using Bézier curves.
| Prop | Type | Required | Example | Value Range | Description |
|---|---|---|---|---|---|
| x | number | true | 0 | >= 0 | The horizontal position of the shape element, in pixels. |
| y | number | true | 0 | >= 0 | The vertical position of the shape element, in pixels. |
| width | number | true | 100 | >= 0 | The width of the shape element, in pixels. |
| height | number | true | 100 | >= 0 | The height of the shape element, in pixels. |
| scaleX | number | true | 1 | > 0 | The horizontal scaling factor of the shape element. A value greater than 1 enlarges the element, while a value between 0 and 1 shrinks it. |
| scaleY | number | true | 1 | > 0 | The vertical scaling factor of the shape element. A value greater than 1 enlarges the element, while a value between 0 and 1 shrinks it. |
| rotation | number | true | 0 | >= 0 | The rotation angle of the shape element, in degrees. |
| Prop | Type | Required | Example | Value Range | Description |
|---|---|---|---|---|---|
| x | number | true | 0 | >= 0 | The horizontal position of the shape element, in pixels. |
| y | number | true | 0 | >= 0 | The vertical position of the shape element, in pixels. |
| anchorX | number | true | - | - | The x-coordinate of the anchor point relative to the shape element, in pixels. |
| anchorY | number | true | - | - | The y-coordinate of the anchor point relative to the shape element, in pixels. |
| rotation | number | true | 0 | >= 0 | The rotation angle of the shape element, in degrees. |
| scaleX | number | true | 1 | > 0 | The horizontal scaling factor of the shape element. A value greater than 1 enlarges the element, while a value between 0 and 1 shrinks it. |
| scaleY | number | true | 1 | > 0 | The vertical scaling factor of the shape element. A value greater than 1 enlarges the element, while a value between 0 and 1 shrinks it. |
| alpha | number | true | 1 | 0 - 1 | The transparency level of the shape element. 1 represents full opacity, and 0 represents full transparency. |
1
2{
3 "id": "ca6664b1-3ddf-4525-9137-1ad2440788bd",
4 "type": "Shape",
5 "start": 0,
6 "duration": 5,
7 "trackIndex": 1,
8 "x": 250.04168816332555,
9 "y": 5.833740234374999,
10 "blendMode": "normal",
11 "anchorX": 0,
12 "anchorY": 0,
13 "view": {
14 "width": 300,
15 "height": 300,
16 "x": 0,
17 "y": 0,
18 "scaleX": 1,
19 "scaleY": 1,
20 "rotation": 0,
21 "anchorX": 0,
22 "anchorY": 0
23 },
24 "rotation": 0,
25 "scaleX": 1,
26 "scaleY": 1,
27 "alpha": 1,
28 "skewX": 0,
29 "skewY": 0,
30 "transform": {
31 "x": 0,
32 "y": 0,
33 "anchorX": 0,
34 "anchorY": 0,
35 "rotation": 0,
36 "scaleX": 1,
37 "scaleY": 1,
38 "alpha": 1
39 },
40 "keyframes": [],
41 "shapeType": "SHAPE_RECT",
42 "fill": "#818cf8",
43 "stroke": "#4f46e5",
44 "strokeWidth": 5
45}
461
2{
3 "id": "9106fbc1-e753-43b1-bccc-5402bee3bd40",
4 "type": "Shape",
5 "start": 0,
6 "duration": 5,
7 "trackIndex": 3,
8 "x": 0,
9 "y": 0,
10 "blendMode": "normal",
11 "anchorX": 0,
12 "anchorY": 0,
13 "rotation": 0,
14 "scaleX": 1,
15 "scaleY": 1,
16 "alpha": 1,
17 "skewX": 0,
18 "skewY": 0,
19 "view": {
20 "x": 0,
21 "y": 0,
22 "scaleX": 1,
23 "scaleY": 1,
24 "rotation": 0,
25 "anchorX": 0,
26 "anchorY": 0
27 },
28 "transform": {
29 "x": 0,
30 "y": 0,
31 "anchorX": 0,
32 "anchorY": 0,
33 "rotation": 0,
34 "scaleX": 1,
35 "scaleY": 1,
36 "alpha": 1
37 },
38 "keyframes": [],
39 "shapeType": "SHAPE_PATH",
40 "fill": "#EAA0E3",
41 "fillAlpha": 1,
42 "fillType": 1,
43 "stroke": null,
44 "strokeWidth": 1,
45 "paths": [
46 {
47 "c": 1,
48 "v": [
49 [349.601, 146.124],
50 [345.894, 171.368],
51 [174.8, 268.894],
52 [135.70100000000002, 265.807],
53 [118.95800000000003, 262.498],
54 [31.56900000000003, 309.817],
55 [67.26600000000003, 242.913],
56 [0, 146.124],
57 [174.801, 23.354],
58 [349.601, 146.124]
59 ],
60 "i": [
61 [0, 0],
62 [2.4329999999999927, -8.150000000000006],
63 [84.21999999999997, 0],
64 [12.568999999999988, 2.0229999999999677],
65 [5.459999999999994, 1.2860000000000014],
66 [0, 0],
67 [-4.677000000000007, 19.093999999999994],
68 [0, 39.321],
69 [-96.54399999999998, 0],
70 [0, -67.804]
71 ],
72 "o": [
73 [0, 8.651999999999987],
74 [-16.567999999999984, 55.691],
75 [-13.445999999999998, 0],
76 [-5.693999999999988, -0.9119999999999777],
77 [-33.803, 35.70800000000003],
78 [21.046, -21.045999999999992],
79 [-40.93500000000003, -22.461000000000013],
80 [0, -67.804],
81 [96.54399999999998, 0],
82 [0, 0]
83 ]
84 }
85 ]
86 }
87