iosobjective-ccabasicanimationcatransformlayer

how to animation a label on circular path in iOS?


I am stuck at animating the uiLabel in my view.

Actually I just want to animate my label/Text on a circular path. I have searched a lot over internet but couldn't find any good tutorial or example that is doing something like my problem. I have done CAShapeLayer (circle) increasing from 0 to its maximum value....

Similarly I want that my label/text start moving from initial point in circular path and come back to its initial point after completing one circle.

Hope I have explained my problem quite precisely ... still if there is anything missing or non-understandable. please ask me.

Thanks in anticipation.


Solution

  • Hi iOmi i just google it and i found Best Question similar like your This

    Bellow it's a jin's answer Hope its helps you

            CAShapeLayer* circle = [[CAShapeLayer alloc] init];
            CGMutablePathRef path = CGPathCreateMutable();
            CGRect textRect = CGRectMake(self.view.bounds.size.width/4, (self.view.bounds.size.height-self.view.bounds.size.width/2)/2, self.view.bounds.size.width/2, self.bounds.size.width/2);
            float midX = CGRectGetMidX(textRect);
            float midY = CGRectGetMidY(textRect);
            CGAffineTransform t = CGAffineTransformConcat(
                                    CGAffineTransformConcat(
                                        CGAffineTransformMakeTranslation(-midX, -midY), 
                                        CGAffineTransformMakeRotation(-1.57079633/0.99)), 
                                    CGAffineTransformMakeTranslation(midX, midY));
            CGPathAddEllipseInRect(path, &t, textRect);
            circle.path = path;
            circle.frame = self.bounds;
            circle.fillColor = [UIColor clearColor].CGColor;
            circle.strokeColor = [UIColor blackColor].CGColor;
            circle.lineWidth = 60.0f;
            [self.layer addSublayer:circle];
    
            CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
            animation.duration = 15.0f;
            animation.fromValue = [NSNumber numberWithFloat:0.0f];
            animation.toValue = [NSNumber numberWithFloat:1.0f];
            animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
            [circle addAnimation:animation forKey:@"strokeEnd"];
    
            [circle release];
    
            UILabel* label = [[UILabel alloc] init];
            label.text = @"Test Text";
            label.font = [UIFont systemFontOfSize:20.0f];
            label.center = CGPathGetCurrentPoint(path);
            label.transform = CGAffineTransformMakeRotation(1.57079633);
            [label sizeToFit];
            [self.layer addSublayer:label.layer];
    
            CAKeyframeAnimation* textAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
            textAnimation.duration = 15.0f;
            textAnimation.path = path;
            textAnimation.rotationMode = kCAAnimationRotateAuto;
            textAnimation.calculationMode = kCAAnimationCubicPaced;
            textAnimation.removedOnCompletion = NO;
            [label.layer addAnimation:textAnimation forKey:@"position"];
    

    i just create a demo of it screen shot is:-

    enter image description here

    HERE IS DEMO LINK

    http://www.sendspace.com/file/dq5i1e