Advanced lineDashPhase

C4WorkSpace.m

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

#import "C4WorkSpace.h"

@interface C4WorkSpace ()
-(void)createLines;
-(void)createDashPattern;
-(void)createGrid;
-(void)hideGrid;
-(void)revealGrid;
@end

@implementation C4WorkSpace {
    C4Shape *line1, *line2, *line3, *line4, *line5;
    NSArray *grid;
    CGFloat pattern[20];
    BOOL gridIsVisible;
}

-(void)setup {
    //create all the lines
    [self createLines];
    
    //create dash pattern
    [self createDashPattern];

    //create the grid
    [self createGrid];

    NSInteger patternCount = 20;
    CGFloat patternWidth = 0.0f;
    for(int i = 0; i < 20; i ++) {
        patternWidth += pattern[i];
    }
    
    [line1 setDashPattern:pattern pointCount:patternCount];
    
    [line2 setDashPattern:pattern pointCount:patternCount];
    line2.lineDashPhase = patternWidth*.25f;
    
    [line3 setDashPattern:pattern pointCount:patternCount];
    line3.lineDashPhase = patternWidth*.5f;
    
    [line4 setDashPattern:pattern pointCount:patternCount];
    line4.lineDashPhase = patternWidth*.75f;
    
    [line5 setDashPattern:pattern pointCount:patternCount];
    line5.lineDashPhase = patternWidth;
    
    [self runMethod:@"revealGrid" afterDelay:3.0f];
}

-(void)createLines {
    CGPoint endPoints[2];
    //create 2 end points
    endPoints[0] = CGPointZero;
    endPoints[1] = CGPointMake(self.canvas.width*0.9f,0);
    
    //create 5 lines
    line1 = [C4Shape line:endPoints];
    line2 = [C4Shape line:endPoints];
    line3 = [C4Shape line:endPoints];
    line4 = [C4Shape line:endPoints];
    line5 = [C4Shape line:endPoints];
    
    //center all the lines
    CGPoint center = self.canvas.center;
    center.y = self.canvas.height/6;
    
    line1.center = center;
    
    center.y += self.canvas.height/6;
    line2.center = center;
    
    center.y += self.canvas.height/6;
    line3.center = center;
    
    center.y += self.canvas.height/6;
    line4.center = center;
    
    center.y += self.canvas.height/6;
    line5.center = center;
    
    //set their line widths
    line1.lineWidth = 30.0f;
    line2.lineWidth = 30.0f;
    line3.lineWidth = 30.0f;
    line4.lineWidth = 30.0f;
    line5.lineWidth = 30.0f;

    //set their stroke colors
    line1.strokeColor = C4BLUE;
    line2.strokeColor = C4BLUE;
    line3.strokeColor = C4BLUE;
    line4.strokeColor = C4BLUE;
    line5.strokeColor = C4BLUE;
        
    //add them to the canvas
    [self.canvas addShape:line1];
    [self.canvas addShape:line2];
    [self.canvas addShape:line3];
    [self.canvas addShape:line4];
    [self.canvas addShape:line5];
}

-(void)createDashPattern {
    //create a 4-point pattern
    CGFloat width = line1.width / 220.0f;
    
    //slowly increase the size the pattern gap and dashes
    //gives this pattern: [1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10];
    for(int i = 0; i < 20; i+=2) {
        pattern[i] = (i/2+1)*width;   // dash
        pattern[i+1] = (i/2+1)*width; // equal size gap
    }
}

-(void)createGrid {
    //create a temporary array to hold the lines
    NSMutableArray *gridArray = [[NSMutableArray alloc] initWithCapacity:0];
    
    C4Shape *gridLine;
    
    CGPoint endPoints[2];

    //set the end points for the grid line
    endPoints[0].x = self.canvas.center.x +0.5f;
    endPoints[0].y = 0;
    endPoints[1].x = self.canvas.center.x+0.5f;
    endPoints[1].y = self.canvas.height;
    
    //create and add the gridLine to the array
    gridLine = [C4Shape line:endPoints];
    [gridArray addObject:gridLine];
    
    // ----------------------------
    
    //set the end points for the next grid line
    endPoints[0].x = 0;
    endPoints[0].y = line1.center.y - line1.lineWidth/2;
    endPoints[1].x = self.canvas.width;
    endPoints[1].y = line1.center.y - line1.lineWidth/2;
    
    //create and add the gridLine to the array
    gridLine = [C4Shape line:endPoints];
    [gridArray addObject:gridLine];

    // ----------------------------

    //set the end points for the next grid line
    endPoints[0].x = 0;
    endPoints[0].y = line5.center.y + line5.lineWidth/2;
    endPoints[1].x = self.canvas.width;
    endPoints[1].y = line5.center.y + line5.lineWidth/2;
    
    //create and add the gridLine to the array
    gridLine = [C4Shape line:endPoints];
    [gridArray addObject:gridLine];

    // ----------------------------
    
    //set the end points for the next grid line
    endPoints[0].x = line1.pointA.x;
    endPoints[0].y = 0;
    endPoints[1].x = line1.pointA.x;
    endPoints[1].y = self.canvas.height;
    
    //create and add the gridLine to the array
    gridLine = [C4Shape line:endPoints];
    [gridArray addObject:gridLine];

    // ----------------------------
    
    //set the end points for the next grid line
    endPoints[0].x = line1.pointB.x;
    endPoints[0].y = 0;
    endPoints[1].x = line1.pointB.x;
    endPoints[1].y = self.canvas.height;
    
    //create and add the gridLine to the array
    gridLine = [C4Shape line:endPoints];
    [gridArray addObject:gridLine];
    
    // ----------------------------
    
    //set the end points for the next grid line
    endPoints[0].x = line5.pointA.x;
    endPoints[0].y = line5.pointA.y-line5.lineWidth/2.0f;
    endPoints[1].x = line1.pointA.x+line1.width/2.0f;
    endPoints[1].y = line1.pointA.y-line1.lineWidth/2.0f;
    
    //create and add the gridLine to the array
    gridLine = [C4Shape line:endPoints];
    [gridArray addObject:gridLine];

    // ----------------------------
    
    //shift the end points for the next grid line
    endPoints[0].x += line1.width/2;
    endPoints[1].x += line1.width/2;
    
    //create and add the gridLine to the array
    gridLine = [C4Shape line:endPoints];
    [gridArray addObject:gridLine];
    
    // ----------------------------
    
    //style all the lines and add them to the canvas
    for(C4Shape *line in gridArray) {
        line.lineWidth = 1.0f;
        line.strokeColor = C4RED;
        line.alpha = 0.0f;
        CGFloat gridLinePattern[1] = {1.0f};
        [line setDashPattern:gridLinePattern pointCount:1];
        [self.canvas addShape:line];
    }
    
    //create the global grid array (we use this to fade the lines in and out
    grid = [NSArray arrayWithArray:gridArray];
    gridIsVisible = NO;
    
    //empty the temporary grid array and trash it
    [gridArray removeAllObjects];
    gridArray = nil;
}

-(void)hideGrid {
    //for each line in the grid array, create an animation to fade OUT
    for(C4Shape *line in grid) {
        line.animationDuration = 1.0f;
        line.alpha = 0.0;
    }
    gridIsVisible = NO;
}

-(void)revealGrid {
    //for each line in the grid array, create an animation to fade IN
    for(C4Shape *line in grid) {
        line.animationDuration = 1.0f;
        line.alpha = 1.0f;
    }
    gridIsVisible = YES;
}

-(void)touchesBegan {
    //toggle the visibility of the grid
    if(gridIsVisible) [self hideGrid];
    else [self revealGrid];
}
@end