0

I'm attempting to animate drawing this particular image:

image

however, I realized that trying to draw this with a CGPath is not really possible. I figured the next solution would be to try and reveal this image based on a close approximation on it's path. So I managed to draw out a CGPath that's close to this image:

image

I was hoping someone could help me figure it out!

I do have the following code to at least stroke the path. I'm using SVGKit to help with path creation from an SVG File:

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

}
user1416564
  • 401
  • 5
  • 18

1 Answers1

1

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

And points array you can get from UIBezierPath with help of this answer https://stackoverflow.com/a/5714872/2412568

Community
  • 1
  • 1
Pavel Rudkouski
  • 156
  • 1
  • 4
  • I suppose I could give this a try, however, I don't think I'd be able to get that exactly. Would it be possible to reveal the top image based on a path? – user1416564 Nov 21 '16 at 01:43