轨道动画

本文档详细介绍轨道（Track）的动画系统，通过 NumEvent 实现轨道的各种变换效果。

事件类型

轨道支持以下类型的动画事件：

事件类型	说明
speedEvents	音符下落速度
xTransformEvents	X轴位移
yTransformEvents	Y轴位移
zTransformEvents	Z轴位移
xRotateEvents	X轴旋转
yRotateEvents	Y轴旋转
zRotateEvents	Z轴旋转
xScaleEvents	X轴缩放
yScaleEvents	Y轴缩放
zScaleEvents	Z轴缩放

NumEvent 结构

所有动画事件使用统一的 NumEvent 结构：

{
  "startBeat": 0,
  "endBeat": 4,
  "startValue": 1,
  "endValue": 2,
  "easingType": 0
}

字段	类型	说明
startBeat	double	起始拍数
endBeat	double	结束拍数
startValue	double	起始值
endValue	double	结束值
easingType	int	缓动函数ID，见下方缓动函数对照表

缓动函数 (Easings)

缓动函数控制数值变化的曲线，使用 ID（整数）表示。以下是所有支持的类型：

ID	名称	说明
0	LINEAR	线性变化
1	IN_SINE	正弦加速进入
2	OUT_SINE	正弦减速离开
3	IN_OUT_SINE	正弦加速进入、减速离开
4	IN_QUAD	二次加速进入
5	OUT_QUAD	二次减速离开
6	IN_OUT_QUAD	二次加速进入、减速离开
7	IN_CUBIC	三次加速进入
8	OUT_CUBIC	三次减速离开
9	IN_OUT_CUBIC	三次加速进入、减速离开
10	IN_QUART	四次加速进入
11	OUT_QUART	四次减速离开
12	IN_OUT_QUART	四次加速进入、减速离开
13	IN_QUINT	五次加速进入
14	OUT_QUINT	五次减速离开
15	IN_OUT_QUINT	五次加速进入、减速离开
16	IN_EXPO	指数加速进入
17	OUT_EXPO	指数减速离开
18	IN_OUT_EXPO	指数加速进入、减速离开
19	IN_CIRC	圆形加速进入
20	OUT_CIRC	圆形减速离开
21	IN_OUT_CIRC	圆形加速进入、减速离开
22	IN_BACK	回退加速进入
23	OUT_BACK	回退加速离开
24	IN_OUT_BACK	回退加速进入、离开
25	IN_ELASTIC	弹性加速进入
26	OUT_ELASTIC	弹性减速离开
27	IN_OUT_ELASTIC	弹性加速进入、减速离开
28	IN_BOUNCE	弹跳进入
29	OUT_BOUNCE	弹跳离开
30	IN_OUT_BOUNCE	弹跳进入、离开
31	IN_SQUARE	平方加速进入
32	OUT_SQUARE	平方减速离开
33	IN_OUT_SQUARE	平方加速进入、减速离开

使用示例

速度变化

在拍数 0 到 4 之间，将音符下落速度从 1.0 提升到 2.0：

{
  "speedEvents": [
    {
      "startBeat": 0,
      "endBeat": 4,
      "startValue": 1.0,
      "endValue": 2.0,
      "easingType": 5
    }
  ]
}

轨道旋转

在拍数 4 到 8 之间，将轨道沿 Y 轴旋转 180 度：

{
  "yRotateEvents": [
    {
      "startBeat": 4,
      "endBeat": 8,
      "startValue": 0,
      "endValue": 180,
      "easingType": 3
    }
  ]
}

轨道位移

在拍数 0 到 2 之间，将轨道沿 X 轴移动 5 格：

{
  "xTransformEvents": [
    {
      "startBeat": 0,
      "endBeat": 2,
      "startValue": 0,
      "endValue": 5,
      "easingType": 0
    }
  ]
}

缩放效果

在拍数 0 到 4 之间，将轨道 X 轴缩放从 1.0 变到 0.5：

{
  "xScaleEvents": [
    {
      "startBeat": 0,
      "endBeat": 4,
      "startValue": 1.0,
      "endValue": 0.5,
      "easingType": 22
    }
  ]
}

组合使用

可以同时使用多个事件类型来创造复杂的动画效果：

{
  "id": 0,
  "speedEvents": [
    {
      "startBeat": 0,
      "endBeat": 8,
      "startValue": 1.0,
      "endValue": 3.0,
      "easingType": 4
    }
  ],
  "yRotateEvents": [
    {
      "startBeat": 4,
      "endBeat": 12,
      "startValue": 0,
      "endValue": 360,
      "easingType": 0
    }
  ],
  "YTransformEvents": [
    {
      "startBeat": 0,
      "endBeat": 4,
      "startValue": 0,
      "endValue": 10,
      "easingType": 29
    }
  ],
  "notes": []
}

这个例子中，轨道会在前4拍向下移动，同时速度逐渐加快；在4到12拍之间旋转一圈。

事件类型​

NumEvent 结构​

缓动函数 (Easings)​

使用示例​

速度变化​

轨道旋转​

轨道位移​

缩放效果​

组合使用​