填充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，然后在其中绘制一条bezier路径并为bezier路径曲线设置动画。稍后您可以将imageview添加到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];
}

这会给你：

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

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];