ios - 是否可以为 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);
}

是否可以在使用 CGContextDrawPath 绘制形状时为从头到尾的路径设置动画？

Answer 1

您可能需要不在 drawRect 中而是在从 viewDidAppear:(BOOL)animated 调用的自定义 setupView 函数中执行此操作。

- (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 从头到尾设置动画

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