CODEWITHSUNDEEP
ioscore-graphics
Sunil Rao
Sunil Rao

Reputation: 850

Is it possible to animate CGContextDrawPath

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

    CGContextSetFillColorWithColor(context, GRAPH_LINE_COLOR.CGColor);
    CGContextSetLineWidth(context, 1);

    //drawing graph layout
    CGContextBeginPath(context);
    CGContextMoveToPoint(context, SCREEN_WIDTH * 0.10, SCREEN_HEIGHT * 0.20);
    CGContextAddLineToPoint(context, SCREEN_WIDTH * 0.95,SCREEN_HEIGHT * 0.20);
    CGContextAddLineToPoint(context, SCREEN_WIDTH * 0.95, SCREEN_HEIGHT * 0.85);
    CGContextAddLineToPoint(context, SCREEN_WIDTH * 0.10, SCREEN_HEIGHT * 0.85);
    CGContextClosePath(context);
    CGContextDrawPath(context, kCGPathStroke);
}

Is it possible to animate the path from the beginning to the end while drawing a shape using CGContextDrawPath?

Upvotes: 0

Views: 243

Answers (2)

Andrew S.
Andrew S.

Reputation: 61

You will probably need to do this not in drawRect but in a custom setupView function, called from viewDidAppear:(BOOL)animated.

- (void) setupView {
self.graphLayer = [[CAShapeLayer alloc] init];
self.graphLayer.strokeColor = [UIColor redColor].CGColor;  // GRAPH_LINE_COLOR.CGColor
self.graphLayer.fillColor = [UIColor clearColor].CGColor;
[self.layer addSublayer:self.graphLayer];

[self animateContour];

}

animateContour animates from the beginning to the end

-(void) animateContour {
CGFloat SCREEN_WIDTH = [UIScreen mainScreen].bounds.size.width;  // your values here
CGFloat SCREEN_HEIGHT = [UIScreen mainScreen].bounds.size.height;

UIBezierPath* path0 = [UIBezierPath bezierPath];
[path0 moveToPoint:CGPointMake(SCREEN_WIDTH * 0.10, SCREEN_HEIGHT * 0.20)];
[path0 addLineToPoint:CGPointMake(SCREEN_WIDTH * 0.10, SCREEN_HEIGHT * 0.20)];

UIBezierPath* path1 = [UIBezierPath bezierPath];
[path1 moveToPoint:CGPointMake(SCREEN_WIDTH * 0.10, SCREEN_HEIGHT * 0.20)];
[path1 addLineToPoint:CGPointMake(SCREEN_WIDTH * 0.95,SCREEN_HEIGHT * 0.20)];

UIBezierPath* path2 = [UIBezierPath bezierPath];
[path2 moveToPoint:CGPointMake(SCREEN_WIDTH * 0.10, SCREEN_HEIGHT * 0.20)];
[path2 addLineToPoint:CGPointMake(SCREEN_WIDTH * 0.95,SCREEN_HEIGHT * 0.20)];
[path2 addLineToPoint:CGPointMake(SCREEN_WIDTH * 0.95, SCREEN_HEIGHT * 0.85)];

UIBezierPath* path3 = [UIBezierPath bezierPath];
[path3 moveToPoint:CGPointMake(SCREEN_WIDTH * 0.10, SCREEN_HEIGHT * 0.20)];
[path3 addLineToPoint:CGPointMake(SCREEN_WIDTH * 0.95,SCREEN_HEIGHT * 0.20)];
[path3 addLineToPoint:CGPointMake(SCREEN_WIDTH * 0.95, SCREEN_HEIGHT * 0.85)];
[path3 addLineToPoint:CGPointMake(SCREEN_WIDTH * 0.10, SCREEN_HEIGHT * 0.85)];

UIBezierPath* path4 = [UIBezierPath bezierPath];
[path4 moveToPoint:CGPointMake(SCREEN_WIDTH * 0.10, SCREEN_HEIGHT * 0.20)];
[path4 addLineToPoint:CGPointMake(SCREEN_WIDTH * 0.95,SCREEN_HEIGHT * 0.20)];
[path4 addLineToPoint:CGPointMake(SCREEN_WIDTH * 0.95, SCREEN_HEIGHT * 0.85)];
[path4 addLineToPoint:CGPointMake(SCREEN_WIDTH * 0.10, SCREEN_HEIGHT * 0.85)];
[path4 addLineToPoint:CGPointMake(SCREEN_WIDTH * 0.10, SCREEN_HEIGHT * 0.20)];

CAKeyframeAnimation* animation = [CAKeyframeAnimation animationWithKeyPath:@"path"];
animation.duration = 4.0f;
animation.values = [NSArray arrayWithObjects:(id)path0.CGPath, (id)path1.CGPath,
                    (id)path2.CGPath, (id)path3.CGPath,
                    (id)path4.CGPath, nil];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
animation.fillMode = kCAFillModeForwards;
animation.removedOnCompletion = false;
[self.graphLayer addAnimation:animation forKey:@"path"];

}

Upvotes: 1

Lida Zhu
Lida Zhu

Reputation: 21

Animations are better done outside of -drawRect:, use CAShapeLayer instead.

questions/10809280

Upvotes: 0

Related Questions