是否可以为 CGContextDrawPath 设置动画
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);
}
是否可以在使用 CGContextDrawPath 绘制形状时为路径从头到尾设置动画?
动画最好在 -drawRect:
之外完成,请改用 CAShapeLayer
。
questions/10809280
您可能需要不在 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"];
}
- (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 绘制形状时为路径从头到尾设置动画?
动画最好在 -drawRect:
之外完成,请改用 CAShapeLayer
。
questions/10809280
您可能需要不在 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"];
}