iOS раскрывает/демаскирует изображение на основе пути?

Я пытаюсь анимировать рисунок этого конкретного изображения:

изображение

однако я понял, что пытаться нарисовать это с помощью 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];

}

person user1416564    schedule 18.11.2016    source источник


Ответы (1)


Вместо того, чтобы представлять нарисованный штрих одной кривой Безье, представьте его в виде закрашенной области между двумя путями Безье. Немного изменяя смещения контрольных точек, определяющих эти две кривые Безье, мы сможем добиться очень правдоподобного эффекта плавно изменяющейся ширины пера. https://code.tutsplus.com/tutorials/ios-sdk-advanced-freehand-drawing-techniques--mobile-15602

И массив точек, который вы можете получить из UIBezierPath с помощью этого ответа https://stackoverflow.com/a/5714872/2412568

person Pavel Rudkouski    schedule 18.11.2016
comment
Я полагаю, что мог бы попробовать это, однако я не думаю, что смогу получить это точно. Можно ли показать верхнее изображение на основе пути? - person user1416564; 21.11.2016