Hi everyone,
I’m trying to pars an SVG file that represent an Kanji (japanese ideogram) using the framework SVGKit.
parsing the file I’m able to get path and create for each path an CAShapeLayer. I’m able to animate them but also If the animation is in loop for the animation start for every layer at the same time. The same thing occurs when I put every layer in array and I make an loop for, out from the main for. I don’t know why. I was looking for a solution but no ones work.
I want do animate only the first level and, when finish, start the animation of the second level and so on.
like a chain.
Anyone can give me a solution?
this is code
If you need the SVG file you can download from KanjiVG Site
please help me! I am very close to the goal I want to achieve but I miss this last thing.
Thank you very much
SVGKImage* newImage = [SVGKImage imageNamed:@"kanji.svg"];
SVGKLayeredImageView *imageview = [[SVGKLayeredImageView alloc]initWithSVGKImage:newImage];
//[self.view addSubview:[[SVGKLayeredImageView alloc]initWithSVGKImage:newImage]];
//NSDictionary *dict = [newImage dictionaryOfLayers];
NSMutableArray *listLevel = [NSMutableArray new];
CGMutablePathRef combinedPath = CGPathCreateMutable();
NSString* svgTag = @"svg";
NodeList* result = [newImage.DOMDocument getElementsByTagName:svgTag];
for(SVGSVGElement* domElement in result ){
NSString *groupTag = @"g";
NodeList *groupElements = [domElement getElementsByTagName:groupTag];
for (SVGGElement *svggElement in groupElements) {
NSString *pathTag = @"path";
NodeList *pathElements = [svggElement getElementsByTagName:pathTag];
for (SVGPathElement *path in pathElements) {
CALayer* layer = [newImage newCopyPositionedAbsoluteLayerWithIdentifier:path.identifier];
if( [layer isKindOfClass:[CAShapeLayer class]] ) // should ALWAYS be true, but just in case you write your code wrong...
{
CAShapeLayer* shapeLayer = (CAShapeLayer*) layer;
shapeLayer.strokeColor = [UIColor redColor].CGColor;
shapeLayer.lineWidth = 1;
CGPathAddPath(combinedPath, NULL, shapeLayer.path);
[listLevel addObject:shapeLayer];
//shapeLayer.path =combinedPath;
/*
layerShape.path=combinedPath;
[CATransaction begin];
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 1.5f;
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
pathAnimation.repeatCount = 1;
pathAnimation.autoreverses = NO;
[layerShape addAnimation:pathAnimation forKey:@"strokeEnd"];
[self.view.layer addSublayer: layerShape];
[CATransaction commit];
*/
/*
//setup the CAShapeLayer
myShapeLayer.strokeColor = [[UIColor blueColor] CGColor];
myShapeLayer.lineWidth = 5;
myShapeLayer.fillColor = [[UIColor yellowColor] CGColor];
//Display it!
[self.view.layer addSublayer:myShapeLayer];
//Animate path
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 1.5f;
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
pathAnimation.repeatCount = 10;
pathAnimation.autoreverses = YES;
[myShapeLayer addAnimation:pathAnimation forKey:@"strokeEnd"];
//Animate colorFill
CABasicAnimation *fillColorAnimation = [CABasicAnimation animationWithKeyPath:@"fillColor"];
fillColorAnimation.duration = 1.5f;
fillColorAnimation.fromValue = (id)[[UIColor clearColor] CGColor];
fillColorAnimation.toValue = (id)[[UIColor yellowColor] CGColor];
fillColorAnimation.repeatCount = 10;
fillColorAnimation.autoreverses = YES;
[myShapeLayer addAnimation:fillColorAnimation forKey:@"fillColor"];
*/
}
}
}
NSLog(@"nantoka");
}
/*
CGFloat timeOffset = 0;
//[CATransaction begin];
for(CAShapeLayer *layer in listLevel)
{
CABasicAnimation *a = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
a.fromValue = [NSNumber numberWithFloat:0.0f];
a.toValue = [NSNumber numberWithFloat:1.0f];
a.repeatCount = 1;
a.autoreverses = NO;
a.beginTime = CACurrentMediaTime() +timeOffset;
a.duration = 1.5f;
a.removedOnCompletion = NO;
[layer addAnimation:a forKey:@"Animation"];
[self.view.layer addSublayer:layer];
timeOffset += 1.5f;
}
*/
//[CATransaction commit];
CAShapeLayer *myShapeLayer = [listLevel objectAtIndex:0];
[CATransaction begin];
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 1.5f;
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
pathAnimation.beginTime = 0;
pathAnimation.repeatCount = 1;
pathAnimation.autoreverses = NO;
[myShapeLayer addAnimation:pathAnimation forKey:@"strokeAnimation"];
[self.view.layer addSublayer:myShapeLayer];
[CATransaction commit];
[CATransaction begin];
CAShapeLayer *myShapeLayerbis = [listLevel objectAtIndex:1];
CABasicAnimation *pathAnimationbis = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimationbis.duration = 1.5f;
pathAnimationbis.beginTime = 5.5f;
pathAnimationbis.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnimationbis.toValue = [NSNumber numberWithFloat:1.0f];
pathAnimationbis.repeatCount = 1;
pathAnimationbis.autoreverses = NO;
[myShapeLayerbis addAnimation:pathAnimationbis forKey:@"strokeAnimationBis"];
[self.view.layer addSublayer:myShapeLayerbis];
[CATransaction commit];