2016-11-18 58 views
0

我试图动画绘制这个特定的图像:iOS透露/揭露基于路径的图像?

image

但是,我意识到,试图用CGPath得出这是不是真的有可能。我想下一个解决方案是尝试并基于其路径上的近似值来显示此图像。所以我设法抽出一个CGPath这是接近这个图片:

image

我希望有人能帮助我看着办吧!

我确实有以下代码至少可以描述路径。我使用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]; 

} 

回答

1

,而不是代表我们的一个贝塞尔曲线画笔画,由两个贝塞尔路径之间的填充区域代表。通过略微改变定义这两条贝塞尔曲线的控制点的偏移量,我们将设法实现平滑变化的笔宽的非常合理的效果。 https://code.tutsplus.com/tutorials/ios-sdk-advanced-freehand-drawing-techniques--mobile-15602

而且点阵列可以从UIBezierPath得到这个答案https://stackoverflow.com/a/5714872/2412568

+0

我想我可以给这个尝试的帮助,但是,我不认为我能够得到恰好。是否有可能根据路径显示顶部图像? – user1416564