通过填充 UIImageView 层边框宽度的颜色动画进度 [英] Animate progress with filling the color of the border width of a UIImageView layer

问题描述

我有 UIImageView 并且我已经使它成为具有宽度层的圆形，如下图所示:

I have am UIImageView and I have made it to be circle with a width layer like in this image :

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

User can update the image and upload new one, I have a progress call back while image is uploaded. What I want is to animate the border with color while the image is uploaded, for example when user click upload the border start from top with green color and fill the width according to the progress.

我尝试使用此代码:

        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层的边框宽度?

But It shows the circle in wrong position and this aproch does not take a progress, it's static is there any way to fill the border width of the layer of UIImageView according to progress ?

推荐答案

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

UIImageView is meant to show the images. I would not suggest changing it's behaviour. Even though you subclass the UIImageView and try to draw something in it, the drawRect of it will not get called. Let the imageView be imageView and use UIView for the rest I suggest you to subclass the UIView and then draw a bezier path in it and animate the bezier path curve, You can later add the imageview to the 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 作为子视图添加到您刚刚创建的视图中.

Now you can add the imageview as a subview to the view you just created.

这篇关于通过填充 UIImageView 层边框宽度的颜色动画进度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！