# 缓动
缓动是制作动画、提升谱面视觉效果的核心之一，ZAff 提供了一系列基本缓动函数，以及创建自定义缓动曲线的方法。按照以下方式导入：
import { Easing } from "zaff";
+# 基本曲线
Easing 对象上挂载了 4 个游戏内原生支持的缓动曲线，与音弧的四种缓动类型一一对应，分别为：
bezier()，对应blinear()，对应ssin()，对应sicos()，对应so
这些函数表示取值范围和值域均为 [0, 1] 的曲线，在音弧中表示 timing 和 x / y 坐标的对应关系。考察 Arc.at() 方法的实现：
function at(t: number): Point
+{
+ const percent = (t - this.time) / (this.timeEnd - this.time);
+ const [cx, cy] = getComplexCurveByEasing(this.easing);
+
+ return {
+ x: this.x1 + cx(percent) * (this.x2 - this.x1),
+ y: this.y1 + cy(percent) * (this.y2 - this.y1)
+ };
+}
+不难发现，该方法通过向缓动曲线中传入指定 timing 在总时长上的占比，获取 x / y 坐标的百分比偏移，最后计算得出音弧在该点的坐标。
至于获取缓动曲线的 getComplexCurveByEasing() 方法，将在后面的小节中介绍。
# 自定义曲线
游戏中的 b 类音弧，实际上是一条三阶贝塞尔曲线，它的两个控制点分别为 (1/3, 0) 和 (2/3, 1)。在 ZAff 中，Easing 对象提供了 createBezier() 方法，供我们创建自定义的缓动曲线。该方法默认起点和终点分别为 (0, 0) 和 (1, 1)，传入的四个参数分别为两个控制点的 xy 坐标。示例如下：
const curve = Easing.createBezier(0.11, 0.19, 0.23, 0.66);
+console.log(curve(0.5));
+// 0.6994330827275067
+可以在 这个页面 (opens new window) 测试三阶贝塞尔曲线。
# 缓动类型
Arc.easing 是一个字符串类型的属性，它的可选值与游戏内音弧的缓动类型相同。在 Easing 对象上的 getComplexCurveByEasing() 方法用于从原生缓动类型获取对应的曲线，观察下面这个例子：
const [cx, cy] = Easing.getComplexCurveByEasing("siso");
+
+console.log(cx === Easing.sin); // true
+console.log(cy === Easing.cos); // true
+容易看出，siso 即 x 轴上为 sin 曲线、y 轴上为 cos 曲线的缓动类型。
另外还有一个 getCurveByEasing() 方法，用于从单轴的缓动类型获取对应的曲线。使用方法类似，返回一个 EasingFunction 对象。
# 切分
# Arc
Arc.cut() 方法还可传入一个配置对象，属性如下：
| 属性 | 类型 | 说明 |
|---|---|---|
| start | number | 起始时间 |
| end | number | 结束时间 |
| ender | boolean | 是否生成两端的音弧 |
| cx | EasingFunction | x 轴缓动曲线 |
| cy | EasingFunction | y 轴缓动曲线 |
const arc = Aff.arc(0, 2333, 0.00, 1.00, "s", 0.00, 1.00, 0, "none", false);
+const tg = arc.cut(9, {
+ start: 810,
+ end: 1919,
+ ender: true,
+ cx: Easing.sin,
+ cy: Easing.bezier
+});
+此时传入的曲线将覆盖音弧原来的缓动类型，如果参数缺省则保留。
# Timing
+ ← + + 基础 +