Is it possible to animate CGContextDrawPath

Question

- (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?

score 1 · Accepted Answer · answered Nov 10 '15 at 13:19

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"];

}

score 0 · Answer 2 · edited May 23 '17 at 11:59

0

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

questions/10809280

edited May 23 '17 at 11:59

Community

1
1

answered Nov 10 '15 at 11:39

Lida Zhu

21
6

Is it possible to animate CGContextDrawPath

2 Answers2