如何使用自己的圖片製作圓形進度表？

Question

我想製作一張像這樣的照片。

我有2倍的圖像 - 彩色儀表圖像和灰色儀表圖像。

我想通過使用它們來製作上圖中所示的主題。

但我沒有任何想法。

我得到了一些示例代碼，用於製作圓形儀表並在其中填充一些顏色。這裏是代碼：

CAShapeLayer *circle=[CAShapeLayer layer]; 
    circle.path=[UIBezierPath bezierPathWithArcCenter:CGPointMake(29, 29) radius:27 startAngle:2*M_PI*0-M_PI_2 endAngle:2*M_PI*1-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]; 

如果你有一個想法，請與我分享。 （這可以確保你的想法使用這根線）

謝謝。

Answer 1

這裏有一個相當強大的例子，只是以此爲模板：

視頻顯示：https://www.youtube.com/watch?v=ucYqb0Gs1_8&feature=youtu.be

只是調用第二種方法，第二種方法將調用第一種方法，有你有它。將其放入視圖控制器視圖中，您將看到魔術發生：

#define DEGREES_TO_RADIANS(degrees) ((M_PI * degrees)/ 180) 


-(void)this 
{ 
    [CATransaction begin]; 
    [CATransaction setAnimationDuration:3.5]; 
    [CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]]; 
    CABasicAnimation * drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
    drawAnimation.removedOnCompletion = YES; 
    drawAnimation.autoreverses = YES; 
    drawAnimation.repeatCount = INFINITY; 
    drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f]; 
    drawAnimation.toValue = [NSNumber numberWithFloat:1.f]; 
    drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; 
    [arc addAnimation:drawAnimation forKey:@"thisone"]; 
    [CATransaction commit]; 

    [CATransaction begin]; 
    [CATransaction setAnimationDuration:3.5]; 
    [CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]]; 
    CABasicAnimation *drawAnimation1 = [CABasicAnimation animationWithKeyPath:@"strokeStart"]; 
    drawAnimation1.removedOnCompletion = YES; 
    drawAnimation1.autoreverses = YES; 
    drawAnimation1.repeatCount = INFINITY; 
    drawAnimation1.fromValue = [NSNumber numberWithFloat:0.0]; 
    drawAnimation1.toValue = [NSNumber numberWithFloat:-1.0]; 
    [arc addAnimation:drawAnimation1 forKey:@"myKey"]; 
    [CATransaction commit]; 
} 


-(void)doGradientoutline { 

    float th = 50.00; 
    UIView * hellowkitt = [UIView new]; 
    [hellowkitt setFrame:CGRectMake(SCREEN_WIDTH/2-(30+th)*2/2-th, SCREEN_HEIGHT/4-th, (30+th)*2+th*2, (30+th)*2+th*2)]; 
    [self.view addSubview: hellowkitt]; 

    UIView * imageView = [UIView new]; 
    [imageView setFrame:CGRectMake(th, th, hellowkitt.frame.size.width-th*2, hellowkitt.frame.size.height-th*2)]; 
    [imageView setClipsToBounds:true]; 
    [imageView.layer setCornerRadius:(hellowkitt.frame.size.width-th*2)/2]; 
    [hellowkitt addSubview:imageView]; 

    UIImageView * imageView1 = [UIImageView new]; 
    [imageView1 setImage:[UIImage imageNamed:@"df"]]; 
    [imageView1 setFrame:CGRectMake(hellowkitt.frame.origin.x+th, hellowkitt.frame.origin.y+th, hellowkitt.frame.size.width-th*2, hellowkitt.frame.size.height-th*2)]; 
    [imageView1 setClipsToBounds:true]; 
    [imageView1.layer setCornerRadius:imageView1.frame.size.height/2]; 
    [self.view addSubview:imageView1]; 

    int radius = imageView.frame.size.width/2+7; 
    arc = [CAShapeLayer layer]; 
    [arc setFrame:imageView.frame]; 

    UIBezierPath * aa =[UIBezierPath bezierPathWithArcCenter:CGPointMake(imageView.center.x, imageView.center.y) radius:radius startAngle:DEGREES_TO_RADIANS(0) endAngle:DEGREES_TO_RADIANS(360) clockwise:YES]; 
    arc.path = aa.CGPath; 

    arc.bounds = CGPathGetBoundingBox(aa.CGPath); 
    arc.frame = arc.bounds; 
    arc.fillColor = [UIColor clearColor].CGColor; 
    arc.strokeColor = [UIColor purpleColor].CGColor; 
    arc.lineWidth = 40; 
    [arc setLineCap:@"round"]; 

    CAGradientLayer *gradientLayer = [CAGradientLayer layer]; 
    gradientLayer.frame = CGRectMake(0, 0, hellowkitt.frame.size.width, hellowkitt.frame.size.height); 

    gradientLayer.colors = @[(__bridge id)[UIColor paperColorRedA700].CGColor, (__bridge id)[UIColor paperColorBlueA700].CGColor]; 
    gradientLayer.backgroundColor = (__bridge CGColorRef)((__bridge id)[UIColor blackBean].CGColor); 

    gradientLayer.startPoint = CGPointMake(0.0,0.5); 
    gradientLayer.endPoint = CGPointMake(1.0,0.51); 

    CABasicAnimation *drawAnimation11 = [CABasicAnimation animationWithKeyPath:@"colors"]; 
    drawAnimation11.duration   = 2.00; 
    drawAnimation11.repeatCount   = HUGE_VAL; 
    drawAnimation11.removedOnCompletion = NO; 
    drawAnimation11.fillMode = kCAFillModeForwards; 
    drawAnimation11.autoreverses = true; 
    drawAnimation11.fromValue = @[(__bridge id)[UIColor paperColorRedA700].CGColor, (__bridge id)[UIColor paperColorBlueA700].CGColor]; 

    drawAnimation11.toValue = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor blueColor].CGColor]; 

    drawAnimation11.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; 

    CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"]; 
    animation.byValue = @(4 * M_PI); 
    animation.duration = 1.5f; 
    animation.repeatCount = INFINITY; 
    animation.removedOnCompletion = NO; 

    [self this]; 

    gradientLayer.mask = arc; 

    [hellowkitt.layer addSublayer:gradientLayer]; 
    [hellowkitt.layer addAnimation:animation forKey:@"fasdfaasdf"]; 
    [gradientLayer addAnimation:drawAnimation11 forKey:@"thatone"]; 
}