CODEWITHSUNDEEP
iosobjective-cdrawrectcabasicanimationcaanimation
Anand Gautam
Anand Gautam

Reputation: 2579

Animating a border around UlLabel frame using Objective C in iOS

I am working on an iPhone application using Objective C, where I need to make a border animation to UILabel.

I tried below code using CABasicAnimation : 

CABasicAnimation* borderAnimation = [CABasicAnimation animationWithKeyPath:@"borderWidth"];
[borderAnimation setFromValue:[NSNumber numberWithFloat:4.0f]];
[borderAnimation setToValue:[NSNumber numberWithFloat:0.0f]];
[borderAnimation setRepeatCount:1.0];
[borderAnimation setAutoreverses:NO];
[borderAnimation setDuration:0.7f];
[focusScannerView.layer addAnimation:borderAnimation forKey:@"animateBorder"];

But border animation is not working perfectly. Anybody have an idea of how would I do this? Thank you in Advance.

Upvotes: 0

Views: 182

Answers (1)

Explorer.AS
Explorer.AS

Reputation: 161

#import "ViewController.h"

@interface ViewController ()
{
    UIBezierPath *path;
    CAShapeLayer *shapeLayer;
    int lineNo;
}
@property (nonatomic, weak) IBOutlet UILabel *textLabel;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    path = [UIBezierPath bezierPath];
    shapeLayer = [CAShapeLayer layer];
    shapeLayer.strokeColor = [[UIColor blueColor] CGColor];
    shapeLayer.lineWidth = 3.0;
    shapeLayer.fillColor = [[UIColor clearColor] CGColor];

    [_textLabel addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(startAnimation)]];

    // Do any additional setup after loading the view, typically from a nib.
}

-(void)startAnimation{
    lineNo = 0;
    [self drawLine:lineNo];
}

-(void)drawLine:(int)line{
    CGPoint startPoint;
    CGPoint endPoint;
    switch (line) {
        case 0:
            startPoint = CGPointMake(self.textLabel.frame.origin.x, self.textLabel.frame.origin.y);
            endPoint = CGPointMake(CGRectGetMaxX(self.textLabel.frame), self.textLabel.frame.origin.y);
            break;
        case 1:
            startPoint = CGPointMake(CGRectGetMaxX(self.textLabel.frame), self.textLabel.frame.origin.y);
            endPoint = CGPointMake(CGRectGetMaxX(self.textLabel.frame), CGRectGetMaxY(self.textLabel.frame));
            break;
        case 2:
            startPoint = CGPointMake(CGRectGetMaxX(self.textLabel.frame), CGRectGetMaxY(self.textLabel.frame));
            endPoint = CGPointMake(self.textLabel.frame.origin.x, CGRectGetMaxY(self.textLabel.frame));
            break;
        case 3:
            startPoint = CGPointMake(self.textLabel.frame.origin.x, CGRectGetMaxY(self.textLabel.frame));
            endPoint = CGPointMake(self.textLabel.frame.origin.x, self.textLabel.frame.origin.y);
            break;
        default:
            return;
    }

    [self animateStartPoint:startPoint andEndPoint:endPoint];

}

-(void)animateStartPoint:(CGPoint) startPoint andEndPoint:(CGPoint)endPoint{
    [path moveToPoint:startPoint];
    [path addLineToPoint:endPoint];
    shapeLayer.path = [path CGPath];

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.duration = 5;
    animation.removedOnCompletion = NO;
    animation.fromValue = @(0);
    animation.toValue = @(1);
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    [shapeLayer addAnimation:animation forKey:@"drawLineAnimation"];

    [self.view.layer addSublayer:shapeLayer];
    lineNo++;
    [self drawLine:lineNo];

}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


@end

Upvotes: 1

Related Questions