Motion-Canvas 中 Vector2 信号数学运算的优化方案

Motion-Canvas 是一个强大的动画创作框架，它允许开发者通过代码创建复杂的动画效果。在动画制作过程中，经常需要对二维向量（Vector2）进行各种数学运算，如加法、减法等。然而，当前版本中对 Vector2 信号的操作方式存在一些不够直观和简洁的问题。

当前 Vector2 信号操作的问题

在 Motion-Canvas 中，当我们需要修改一个节点的位置时，通常需要获取当前位置，进行运算，然后再设置新位置。例如，要将节点相对当前位置移动 [200, 400] 的距离，代码会显得相当冗长：

yield* node.position(node.position().add([200, 400]), 0.6);

这种写法有几个缺点：

1. 需要显式获取当前值（position()）
2. 需要显式调用运算方法（add）
3. 需要将结果再次传递给 position 方法
4. 整体代码可读性不高

改进方案

为了解决这些问题，我们提出了以下改进方案：

1. 直接运算方法

为 Vector2 信号添加直接运算方法，如 add、subtract 等：

// 简洁的写法
yield* node.position.add([200, 400], 0.6);

这种方法既支持立即设置：

node.position.add([200, 400]);

也支持动画过渡：

yield* node.position.add([200, 400], 0.6);

2. 通用编辑方法

引入一个通用的 edit 方法，允许开发者通过回调函数自定义修改逻辑：

node.position.edit(current => current.add([200, 400]));

这种方法虽然看起来没有直接运算方法简洁，但它提供了极大的灵活性，可以支持任何自定义运算。

实际应用示例

假设我们需要将向量对齐到 20×20 的网格上，可以这样实现：

// 定义可重用的网格对齐函数
function snap(grid: PossibleVector2) {
  return (current: Vector2) => current.div(grid).floored.mul(grid);
}

// 使用
node.position.edit(snap(20));

技术优势

1. 代码简洁性：减少了获取当前值和重新赋值的冗余代码
2. 可读性：运算意图更加清晰明了
3. 灵活性：通过 edit 方法支持任意自定义运算
4. 一致性：保持了与原始 Vector2 类方法命名的一致性
5. 可扩展性：易于添加新的运算方法

实现原理

在底层实现上，这些方法实际上是语法糖，它们会自动处理：

1. 获取当前信号值
2. 应用指定的运算
3. 将结果设置回信号
4. 处理动画过渡（如果指定了持续时间）

这种封装使得开发者可以专注于动画逻辑，而不必关心信号获取和设置的具体细节。

总结

Motion-Canvas 中对 Vector2 信号运算的改进将显著提升开发体验，使动画代码更加简洁、直观和易于维护。通过引入直接运算方法和通用的编辑接口，开发者可以更高效地实现各种复杂的向量动画效果。这一改进特别适合需要频繁操作向量信号的动画场景，如角色移动、UI 元素动画等。