Hi everyone,
how ever I’m trying to make animation of SVG. Finally the framework pocketSVG is updated and now you can display every path.
but I’ve two question:
1)how can I display the animations correctly? thanks the framework I can transform the paths in CAShapeLayers and display every stroke. I add to every layer an animation and setting the time I can make a chain of animation. but there is a problem. when the app start every stroke is shown and when the animation start, only the layer animation disappear and start the animation. I want that every stroke be hidden and after the animation the stroke remain visible until every stroke animations is done. Like happen in ‘imiwa?’ app.
this is my code:
NSArray *array = [SVGBezierPath pathsFromSVGAtURL:[[NSBundle mainBundle]URLForResource: @"06ac3" withExtension:@"svg"]];
int index=0;
for(SVGBezierPath *path in array) {
// Create a layer for each path
CAShapeLayer *layer = [CAShapeLayer layer];
layer.path = path.CGPath;
// Set its display properties
layer.lineWidth = [[path.svgAttributes valueForKey:@"stroke-width"]floatValue];
layer.strokeColor = [UIColor blackColor].CGColor;
layer.fillColor = [UIColor clearColor].CGColor;
//layer.strokeColor = [path.svgAttributes[@"d"] ?: [UIColor blackColor] CGColor];
//layer.fillColor = [path.svgAttributes[@"fill"] ?: [UIColor redColor] CGColor];
// Add it to the layer hierarchy
[self.view.layer addSublayer:layer];
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 1.0;
pathAnimation.beginTime = CACurrentMediaTime() + pathAnimation.duration * index;
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
[layer addAnimation:pathAnimation forKey:@"strokeEnd"];
index++;
}`
Second problem: I would like use a particular font to draw the stroke how can I do it?
UPDATE:Playing with code I managed to solve the problem. now you se nothing until the animation start. but there is a little problem: this animation is only one animation. How can I make this animation in loop? When finish how can I restart it?
this is code:
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
NSArray *array = [SVGBezierPath pathsFromSVGAtURL:[[NSBundle mainBundle]URLForResource: @"06ac3" withExtension:@"svg"]];
_layersArray = [[NSMutableArray alloc]init];
int index=0;
for(SVGBezierPath *path in array) {
// Create a layer for each path
CAShapeLayer *layer = [CAShapeLayer layer];
layer.path = path.CGPath;
// Set its display properties
layer.lineWidth = [[path.svgAttributes valueForKey:@"stroke-width"]floatValue];
layer.strokeColor = [UIColor clearColor].CGColor;
layer.fillColor = [UIColor clearColor].CGColor;
//layer.strokeColor = [path.svgAttributes[@"d"] ?: [UIColor blackColor] CGColor];
//layer.fillColor = [path.svgAttributes[@"fill"] ?: [UIColor redColor] CGColor];
// Add it to the layer hierarchy
[self.view.layer addSublayer:layer];
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
[pathAnimation setDelegate:self];
pathAnimation.duration = 0.5;
pathAnimation.beginTime = CACurrentMediaTime() + pathAnimation.duration * index;
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
[layer addAnimation:pathAnimation forKey:@"strokeEnd"];
[_layersArray addObject:layer];
index++;
}
}
- (void)animationDidStart:(CAAnimation *)anim{
CAShapeLayer *layer = [_layersArray objectAtIndex:_index];
layer.strokeColor = [UIColor blackColor].CGColor;
NSLog(@"start animation");
//[self.view.layer addSublayer:layer];
_index++;
}
If you know a better way, let me know!
For the other problem, I’ve searched in internet but I’ve not found nothing. How can I draw strokes using a particolar font? how can I change the type of stroke (I’m not talking about the color or the size of stroke)?