iOS：如何在uibezier路径中填充填充动画？

Question

我正在制作儿童信件追踪应用程序 - 请参阅随附的屏幕截图。

我能够通过使用由字体字形标识的bezier路径来显示字母，并允许在bezier路径内写入触摸。

现在，我想添加一个帮助动画，以便它显示如何从头到尾编写这封信。

怎么做？

考虑我们显示“A”，我想显示动画节目如何为孩子们写“A”。

任何指示/想法。

非常感谢。

Answer 1

我将这个动画用于我的应用程序。创建一个圆形进度条，顺时针填充点

CABasicAnimation *pathAnim = [CABasicAnimation animationWithKeyPath: @"path"];
pathAnim.toValue = (id)newPath.CGPath;

// -- initialize CAAnimation group with duration of 0.2secs and beginTime will begin after another.
CAAnimationGroup *anims = [CAAnimationGroup animation];
anims.animations = [NSArray arrayWithObjects:pathAnim, nil];
anims.removedOnCompletion = NO;
anims.duration = 0.2f;
anims.beginTime = CACurrentMediaTime() + anims.duration*i;
anims.fillMode  = kCAFillModeForwards;
[anims setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];

[progressLayer addAnimation:anims forKey:nil];

Answer 2

我无法找到内置的＆＃34;根据需要为填充设置动画的方法。然而，有一种内置的方式来设置笔画动画：

使用UIView并CAShapeLayer支持它。 CAShapeLayer具有path属性。然后，您可以将动画应用于图层的strokeStart和/或strokeEnd属性。

希望它有所帮助。

Answer 3

没有直接的方法可以做到这一点。我想以下是最容易实现的：

1. 为每个字符创建一个路径，用于跟踪笔划的写入方式。如果字母表中的字符数量有限，则可以手动执行此操作。您可以实现类似的操作来捕获路径：http://code.tutsplus.com/tutorials/smooth-freehand-drawing-on-ios--mobile-13164

2. 使用当前路径（照片中的红色）作为剪贴蒙版，以使填充不会溢出。

3. 使用非常粗的笔划描绘您在1中创建的路径以进行填充。

Answer 4

加载bezierpath之后添加init动画：

CAKeyframeAnimation *shapeKeyframeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"strokeEnd"];
shapeKeyframeAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
shapeKeyframeAnimation.keyTimes = @[@0.0f, @0.6f, @1.0f];
shapeKeyframeAnimation.values =  @[@0.0f, @1.0f, @1.0f];
shapeKeyframeAnimation.duration = 4.0f;
shapeKeyframeAnimation.repeatCount = CGFLOAT_MAX;

然后将其添加到您的形状图层：

[shapeLayer addAnimation:_loadingKeyframeAnimation forKey:@"stoke"];