iOS：如何为uibezierpath中的填充设置动画？

Posted 2023-03-11

【中文标题】iOS：如何为uibezierpath中的填充设置动画？

【英文标题】：iOS: how to animate the fill in uibezier path?

【发布时间】：2015-08-05 05:53:00

【问题描述】：

我正在开发一款儿童字母追踪应用程序 - 请参阅随附的屏幕截图。

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

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

怎么做？

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

任何指针/想法。

非常感谢。

【问题讨论】：

更新了我到目前为止的动画。但这不是我想要的。

【参考方案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];

【参考方案2】：

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

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

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

描边你在 1. 中创建的路径，用很粗的描边来填充。

【参考方案3】：

我找不到一种“内置”方式来根据需要为填充设置动画。但是，有一种内置方法可以为笔画设置动画：

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

希望对你有帮助。

【讨论】：

是的，我能够为笔画制作动画，附上 gif，但这不是我想要的。感谢您的帮助。

【参考方案4】：

加载您的bezierpath 后添加初始化动画：

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"];

【讨论】：

此动画将为路径的笔划设置动画。 OP 要求使用该解决方案无法实现的填充动画。此解决方案唯一可以解决所请求问题的情况是，如果字母的形状是简单的贝塞尔路径，没有要填充的空间。