绘制路径动画的任何技巧?

时间:2009-07-18 14:14:38

标签: iphone objective-c core-graphics quartz-graphics

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

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

我想到的是两个选项:

  1. 丑陋 - 创建路径然后屏蔽它并移动蒙版以显示路径。 花费大量时间来创建和不可靠丑陋的黑客

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

  3. 某种方法可以沿离开路径的路径为圆圈设置动画效果?

  4. 任何技巧,例子?

    感谢。

3 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

正如上面的评论中所提到的,理想的API将允许您沿路径绘制任意段,但我还没有看到任何此类API。

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

答案 2 :(得分:0)

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

您可以在任意t处拆分贝塞尔曲线。这样做可以让你将曲线传递给系统进行绘制,或者在CAShapeLayer中使用。

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

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

// 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)处分割曲线。