动画CAShapeLayer setPath

Question

我正在尝试在绘制bezierPath时添加动画。有基圆黑暗（0到360），绿色路径（-90到0）和红色路径（0到90）。

#import "ProgressBar.h"



@interface ProgressBar ()
{
    CAShapeLayer *lightGrayPath;
}



@end

@implementation ProgressBar

-(id)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if(self){
        [self initValues];
    }
    return self;
}

-(id) initWithCoder:(NSCoder *)aDecoder{
    self = [super initWithCoder:aDecoder];
    if(self){
        [self initValues];
    }
    return self;
}
-(void)awakeFromNib{
    [super awakeFromNib];
    [self startAnimation];

}


-(void)initValues{
    lightGrayPath = [CAShapeLayer layer];
    lightGrayPath.fillColor = [UIColor clearColor].CGColor;
    lightGrayPath.lineWidth=2.0f;
    lightGrayPath.strokeColor =[UIColor colorWithWhite:0 alpha:0.1].CGColor;
    [self.layer addSublayer:lightGrayPath];
}


-(void)startAnimation{
    CGRect rect=self.bounds;
    CGFloat subPathWidth=10.0;
    UIBezierPath *bezierPath_lightGray=[UIBezierPath bezierPath];
    bezierPath_lightGray.lineWidth=lightGrayPath.lineWidth;

    [bezierPath_lightGray addArcWithCenter:CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds)) radius:(rect.size.height / 2)- subPathWidth/2.0
                                startAngle:0 endAngle:2*M_PI clockwise:YES];









    UIBezierPath *bezierPath_green=[UIBezierPath bezierPath];
    bezierPath_green.lineWidth=subPathWidth;

    [[UIColor greenColor] setStroke];
    [bezierPath_green addArcWithCenter:CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds)) radius:(rect.size.height / 2)- subPathWidth/2.0 startAngle:-M_PI/2.0     endAngle:0 clockwise:YES];
    [bezierPath_green stroke];
    [bezierPath_lightGray appendPath:bezierPath_green];


    UIBezierPath *bezierPath_red=[UIBezierPath bezierPath];
    bezierPath_red.lineWidth=subPathWidth;


    [[UIColor redColor] setStroke];
    [bezierPath_red addArcWithCenter:CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds)) radius:(rect.size.height / 2)- subPathWidth/2.0 startAngle:0     endAngle:M_PI_2 clockwise:YES];
    [bezierPath_red stroke];
    [bezierPath_lightGray appendPath:bezierPath_red];


    lightGrayPath.path=bezierPath_lightGray.CGPath;


    //    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
    //    pathAnimation.duration = 10.0;
    //    //pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    //    pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
    //    [lightGrayPath addAnimation:pathAnimation forKey:@"path"];
}



@end

我想要显示正在绘制的路径的动画。 lightGrayArc应不要动画。绿弧和红弧应该是。

但是，因为我只使用一个CAShapeLayer并为其添加路径。当我使用动画时，它会为浅灰色路径设置动画，不为绿色和红色弧设置动画。

Answer 1

我建议：

1. 请勿在{{1​​}}中制作动画。这是绘制单帧。

2. 有两种方法可以设置路径动画：

   • 根本不要使用drawRect，而是定义一个CAShapeLayer，在drawRect上执行stroke。

     要设置动画，请不要使用UIBezierPath，而是使用CABasicAnimation（一种针对屏幕更新优化的计时器）更改某些属性，这些属性定义路径的开始和结束位置，然后调用CADisplayLink，它将触发对setNeedsDisplay的调用，该调用将使用这些属性drawRect动画帧的路径。

   • 更容易，不要使用stroke来抚摸任何内容。只需将灰色，绿色和红色弧添加为三个不同的drawRect实例即可。让CAShapeLayer为你做所有弧的渲染。

     如果要为红色和绿色图层设置动画，请为这些相应图层添加CAShapeLayer。