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

问题描述 投票:0回答:4

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

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

我想到的是两种选择:

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

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

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

有什么技巧、例子吗?

谢谢。

iphone objective-c core-graphics quartz-graphics
4个回答
1
投票

制作一个

CAShapeLayer
,然后为其
path
设置动画。


0
投票

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

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


0
投票

贝塞尔曲线定义了一种基于不相关参数(通常称为 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) 处分割曲线。


-1
投票

这个问题是使用Javascript解决的。请参阅https://ehandwriting.net

© www.soinside.com 2019 - 2024. All rights reserved.