我正在尝试以动画方式绘制此特定图像:
但是，我意识到尝试使用 CGPath 绘制它是不可能的。我认为下一个解决方案是尝试根据其路径的近似值来显示此图像。所以我设法画出了一个接近这张图片的 CGPath:
我希望有人能帮我解决这个问题!
我确实有以下代码至少可以勾勒出路径。我正在使用 SVGKit 来帮助从 SVG 文件创建路径:
-(void)animateItAll{
self.thePath = [UIBezierPath bezierPathWithCGPath:[PocketSVG pathFromSVGFileNamed:@"SquiggleLine"]];
self.thePath.lineCapStyle = kCGLineCapRound;
self.thePath.lineJoinStyle = kCGLineJoinRound;
CAShapeLayer *shapeView = [[CAShapeLayer alloc] init];
[shapeView setPath:self.thePath.CGPath];
shapeView.fillColor = [[UIColor clearColor] CGColor];
shapeView.strokeColor = [[UIColor redColor] CGColor];
shapeView.lineWidth = 8.0f;
[[self.view layer] addSublayer: shapeView];
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 1.0;
pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
//pathAnimation.toValue = (id) self.thePath.CGPath;
[shapeView addAnimation:pathAnimation forKey:nil];
}
最佳答案
Instead of representing our drawn stroke with one Bezier curve, represent it by the filled region between two Bezier paths. By slightly varying the offsets of the control points that define these two Bezier curves, we shall manage to achieve a very plausible effect of a smoothly varying pen width. https://code.tutsplus.com/tutorials/ios-sdk-advanced-freehand-drawing-techniques--mobile-15602
在这个答案的帮助下，您可以从 UIBezierPath 获得点数组 https://stackoverflow.com/a/5714872/2412568
关于iOS 根据路径显示/取消屏蔽图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40673500/