How do I create kanji (Japanese letters) animations from SVG data in Objective-C?

Question

Created Mar ’16

Replies 0

Boosts 0

Participants 1

Hi everyone i'm trying to animate strokes of a kanji from SVG files. This SVG file is made from KanjiVG Site and, using the framework SVGKit, i've transformed the paths in CAShapeLayers. The problem is the animation. i'm able to animate every layer but there is two situation:

1) every layer make animation in the same time;

2)every layers are displayed and disappear when start the animation.

I want that all layer don't be shown and every level make its animation at its time.

here is the code that I use and actually there is the secon situation. but if at CAShaperLayer set strokeEnd = 0; every layer don't be shown, make the animation at its time but when it finish the lever disappear and start the next animation that desappear when finished and so on.

anyone have a solution?

Thank you very much

SVGKImage* newImage = [SVGKImage imageNamed:@"kanji.svg"];
    NSMutableArray *listLevel = [NSMutableArray new];
    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];
           
            int i = 0; float delay = 1.0;
           
            for (SVGPathElement *path in pathElements) {
                CALayer* layer = [newImage newCopyPositionedAbsoluteLayerWithIdentifier:path.identifier];
                if( [layer isKindOfClass:[CAShapeLayer class]] ) /
                {
                    CAShapeLayer* shapeLayer = (CAShapeLayer*) layer;
                    shapeLayer.strokeColor = [UIColor redColor].CGColor;
                    shapeLayer.fillColor = nil;
                    shapeLayer.lineWidth = 2.0;
                    shapeLayer.lineJoin = kCALineJoinBevel;
                    [self.view.layer addSublayer:shapeLayer];
               
                    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
                    pathAnimation.duration = 1.0;
                    pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
                    pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
                    pathAnimation.removedOnCompletion = NO;
                   
                    float baseTime = [shapeLayer convertTime:CACurrentMediaTime() fromLayer:nil];
                    pathAnimation.beginTime = baseTime + (delay * i++);
                    [shapeLayer addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
                   
                    [listLevel addObject:shapeLayer];
                    /
                    [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;
                    float baseTime = [shapeLayer convertTime:CACurrentMediaTime() fromLayer:nil];
                    pathAnimation.beginTime = baseTime + (delay * i++);
                    NSLog(@"i:%d",i);
                    NSLog(@"baseTime:%f",baseTime);
                    NSLog(@"beginTime:%f",pathAnimation.beginTime);
                   
                    [shapeLayer addAnimation:pathAnimation forKey:@"strokeEnd"];
                    [self.view.layer addSublayer:shapeLayer];
                    [CATransaction commit];
                     *///here there is a limit because I don't know why these loops give 60 levels when the kanji has only
                       //15 paths because has 15 stroke
                    if (i == 15) {
                        return;
                    }
               
                }
            }
        }
       
        NSLog(@"nantoka");
    }
    /
    for (int i = 0; i< 15; i++) {
        CAShapeLayer* shapeLayer = [listLevel objectAtIndex:i];
        [self.view.layer addSublayer:shapeLayer];
    }
     */

Boost