Animated Line Dash Pattern 3 (with text shape)

C4WorkSpace.m

//
//  C4WorkSpace.m
//  Examples
//
//  Created by Travis Kirton
//

#import "C4WorkSpace.h"

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

@implementation C4WorkSpace {
    C4Shape *rect, *star;
    CGFloat patternWidth;
}

-(void)setup {
    //create the square and center it
    rect = [C4Shape rect:CGRectMake(0, 0, 200, 200)];
    rect.center = self.canvas.center;
    
    patternWidth = 4*rect.width;
    CGFloat dashPattern[2] = {5,20};
    
    //thicken the line and set its dash pattern
    rect.lineWidth = 10.0f;
    rect.fillColor = [UIColor clearColor];
    rect.lineCap = CAPROUND;
    [rect setDashPattern:dashPattern pointCount:2];
    
    //add the line to the canvas
    [self.canvas addShape:rect];
    
    //change the dash pattern
    dashPattern[0] = 1;
    dashPattern[1] = 10;
    
    //create a font for the text shape
    C4Font *f = [C4Font fontWithName:@"ArialRoundedMTBold" size:320];
    
    //create the text shape and center it
    star = [C4Shape shapeFromString:@"*" withFont:f];
    star.center = self.canvas.center;
    
    //style the text shape and set its dash pattern
    star.fillColor = [UIColor clearColor];
    star.lineWidth = 5.0f;
    star.lineCap = CAPROUND;
    [star setDashPattern:dashPattern pointCount:2];
    
    //add the text shape to the canvas
    [self.canvas addShape:star];
    
    //animate it after a short delay
    [self runMethod:@"animate" afterDelay:0.1f];
}

-(void)animate {
    //duration = 3 minutes (60s * 3 = 180);
    rect.animationDuration = 10.0f;
    rect.animationOptions = AUTOREVERSE | REPEAT;
    rect.strokeColor = C4BLUE;
    
    star.animationDuration = 10.0f;
    star.animationOptions = AUTOREVERSE | REPEAT;
    star.strokeColor = C4GREY;
    
    //set the final dash phase to the entire width of the pattern
    rect.lineDashPhase = patternWidth;
    star.lineDashPhase = patternWidth;
}

@end