Как нарисовать форму поклонника с помощью анимации с помощью UIBezierPath?

Question

По форме веера я имею в виду эффект в следующем изображении:

Я хочу, чтобы показать часть глубокого цвета с анимацией, от 0 до 43%. Может ли кто-нибудь предложить подходящий способ сделать это?

Ниже приведен фрагмент кода, который я пробовал, но он только рисует веерную форму без анимации.

CABasicAnimation *bas=[CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
bas.duration=1; 
bas.delegate=self; 
bas.fromValue=[NSNumber numberWithInteger:0]; 
bas.toValue=[NSNumber numberWithInteger:1]; 

CGPoint arcCenter=self.center; 
UIBezierPath *_bezierpath=[[UIBezierPath bezierPathWithArcCenter:arcCenter 
                  radius:150 
                 startAngle:-M_PI_2 
                  endAngle:2*M_PI*0.5 -M_PI_2 
                 clockwise:YES]retain]; 
[_bezierpath addLineToPoint:self.center]; 
[_bezierpath closePath]; 


CAShapeLayer *_shapeLayer=[CAShapeLayer layer]; 
_shapeLayer.fillColor=[UIColor yellowColor].CGColor; 
_shapeLayer.path = _bezierpath.CGPath; 
_shapeLayer.position =CGPointMake(-self.center.x+self.view.frame.size.width/2,-self.center.y+self.view.frame.size.height/2); 
[self.view.layer addSublayer:_shapeLayer]; 

[_shapeLayer addAnimation:bas forKey:@"key"]; 

Answer 1

Общая идея состоит в том, чтобы нарисовать дугу, используя большую ширину линии. Свойство strokeEnd объекта CAShapeLayer определяет, какой процент от рисунка дуги. Сначала вы хотите, чтобы srokeEnd был равен нулю, так что ничего не нарисовано. Затем вы можете анимировать strokeEnd с 0.0 до 0.43, чтобы отобразить 43% дуги. Это предполагает, что траектория безье настраивается, чтобы нарисовать дугу на угол примерно в 2,3 раза больше, чем угол, показанный на вашем изображении.

В приведенном ниже коде центр дуги находится в центре родительского вида, а радиус дуги выбран так, что внешний край дуги достигает края родительского вида (выглядит так, как будто вы «Я хочу немного изменить радиус». Аргумент endAngle был выбран так, чтобы 43% дуги выглядели как изображение, которое вы разместили (вам тоже нужно будет его отрегулировать).

- (void)addPieShapeToView:(UIView *) view 
{ 
    int thickness = 40; 
    int x = view.bounds.size.width/2; 
    int y = view.bounds.size.height/2; 
    int r = (x < y ? x : y) - thickness/2; 

    UIBezierPath *path = [UIBezierPath new]; 
    [path moveToPoint:CGPointMake(x, y - r)]; 
    [path addArcWithCenter:CGPointMake(x, y) radius:r startAngle:-M_PI_2 endAngle:2.88 clockwise:YES]; 

    UIColor *blue = [UIColor blueColor]; 
    UIColor *clear = [UIColor clearColor]; 

    self.timerLayer = [CAShapeLayer new]; 
    self.timerLayer.frame = view.bounds; 
    self.timerLayer.path = [path CGPath]; 
    self.timerLayer.strokeColor = [blue CGColor]; 
    self.timerLayer.fillColor = [clear CGColor]; 
    self.timerLayer.lineWidth = thickness; 
    self.timerLayer.strokeEnd = 0; 

    [view.layer addSublayer:self.timerLayer]; 
} 

- (void)animationForPieShape 
{ 
    CABasicAnimation *timerAnimation; 
    timerAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
    timerAnimation.duration = 1; 
    timerAnimation.fromValue = @0.00; 
    timerAnimation.toValue = @0.43; 
    self.timerLayer.strokeEnd = 0.43; 
    [self.timerLayer addAnimation:timerAnimation forKey:nil]; 
} 

Answer 2

Это мой код

-(void)initFanShapeGetCash 
{ 
CGRect rect=circleViewGetCash.frame; 
CGRect layerRect = CGRectMake(0, 0, 92, 92); 

UIBezierPath *path=[[UIBezierPath bezierPathWithArcCenter:CGPointMake(rect.size.width/2,rect.size.height/2) 
                radius:46 
               startAngle:0 
                endAngle:2*M_PI 
                clockwise:YES]retain]; 

arcLayer=[CAShapeLayer layer]; 
arcLayer.path=path.CGPath;//46,169,230 
arcLayer.fillColor=[NSString colorWithHexString:@"ffd0b0"].CGColor; 
arcLayer.strokeColor=[UIColor colorWithWhite:1 alpha:0.7].CGColor; 
arcLayer.lineWidth=0; 
arcLayer.frame=layerRect; 
[circleViewGetCash.layer addSublayer:arcLayer]; 

UIBezierPath *path2=[UIBezierPath bezierPath]; 
[path2 addArcWithCenter:CGPointMake(rect.size.width/2,rect.size.height/2) radius:28 startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:YES]; 
arcLayer=[CAShapeLayer layer]; 
arcLayer.path=path2.CGPath;//46,169,230 
arcLayer.fillColor=[UIColor clearColor].CGColor; 
arcLayer.strokeColor=[NSString colorWithHexString:@"fe7110"].CGColor; 
arcLayer.lineWidth=30; 
arcLayer.frame=layerRect; 
[circleViewGetCash.layer addSublayer:arcLayer]; 
[self fanShapeAnimation:arcLayer]; 

UIBezierPath *path1=[[UIBezierPath bezierPathWithArcCenter:CGPointMake(rect.size.width/2,rect.size.height/2) 
                 radius:14 
                startAngle:0 
                endAngle:2*M_PI 
                clockwise:YES]retain]; 

arcLayer=[CAShapeLayer layer]; 
arcLayer.path=path1.CGPath;//46,169,230 
arcLayer.fillColor=[UIColor whiteColor].CGColor; 
arcLayer.strokeColor=[NSString colorWithHexString:@"fe7110"].CGColor; 
arcLayer.lineWidth=2; 
arcLayer.frame=layerRect; 
[circleViewGetCash.layer addSublayer:arcLayer]; 
} 

-(void)fanShapeAnimation:(CALayer*)layer 
{ 
CABasicAnimation *bas=[CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
bas.duration=1; 
bas.delegate=self; 
bas.fromValue=[NSNumber numberWithInteger:0]; 
bas.toValue=[NSNumber numberWithInteger:1]; 
[layer addAnimation:bas forKey:@"key"]; 
}