有什么技巧可以绘制动画路径吗？

Question

有没有办法用石英模拟手写？

我的意思是，A、B、C 点之间有一条路径。 我希望路径从 A 点出来，然后以动画方式到达 B 点，然后到达 C 点。

我想到的是两种选择：

1. 丑陋 - 创建路径，然后遮罩它并移动遮罩以显示路径。 需要花费大量时间来创建不可靠且丑陋的黑客

2. 移动点 A、B、C 并在它们之间绘制线。

3. 有什么方法可以沿着离开轨迹的路径制作一个圆圈的动画吗？

有什么技巧、例子吗？

谢谢。

Answer 1

制作一个CAShapeLayer，然后为其路径设置动画。

Answer 2

正如上面评论中提到的，理想的 API 应该是可以让您沿着路径绘制任意线段的 API，但我还没有看到任何这样的 API。

另一种方法是将路径定义为谨慎的分段。 然后使用 NSBezierPath 的元素方法沿着路径行走，并在计时器上或使用 NSAnimation 绘制沿途的每个分段。 这种方法的问题是它不允许您使用任何任意路径。

Answer 3

贝塞尔曲线定义了一种基于不相关参数（通常称为 t）获取一组点的方法。 要渲染完整曲线，请评估 0 到 1 之间的 t，并从每个点到下一个点绘制一条线。 要渲染小于完整的曲线，请将 t 计算为从 0 到小于 1 的数字。 要动画绘制曲线，您可以评估点并在计时器上绘制线段。

您可以在任意 t 处分割贝塞尔曲线。 这样做将允许您将曲线传递给系统进行绘制，或在 CAShapeLayer 中使用。

手写字母通常是一系列贝塞尔曲线或贝塞尔样条线。 一条曲线的终点是下一条曲线的起点。 可以将 t 视为从零到样条曲线中的段数。 如果有 3 条曲线，则认为 t 从 0 到 3。当 t 在 1 和 2 之间时，您可以将整个第一段和第二段的一部分传递给系统进行绘制。

您可以阅读有关分割贝塞尔曲线的 DeCasteljau 算法。 下面是平面上三次贝塞尔曲线的代码示例：

// initial curve is four point x0,y0 , x1,y1 , x2,y2 , x3,y3
// x0,y0 and x3,y3 are the anchors
// point to split curve at is 0<t<1

nt    = 1.0 - t;
x01   = nt * x0   + t * x1;
y01   = nt * y0   + t * y1;
x12   = nt * x1   + t * x2;
y12   = nt * y1   + t * y2;
x23   = nt * x2   + t * x3;
y23   = nt * y2   + t * y3;
x012  = nt * x01  + t * x12;
y012  = nt * y01  + t * y12;
x123  = nt * x12  + t * x23;
y123  = nt * y12  + t * y23;
x0123 = nt * x012 + t * x123;
y0123 = nt * y012 + t * y123;

// now the new curve you want is
// x0,y0 , x01,y01 , x012,y012 , x0123,y0123

// the other half of the curve, discarded in your case, is
// x0123,y0123 , x123,y123 , x23,y23 , x3,y3

因此，给定一系列描述手写字符的曲线，您可以从 0 到 T 进行动画处理，其中 T 是曲线的数量。 计算 t=T-floor(T)，当 t 不为零时，用它在 n=floor(T) 处分割曲线。