Animated Line Dash Pattern 1

C4WorkSpace.m

//
//  C4WorkSpace.m
//  Examples
//
//  Created by Travis Kirton on 12-07-19.
//

#import "C4WorkSpace.h"

@interface C4WorkSpace ()
-(void)animate;
@end

@implementation C4WorkSpace {
    C4Shape *line;
    CGFloat patternWidth;
}

-(void)setup {
    //create the end points for a line
    CGPoint endPoints[2] = {CGPointZero,CGPointMake(self.canvas.width, 0)};
    
    //create the line and center it
    line = [C4Shape line:endPoints];
    line.center = self.canvas.center;
    
    //create a dash pattern
    //this pattern is [1,1,2,2,3,3,..,768,768];
    CGFloat dashPattern[1536];
    for(int i = 0; i < 1536; i+=2) {
        dashPattern[i] = i/2+1;
        dashPattern[i+1] = i/2+1;
        patternWidth += 2*i;
    }
    
    //thicken the line and set its dash pattern
    line.lineWidth = 100.0f;
    [line setDashPattern:dashPattern pointCount:1536];

    //add the line to the canvas
    [self.canvas addShape:line];

    //animate it after a short delay
    [self runMethod:@"animate" afterDelay:0.1f];
}

-(void)animate {
    //duration = 5 minutes (60s * 5 = 300);
    line.animationDuration = 300.0f;
    line.animationOptions = AUTOREVERSE | REPEAT;
    line.strokeColor = C4BLUE;
    
    //set the final dash phase to the entire width of the pattern
    line.lineDashPhase = patternWidth;
}

@end