draw rectangle with animation in drawrect method?

Question

I have the following code in drawrect method. i want to draw with animation.

-(void)drawRect:(CGRect)rect{
CGContextRef context = UIGraphicsGetCurrentContext();

CGMutablePathRef pathRef = CGPathCreateMutable();


CGPathMoveToPoint(pathRef, NULL, a.x, a.y);
CGPathAddLineToPoint(pathRef, NULL, b.x, b.y);
CGPathAddLineToPoint(pathRef, NULL, c.x, c.y);
CGPathAddLineToPoint(pathRef, NULL, d.x, d.y);
CGPathCloseSubpath(pathRef);



CGContextAddPath(context, pathRef);
CGContextStrokePath(context);

CGContextSetBlendMode(context, kCGBlendModeClear);

CGContextAddPath(context, pathRef);
CGContextFillPath(context);

// Here i am showing animation but it does not work. is there any way to do this

-(void)showAnimation{
    [UIView beginAnimations:@"movement" context:nil];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationWillStartSelector:@selector(didStart:context:)];
    [UIView setAnimationDidStopSelector:@selector(didStop:finished:context:)];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
    [UIView setAnimationDuration:3.0f];

    [UIView setAnimationRepeatAutoreverses:YES];
    a=CGPointMake(10, 100);
    b=CGPointMake(100, 100);
    c=CGPointMake(100, 30);
    d=CGPointMake(20, 30);
    [UIView commitAnimations];
   }
}

Answer 1

Maybe a custom layer subclass could be what you are searching for. By doing that, you can add your own custom animatable properties, such as a progress variable, which represents the progress of the drawing, and is used in the drawInContext method to determine what to draw.

Now, if you animate that property via a CAAnimation, all that happens is that the CoreAnimation System makes a copy of your layer, changes the property a little towards the end value, calls drawInContext, changes the property again a little, calls drawInContext again and so on. That is how animation works.

The Layer subclass should look like this:

#import <QuartzCore/QuartzCore.h>

@interface AnimatedRect : CALayer
@property (nonatomic) float progress;
@end

@implementation AnimatedRect

//the animated property must be dynamic
@dynamic progress;

//initWithLayer is called when the animation starts, for making the copy
- (id)initWithLayer:(id)layer {
    self = [super initWithLayer:layer];
    if (self) {
        self.progress = layer.progress;
    }
    return self;
}

//drawInContext is called to perform drawing
-(void)drawInContext:(CGContextRef)ctx
{
    //your drawing code for the rect up to the percentage in progress
    //some math is required here, to determine which sides are drawn
    //and where the endpoint is
}

In the drawInContext Method you have to calculate where to end the last drawn line. For example, if you have a square, 12.5% is the half first line, 50% is the first two. The rect below is at 87.5% and started in the upper right corner

As an addition: If you want to animate implicitly, you need to implement the additional method -(id<CAAction>)actionForKey:(NSString *)event, in which you create a CAAnimation and return it.

One nice source about that topic is this tutorial

Answer 2

This isn't the right way to go about this. Implementing drawRect: should be a last resort, particularly if all you are doing is drawing a rectangle. It doesn't play well with animation because you'd be forcing a redraw for every frame which would be very bad for performance.

You'd be better off doing one of the following:

• Having the rectangle as a subview of the appropriate size and background colour, and animating its frame
• Having a CAShapeLayer and animating its path.

Answer 3

With helpful answer from @TAKeanice I have implemented similar timeout behavior.

XYZTimeoutView

#import <UIKit/UIKit.h>

/**
 *    A view to draw timeout line.
 */
@interface XYZTimeoutView : UIImageView

/**
 *    Current progress in percent.
 */
@property(nonatomic) IBInspectable CGFloat progress;

/**
 *    Padding between outer view edge and timeout line.
 */
@property(nonatomic) IBInspectable CGFloat padding;

/**
 *    A width of timeout line.
 */
@property(nonatomic) IBInspectable CGFloat strokeWidth;

/**
 *    A duration of timeout animation in seconds.
 */
@property(nonatomic) IBInspectable CGFloat durationOfTimeoutAnimation;

/**
 *    A color of timeout line.
 */
@property(nonatomic) IBInspectable UIColor *strokeColor;

@end

#import "XYZTimeoutView.h"
#import "XYZTimeoutLayer.h"

@interface XYZTimeoutView ()

@property(nonatomic) XYZTimeoutLayer *timeoutLayer;

@end

@implementation XYZTimeoutView

#pragma mark - Creation and initialization

- (instancetype)init {
    self = [super init];

    if (self) {
        [self initialization];
        [self update];
    }

    return self;
}

- (instancetype)initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];

    if (self) {
        [self initialization];
        [self update];
    }

    return self;
}

- (void)initialization {
    [self setTimeoutLayer:[XYZTimeoutLayer layer]];

    [[self layer] addSublayer:[self timeoutLayer]];
}

- (void)update {
    [[self timeoutLayer] setPadding:[self padding]];
    [[self timeoutLayer] setProgress:[self progress]];
    [[self timeoutLayer] setStrokeWidth:[self strokeWidth]];
    [[self timeoutLayer] setStrokeColor:[self strokeColor]];
    [[self timeoutLayer] setDurationOfTimeoutAnimation:[self durationOfTimeoutAnimation]];
}

#pragma mark - Setter methods

- (void)setProgress:(CGFloat)progress {
    _progress = MAX(0.0f, MIN(progress, 100.0f));

    [[self timeoutLayer] setFrame:[self bounds]];
    [[self timeoutLayer] setProgress:[self progress]];
}

- (void)setPadding:(CGFloat)padding {
    _padding = padding;

    [[self timeoutLayer] setPadding:[self padding]];
}

- (void)setStrokeWidth:(CGFloat)strokeWidth {
    _strokeWidth = strokeWidth;

    [[self timeoutLayer] setStrokeWidth:[self strokeWidth]];
}

- (void)setDurationOfTimeoutAnimation:(CGFloat)durationOfTimeoutAnimation {
    _durationOfTimeoutAnimation = durationOfTimeoutAnimation;

    [[self timeoutLayer]
     setDurationOfTimeoutAnimation:[self durationOfTimeoutAnimation]];
}

- (void)setStrokeColor:(UIColor *)strokeColor {
    _strokeColor = strokeColor;

    [[self timeoutLayer] setStrokeColor:[self strokeColor]];
}

@end

XYZTimeoutLayer

@import QuartzCore;
@import UIKit;

/**
 *    A layer used to animate timeout line.
 */
@interface XYZTimeoutLayer : CALayer

/**
 *    Current progress in percent.
 */
@property(nonatomic) CGFloat progress;

/**
 *    Padding between outer view edge and timeout line.
 */
@property(nonatomic) CGFloat padding;

/**
 *    A width of timeout line.
 */
@property(nonatomic) CGFloat strokeWidth;

/**
 *    A duration of timeout animation in seconds.
 */
@property(nonatomic) CGFloat durationOfTimeoutAnimation;

/**
 *    A color of timeout line.
 */
@property(nonatomic) UIColor *strokeColor;

@end

#import "XYZTimeoutLayer.h"
#import "XYZTimeoutLocation.h"

@implementation XYZTimeoutLayer

@dynamic progress;

#pragma mark - Layer creation and initialization

- (instancetype)initWithLayer:(id)layer {
    self = [super initWithLayer:layer];

    if (self && [layer isKindOfClass:[XYZTimeoutLayer class]]) {
        [self copyFrom:(XYZTimeoutLayer *)layer];
    }

  return self;
}

#pragma mark - Property methods

+ (BOOL)needsDisplayForKey:(NSString *)key {
    if ([NSStringFromSelector(@selector(progress)) isEqualToString:key]) {
        return YES;
    }

    return [super needsDisplayForKey:key];
}

#pragma mark - Animation methods

- (id<CAAction>)actionForKey:(NSString *)event {
    if ([NSStringFromSelector(@selector(progress)) isEqualToString:event]) {
        return [self createAnimationForKey:event];
    }

    return [super actionForKey:event];
}

#pragma mark - Draw

- (void)drawInContext:(CGContextRef)ctx {
    // Initialization
    CGRect rect = [self drawRect];
    CGPoint pointTopLeft = CGPointMake(rect.origin.x, rect.origin.y);
    CGPoint pointTopRight = CGPointMake(rect.origin.x + rect.size.width, rect.origin.y);
    CGPoint pointBottomLeft = CGPointMake(rect.origin.x, rect.origin.y + rect.size.height);
    CGPoint pointBottomRight = CGPointMake(rect.origin.x + rect.size.width, rect.origin.y + rect.size.height);
    XYZTimeoutLocation *location = [XYZTimeoutLocation endLocationForPercent:[self progress] rect:rect];

    // Draw initialization
    CGContextSetLineWidth(ctx, [self strokeWidth]);
    CGContextSetStrokeColorWithColor(ctx, [[self strokeColor] CGColor]);

    // Move to start point
    CGContextMoveToPoint(ctx, pointTopRight.x, pointTopRight.y - ([self strokeWidth] / 2));

    // Set draw path
    if(TOP == [location edge]){
        CGContextAddLineToPoint(ctx, pointBottomRight.x, pointBottomRight.y);
        CGContextAddLineToPoint(ctx, pointBottomLeft.x, pointBottomLeft.y);
        CGContextAddLineToPoint(ctx, pointTopLeft.x, pointTopLeft.y);
        CGContextAddLineToPoint(ctx, rect.origin.x + [location scope], pointTopRight.y);
    } else if(LEFT == [location edge]) {
        CGContextAddLineToPoint(ctx, pointBottomRight.x, pointBottomRight.y);
        CGContextAddLineToPoint(ctx, pointBottomLeft.x, pointBottomLeft.y);
        CGContextAddLineToPoint(ctx, pointTopLeft.x, rect.origin.y + rect.size.height - [location scope]);
    } else if(BOTTOM == [location edge]) {
        CGContextAddLineToPoint(ctx, pointBottomRight.x, pointBottomRight.y);
        CGContextAddLineToPoint(ctx, rect.origin.x + rect.size.width - [location scope], pointBottomLeft.y);
    } else if(RIGHT == [location edge]) {
        CGContextAddLineToPoint(ctx, pointBottomRight.x, rect.origin.y + [location scope] - ([self strokeWidth] / 2));
    }

    // Draw
    CGContextStrokePath(ctx);
}

#pragma mark - Helper Methods

- (void)copyFrom:(XYZTimeoutLayer *)layer {
    [self setPadding:[layer padding]];
    [self setProgress:[layer progress]];
    [self setStrokeWidth:[layer strokeWidth]];
    [self setStrokeColor:[layer strokeColor]];
    [self setDurationOfTimeoutAnimation:[layer durationOfTimeoutAnimation]];
}

- (CABasicAnimation *)createAnimationForKey:(NSString *)key {
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:key];

    [animation setDuration:[self durationOfTimeoutAnimation]];
    [animation setFromValue:[[self presentationLayer] valueForKey:key]];
    [animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];

    return animation;
}

- (CGRect)drawRect {
    CGRect rect = [self bounds];

    CGRect drawRect = CGRectMake([self padding], [self padding],
                                 rect.size.width - (self.padding * 2),
                                 rect.size.height - (self.padding * 2));

    return drawRect;
}

@end

XYZTimeoutLocation

@import Foundation;
@import CoreGraphics;

/**
 *    An enum used to mark end of timeout line.
 */
typedef NS_ENUM(NSUInteger, Edge) {
    /**
     *    The end of timeout line is at top.
     */
    TOP = 0,
    /**
     *    The end of timeout line is at left.
     */
    LEFT,
    /**
     *    The end of timeout line is at bottom.
     */
    BOTTOM,
    /**
     *    The end of timeout line is at right.
     */
    RIGHT
};

/**
 *    A class that holds end of timeout line.
 */
@interface XYZTimeoutLocation : NSObject

/**
 *    The edge of the view where timeout line ended.
 */
@property(nonatomic) Edge edge;

/**
 *    The end scope to draw.
 */
@property(nonatomic) CGFloat scope;

/**
 *    Calculates scope for specified percent value for given rect.
 *
 *    @param percent A percent to calculate scope for it.
 *    @param rect    A rect to calculate scope for it.
 *
 *    @return A scope of rect for specified percent.
 */
+ (CGFloat)scopeForPercent:(CGFloat)percent rect:(CGRect)rect;

/**
 *    Returns an instance of MVPTimeoutLocation that holds edge of view and scope to draw for specified percent value for given rect.
 *
 *    @param percent A percent to calculate scope for it.
 *    @param rect    A rect to calculate scope for it.
 *
 *    @return An instance of MVPTimeoutLocation that holds edge of view and scope to draw.
 */
+ (XYZTimeoutLocation *)endLocationForPercent:(CGFloat)percent rect:(CGRect)rect;

@end

#import "XYZTimeoutLocation.h"

@implementation XYZTimeoutLocation

+ (XYZTimeoutLocation *)endLocationForPercent:(CGFloat)percent rect:(CGRect)rect {
    CGFloat scope = [XYZTimeoutLocation scopeForPercent:percent rect:rect];
    XYZTimeoutLocation *location = [[XYZTimeoutLocation alloc] init];

    if (scope > rect.size.height) {
        scope -= rect.size.height;

        if (scope > rect.size.width) {
            scope -= rect.size.width;

            if (scope > rect.size.height) {
                scope -= rect.size.height;

                location.edge = TOP;
                location.scope = scope;
            } else {
                location.edge = LEFT;
                location.scope = scope;
            }
        } else {
            location.edge = BOTTOM;
            location.scope = scope;
        }
    } else {
        location.edge = RIGHT;
        location.scope = scope;
    }

    return location;
}

+ (CGFloat)scopeForPercent:(CGFloat)percent rect:(CGRect)rect {
    CGFloat scope = (rect.size.width * 2) + (rect.size.height * 2);
    CGFloat scopeForPercent = (scope / 100) * percent;

    return scopeForPercent;
}

@end

I'm not satisfied with [XYZTimeoutLocation endLocationForPercent] method. If somebody have a better idea how to do this, please update/edit.

In UIViewController insert code below to test:

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    [self.timeoutView setTranslatesAutoresizingMaskIntoConstraints:NO];
    [self.timeoutView setStrokeColor:[UIColor greenColor]];
    [self.timeoutView setDurationOfTimeoutAnimation:1];
    [self.timeoutView setStrokeWidth:10.0f];
    [self.timeoutView setPadding:10.0f];

    self.percent = 0;

    [NSTimer scheduledTimerWithTimeInterval:1 repeats:YES block:^(NSTimer * _Nonnull timer) {
        if ((self.percent = (self.percent + 10)) > 100) {
            self.percent = 0;
        }


        [self.timeoutView setProgress:self.percent];
    }];
}