通过填充 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是为了显示图像。我不建议改变它的行为。即使你 subclass UIImageView 并尝试在其中绘制一些东西，它的 drawRect 也不会被调用。让 imageView 为 imageView，其余使用 UIView 我建议你子class UIView 然后在里面画一条贝塞尔路径并为贝塞尔路径曲线设置动画，你可以稍后将图像视图添加到 uiview 。

UIView 子class:

- (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 class:

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

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

Animate progress with filling the color of the border width of a UIImageView layer

objective-c

uiimageview

cabasicanimation

ios