CAShapeLayer 动画不会停留在屏幕上而是消失

本文介绍了CAShapeLayer 动画不会停留在屏幕上而是消失的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试绘制一个动画圆圈，但每个部分都需要有另一种颜色.现在一切正常，除了我在再次调用该方法之前刚刚绘制的部分消失了，所以只有最后一部分保留.我不想要那个，我想要在 4 次之后用不同颜色的笔画绘制一个完整的圆圈.

I'm trying to draw a animated circle but every segment needs to have another color. Now everything works except that my piece that is just drawed before I call the method again disappears so only the last part stays. I don't want that, I want that after 4 times a whole circle is drawn in different color strokes.

我该如何解决它才不会消失?

How can I fix this that it doesn't disappears?

这是我的初始化代码:

- (void)_initCircle { _circle = [CAShapeLayer layer]; _radius = 100; // Make a circular shape _circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0 * _radius, 2.0 * _radius) cornerRadius:_radius].CGPath; // Center the shape in self.view _circle.position = CGPointMake(CGRectGetMidX(self.view.frame) - _radius, CGRectGetMidY(self.view.frame) - _radius); _circle.fillColor = [UIColor clearColor].CGColor; _circle.lineWidth = 5; // Add to parent layer [self.view.layer addSublayer:_circle]; }

这是我的画作:

- (void)_drawStrokeOnCircleFrom:(float)start to:(float)end withColor:(UIColor *)color { // Configure the apperence of the circle _circle.strokeColor = color.CGColor; _circle.strokeStart = start; _circle.strokeEnd = end; [CATransaction begin]; // Configure animation CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; drawAnimation.duration = 2.0; // "animate over 10 seconds or so.." drawAnimation.repeatCount = 1.0; // Animate only once.. // Animate from no part of the stroke being drawn to the entire stroke being drawn drawAnimation.fromValue = [NSNumber numberWithFloat:start]; drawAnimation.toValue = [NSNumber numberWithFloat:end]; // Experiment with timing to get the appearence to look the way you want drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; [CATransaction setCompletionBlock:^{ NSLog(@"Complete animation"); _index++; if(_index < _votes.count){ _startStroke = _endStroke; _endStroke += [_votes[_index] floatValue] / _totalListens; [self _drawStrokeOnCircleFrom:_startStroke to:_endStroke withColor:_colors[_index]]; } }]; // Add the animation to the circle [_circle addAnimation:drawAnimation forKey:@"drawCircleAnimation"]; [CATransaction commit]; }

推荐答案

我用这样的额外层解决了这个问题:

I solved the problem with extra layers like this:

- (void)_drawStrokeOnCircle { [self _initCircle]; [CATransaction begin]; for (NSUInteger i = 0; i < 4; i++) { CAShapeLayer* strokePart = [[CAShapeLayer alloc] init]; strokePart.fillColor = [[UIColor clearColor] CGColor]; strokePart.frame = _circle.bounds; strokePart.path = _circle.path; strokePart.lineCap = _circle.lineCap; strokePart.lineWidth = _circle.lineWidth; // Configure the apperence of the circle strokePart.strokeColor = ((UIColor *)_colors[i]).CGColor; strokePart.strokeStart = [_segmentsStart[i] floatValue]; strokePart.strokeEnd = [_segmentsEnd[i] floatValue]; [_circle addSublayer: strokePart]; // Configure animation CAKeyframeAnimation* drawAnimation = [CAKeyframeAnimation animationWithKeyPath: @"strokeEnd"]; drawAnimation.duration = 4.0; // Animate from no part of the stroke being drawn to the entire stroke being drawn NSArray* times = @[ @(0.0), @(strokePart.strokeStart), @(strokePart.strokeEnd), @(1.0) ]; NSArray* values = @[ @(strokePart.strokeStart), @(strokePart.strokeStart), @(strokePart.strokeEnd), @(strokePart.strokeEnd) ]; drawAnimation.keyTimes = times; drawAnimation.values = values; drawAnimation.removedOnCompletion = NO; drawAnimation.fillMode = kCAFillModeForwards; // Experiment with timing to get the appearence to look the way you want drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; [strokePart addAnimation: drawAnimation forKey: @"drawCircleAnimation"]; } [CATransaction commit]; } - (void)_initCircle { [_circle removeFromSuperlayer]; _circle = [CAShapeLayer layer]; _radius = 100; // Make a circular shape _circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0 * _radius, 2.0 * _radius) cornerRadius:_radius].CGPath; // Center the shape in self.view _circle.position = CGPointMake(CGRectGetMidX(self.view.frame) - _radius, CGRectGetMidY(self.view.frame) - _radius); _circle.fillColor = [UIColor clearColor].CGColor; _circle.lineWidth = 5; // Add to parent layer [self.view.layer addSublayer:_circle]; }