Track
track 描述的是：一组中每个元素的某个属性，在一个周期内如何变化。它是一串关键帧：keyTimes 指定时间点，values 指定取值，easing 指定两个关键帧之间的值如何过渡。
{ "property": "scale", "keyTimes": [0, 0.5, 1], "values": [1, 0.4, 1], "easing": "easeInOut" }属性
| 属性 | 静止值 | 单位 | 含义 |
|---|---|---|---|
scale | 1 | 倍数 | 同时缩放宽度和高度 |
scaleX、scaleY | 1 | 倍数 | 缩放单个轴，与 scale 相乘 |
opacity | 1 | 0 到 1 | 与元素颜色的 alpha 相乘 |
rotate | 0 | 弧度 | 绕元素中心顺时针旋转 |
rotateX、rotateY | 0 | 弧度 | 绕水平轴或垂直轴做 3D 翻转（见透视） |
translateX、translateY | 0 | 方框单位 | 移动元素，1 表示整个方框边长，y 为负表示向上 |
strokeStart、strokeEnd | 0、1 | 0 到 1 | 裁剪 ring 形状的圆弧 |
没有 track 的属性保持静止值。同一个属性在 tracks 中最多出现一次，在 groupTracks 中也最多出现一次。
keyTimes 和 values
keyTimes 是周期中的时间点，从 0（开始）到 1（结束）。values 中每个 key time 对应一个值。规则如下：
keyTimes和values长度相同，至少为 2。keyTimes位于 [0, 1] 之内，且不递减。- 第一个 key time 之前取第一个值，最后一个 key time 之后取最后一个值。
要平滑循环，就从 0 开始、到 1 结束，并让最后一个值等于第一个值。
保持与跳变
连续两个相同的值会让数值保持不变；连续两个相同的 key time 会产生瞬间跳变。下面的方块先缩小、保持、放大、再保持，同时它的不透明度在周期中间从 1 跳到 0.4：
{
"$schema": "https://maitrungduc1410.github.io/loader-kit/schema/v1.json",
"schemaVersion": 1,
"name": "TrackSteps",
"duration": 2,
"layout": { "type": "single", "size": 0.6 },
"shape": { "type": "rect", "cornerRadius": 0.2 },
"tracks": [
{ "property": "scale", "keyTimes": [0, 0.25, 0.5, 0.75, 1], "values": [1, 0.5, 0.5, 1, 1], "easing": "easeInOut" },
{ "property": "opacity", "keyTimes": [0, 0.5, 0.5, 1], "values": [1, 1, 0.4, 0.4] }
]
}TrackSteps在 playground 中打开 缓动
缓动决定两个关键帧之间的运动节奏。默认是 linear。
| 名称 | 三次贝塞尔曲线 | 效果 |
|---|---|---|
linear | [0, 0, 1, 1] | 匀速 |
ease | [0.25, 0.1, 0.25, 1] | CSS 和 Core Animation 的默认值 |
easeIn | [0.42, 0, 1, 1] | 开始慢 |
easeOut | [0, 0, 0.58, 1] | 结束慢 |
easeInOut | [0.42, 0, 0.58, 1] | 开始和结束都慢 |
也可以传入三次贝塞尔曲线 [x1, y1, x2, y2]，和 CSS 的 cubic-bezier() 一样。x1 和 x2 必须在 [0, 1] 之内；y1 和 y2 可以超出这个范围，让数值冲过目标再回来（overshoot）。
"easing": "easeInOut"下面三个点分别使用 linear、easeInOut 和会冲过头的贝塞尔曲线 [0.34, 1.56, 0.64, 1]：
{
"$schema": "https://maitrungduc1410.github.io/loader-kit/schema/v1.json",
"schemaVersion": 1,
"name": "TrackEasing",
"duration": 1.6,
"parts": [
{
"layout": { "type": "single", "size": 0.2, "x": 0.18, "y": 0.2 },
"shape": { "type": "circle" },
"tracks": [
{ "property": "translateX", "keyTimes": [0, 0.5, 1], "values": [0, 0.64, 0], "easing": "linear" }
]
},
{
"layout": { "type": "single", "size": 0.2, "x": 0.18, "y": 0.5 },
"shape": { "type": "circle" },
"tracks": [
{ "property": "translateX", "keyTimes": [0, 0.5, 1], "values": [0, 0.64, 0], "easing": "easeInOut" }
]
},
{
"layout": { "type": "single", "size": 0.2, "x": 0.18, "y": 0.8 },
"shape": { "type": "circle" },
"tracks": [
{ "property": "translateX", "keyTimes": [0, 0.5, 1], "values": [0, 0.64, 0], "easing": [0.34, 1.56, 0.64, 1] }
]
}
]
}TrackEasing在 playground 中打开 每段单独设置缓动
有 n 个 key time 的 track 有 n - 1 段。easing 可以是一个值，作用于所有段；也可以是一个列表，每段恰好对应一个缓动。下面每个点用 easeOut 上升，用 easeIn 下落，然后静止：
{
"$schema": "https://maitrungduc1410.github.io/loader-kit/schema/v1.json",
"schemaVersion": 1,
"name": "TrackPerSegment",
"duration": 0.9,
"layout": { "type": "row", "count": 3, "gap": 0.12 },
"shape": { "type": "circle" },
"stagger": { "each": 0.12 },
"tracks": [
{
"property": "translateY",
"keyTimes": [0, 0.35, 0.7, 1],
"values": [0, -0.25, 0, 0],
"easing": ["easeOut", "easeIn", "linear"]
}
]
}TrackPerSegment在 playground 中打开 列表如何解读
如果 easing 的第一项是数字，整个列表就是一条贝塞尔曲线；否则就是每段一个缓动。所以 [0.42, 0, 0.58, 1] 是一条贝塞尔曲线，而 [[0.42, 0, 0.58, 1], "linear"] 表示两段。
位移
translateX 和 translateY 以方框为单位，把元素从布局位置上移开。两条 key time 相同的 track 可以组合出一条路径。这个点沿着菱形绕圈：
{
"$schema": "https://maitrungduc1410.github.io/loader-kit/schema/v1.json",
"schemaVersion": 1,
"name": "TrackTranslate",
"duration": 1.2,
"layout": { "type": "single", "size": 0.25 },
"shape": { "type": "circle" },
"tracks": [
{ "property": "translateX", "keyTimes": [0, 0.25, 0.5, 0.75, 1], "values": [-0.3, 0, 0.3, 0, -0.3], "easing": "easeInOut" },
{ "property": "translateY", "keyTimes": [0, 0.25, 0.5, 0.75, 1], "values": [0, -0.3, 0, 0.3, 0], "easing": "easeInOut" }
]
}TrackTranslate在 playground 中打开 解读时间线
<TrackTimeline> 画出每个元素在一个周期内的取值。这里是内置的 BallPulse：一条从 1 到 minScale 再回到 1 的 scale track，stagger 为 0.12 秒。
- 元素 0, 从 0.12 秒开始
- 元素 1, 从 0.24 秒开始
- 元素 2, 从 0.36 秒开始
精确规则
规范定义了 track 的采样方式，以及所有引擎共用的精确缓动算法。