填充 UIImageView 层边框宽度颜色的动画进度

Question

我有 UIImageView，我已经把它做成了一个像这张图片一样宽度层的圆圈：

用户可以更新图像并上传新图像，上传图像时我有一个进度回调。我想要的是在上传图像时用颜色为边框设置动画，例如当用户点击上传时，边框从顶部开始以绿色开始并根据进度填充宽度。

我尝试使用此代码：

        CAShapeLayer *circle = [CAShapeLayer layer];
        circle.path = [UIBezierPath bezierPathWithArcCenter:CGPointZero radius:27 startAngle:-M_PI_2 endAngle:2 * M_PI - M_PI_2 clockwise:YES].CGPath;
        circle.fillColor = [UIColor clearColor].CGColor;
        circle.strokeColor = [UIColor greenColor].CGColor;
        circle.lineWidth = 4;

        CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
        animation.duration = 10;
        animation.removedOnCompletion = NO;
        animation.fromValue = @(0);
        animation.toValue = @(1);
        animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
        [circle addAnimation:animation forKey:@"drawCircleAnimation"];

        [imageView.layer.sublayers makeObjectsPerformSelector:@selector(removeFromSuperlayer)];
        [imageView.layer addSublayer:circle];

但是它显示的圆圈位置错误并且这个aproch没有进度，它是静态的有没有办法根据进度填充UIImageView图层的边框宽度？

Answer 1

UIImageView 用于显示图像。我不建议改变它的行为。即使您将 UIImageView 子类化并尝试在其中绘制一些东西，它的 drawRect 也不会被调用。让 imageView 为imageView，其余使用UIView 我建议您将UIView 子类化，然后在其中绘制贝塞尔路径并动画贝塞尔路径曲线，您可以稍后将图像视图添加到uiview。

UIView 子类：

- (void)drawRect:(CGRect)rect {
    [self drawImageHolderViewFrame:rect startAngle:_startAngle];
}

- (void)drawImageHolderViewFrame: (CGRect)frame startAngle: (CGFloat)startAngle
{
    CGRect ovalRect = CGRectMake(CGRectGetMinX(frame) , CGRectGetMinY(frame) , frame.size.width-10, frame.size.height-10);
    UIBezierPath* ovalPath = [UIBezierPath bezierPath];
    [ovalPath addArcWithCenter: CGPointMake(CGRectGetMidX(ovalRect), CGRectGetMidY(ovalRect)) radius: CGRectGetWidth(ovalRect) / 2 startAngle: -91 * M_PI/180 endAngle: -startAngle * M_PI/180 clockwise: YES];
    [UIColor.redColor setStroke];
    ovalPath.lineWidth = 2;
    [ovalPath stroke];
}

viewController类：

-(void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];
    _imageHolderView=[[MyView alloc]initWithFrame:CGRectMake(20, 20, 100, 100)];
    _imageHolderView.startAngle=90;
    _imageHolderView.backgroundColor=[UIColor clearColor];
    [self.view addSubview: _imageHolderView];
    [self startTImer];
}

-(void)startTImer{
    NSTimer *timer=[NSTimer scheduledTimerWithTimeInterval:0.02 target:self selector:@selector(animateBorder) userInfo:nil repeats:YES];
}

-(void)animateBorder{
    if (_startAngle<=-270) {
        _startAngle=90;
    }
    _startAngle--;
    _imageHolderView.startAngle=_startAngle;
    [_imageHolderView setNeedsDisplay];
}

这会给你：

现在您可以将图像视图作为子视图添加到刚刚创建的视图中。

Answer 2

请尝试以下代码：

CAShapeLayer *circle = [CAShapeLayer layer];
circle.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(29, 29) radius:27 startAngle:-M_PI_2 endAngle:2 * M_PI - M_PI_2 clockwise:YES].CGPath;    
circle.fillColor = [UIColor clearColor].CGColor;   
circle.strokeColor = [UIColor greenColor].CGColor;   
circle.lineWidth = 4;


CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];     
animation.duration = 10;   
animation.removedOnCompletion = NO;    
animation.fromValue = @(0);    
animation.toValue = @(1);    
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];    
[circle addAnimation:animation forKey:@"drawCircleAnimation"];    



[imageCircle.layer.sublayers makeObjectsPerformSelector:@selector(removeFromSuperlayer)];    
[imageCircle.layer addSublayer:circle];