布局
布局负责把元素摆进方框。它为每个元素确定中心点、宽度和高度；对于开启了 orient 的圆环，还会确定旋转角度。所有长度都是方框边长的比例，方框在两个轴上的范围都是 0 到 1，y 轴向下。
选择一种布局类型并修改字段。带编号的小方块就是各个元素，按索引顺序排列。
"layout": {"type":"row","count":3,"gap":0.05}| 布局 | 字段（默认值） | 元素 |
|---|---|---|
single | size（1）、width（size）、height（size）、x（0.5）、y（0.5） | 一个元素，中心位于 (x, y) |
stack | count，以及与 single 相同的字段 | count 个元素叠在同一位置 |
row | count、gap、itemWidth、itemHeight | 水平一行，垂直居中 |
grid | columns、rows、gap | 占满方框的网格，逐行排列 |
ring | count、itemSize、itemWidth、itemHeight、startAngle（0）、orient（false） | 沿圆周顺时针排列的元素 |
数量类字段（count、columns、rows）会四舍五入取整，且最小为 1。任何数字都可以是 $param。
single
只有一个元素。不设置字段时，它占满整个方框。用 width 和 height 做非正方形的元素，用 x 和 y 移动它的中心。
{
"$schema": "https://maitrungduc1410.github.io/loader-kit/schema/v1.json",
"schemaVersion": 1,
"name": "LayoutSingle",
"duration": 1.2,
"layout": { "type": "single", "width": 0.7, "height": 0.35 },
"shape": { "type": "rect", "cornerRadius": 0.3 },
"tracks": [
{ "property": "rotate", "keyTimes": [0, 1], "values": [0, 3.141592654], "easing": "easeInOut" }
]
}LayoutSingle在 playground 中打开 stack
count 个元素叠放在一起，位置完全相同。stack 适合配合 stagger 使用，让每个副本处于周期的不同位置。这个涟漪效果用了负的 stagger 偏移，所以从第一帧起，三个圆就已经错开分布在周期中，而不是同时开始（见 Stagger）。
{
"$schema": "https://maitrungduc1410.github.io/loader-kit/schema/v1.json",
"schemaVersion": 1,
"name": "LayoutStack",
"duration": 1.5,
"layout": { "type": "stack", "count": 3 },
"shape": { "type": "circle" },
"stagger": [0, -0.5, -1],
"tracks": [
{ "property": "scale", "keyTimes": [0, 1], "values": [0, 1], "easing": "easeOut" },
{ "property": "opacity", "keyTimes": [0, 0.1, 1], "values": [0, 0.8, 0] }
]
}LayoutStack在 playground 中打开 row
count 个元素并排，相邻两个元素之间间隔 gap。垂直中心固定为 0.5。
- 不设置
itemWidth时，元素和间距会占满方框宽度：每个元素宽(1 - gap × (count - 1)) / count。 - 设置了
itemWidth时，元素使用这个宽度，整行居中。 itemHeight默认等于元素宽度，所以元素是正方形。要做竖条时再设置它。
{
"$schema": "https://maitrungduc1410.github.io/loader-kit/schema/v1.json",
"schemaVersion": 1,
"name": "LayoutRow",
"duration": 1,
"layout": { "type": "row", "count": 5, "gap": 0.08, "itemHeight": 0.7 },
"shape": { "type": "line" },
"stagger": { "each": 0.1 },
"tracks": [
{ "property": "scaleY", "keyTimes": [0, 0.5, 1], "values": [1, 0.35, 1], "easing": "easeInOut" }
]
}LayoutRow在 playground 中打开 grid
columns × rows 个元素占满方框，从左上角开始逐行编号。gap 是相邻两个格子之间的间距，横向和纵向相同。
这个示例用了一个 stagger 数组（每个元素一个偏移量），让波浪从左下角开始。
{
"$schema": "https://maitrungduc1410.github.io/loader-kit/schema/v1.json",
"schemaVersion": 1,
"name": "LayoutGrid",
"duration": 1.2,
"layout": { "type": "grid", "columns": 3, "rows": 3, "gap": 0.1 },
"shape": { "type": "rect", "cornerRadius": 0.2 },
"stagger": [0.2, 0.3, 0.4, 0.1, 0.2, 0.3, 0, 0.1, 0.2],
"tracks": [
{ "property": "scale", "keyTimes": [0, 0.35, 0.7, 1], "values": [1, 0, 1, 1], "easing": "easeInOut" }
]
}LayoutGrid在 playground 中打开 ring
count 个元素沿圆周均匀分布。元素 0 位于 startAngle（0 表示圆心正右方），其余元素按顺时针排列。半径为 0.5 - itemSize / 2，所以元素的外缘刚好碰到方框。
{
"$schema": "https://maitrungduc1410.github.io/loader-kit/schema/v1.json",
"schemaVersion": 1,
"name": "LayoutRing",
"duration": 1,
"layout": { "type": "ring", "count": 8, "itemSize": 0.2 },
"shape": { "type": "circle" },
"stagger": { "each": 0.125 },
"tracks": [
{ "property": "opacity", "keyTimes": [0, 1], "values": [1, 0.15] },
{ "property": "scale", "keyTimes": [0, 1], "values": [1, 0.5] }
]
}LayoutRing在 playground 中打开 元素朝向
itemWidth 和 itemHeight 改变元素尺寸，但不影响半径，半径仍由 itemSize 决定。设置 orient: true 后，每个元素都会旋转，让顶部朝外、背离圆心。配合 line 形状，就是经典的 spinner。
{
"$schema": "https://maitrungduc1410.github.io/loader-kit/schema/v1.json",
"schemaVersion": 1,
"name": "LayoutRingOrient",
"duration": 1.2,
"layout": { "type": "ring", "count": 12, "itemSize": 0.26, "itemWidth": 0.07, "orient": true },
"shape": { "type": "line" },
"stagger": { "each": 0.1 },
"tracks": [
{ "property": "opacity", "keyTimes": [0, 1], "values": [1, 0.15] }
]
}LayoutRingOrient在 playground 中打开 元素顺序与颜色
元素索引遵循布局顺序：row 从左到右，grid 逐行，ring 从 startAngle 开始顺时针。stagger 数组、durations 和 colors 设置用的都是这些索引。
精确公式
每种布局的精确公式见规范。