アニメーションの進行

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とし、残りの部分には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]; 
} 

これはあなたを与えるだろう：

を今、あなたはビューにサブビューとして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];