2

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.

iOmi
  • 625
  • 10
  • 24

1 Answers1

8

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

Community
  • 1
  • 1
Nitin Gohel
  • 49,482
  • 17
  • 105
  • 144
  • thanks Nitin, It really solved my problem. Only a minor issue that I faced that when I copied your code written above, it shows the Label a black block, but when I downloaded the code from demo link. It really worked fine.... Again Thanks a lot for heeling me. – iOmi Jan 23 '13 at 04:58
  • you welcome iomi in asnwer code i forget to put a `self.view.bounds` – Nitin Gohel Jan 23 '13 at 05:48
  • :: I want to ask one thing more please. As in `CABasicAnimation` I can set the clockwise and anticlockwise orientation for rotation by changing the `From value` and `to value` Is there any option in `CAKeyFrameAnimation` to make it clockwise or anticlockwise. – iOmi Jan 23 '13 at 05:56