Как я могу сделать круговой индикатор прогресса, используя собственное изображение?

Я хочу сделать счетчик, как на этой картинке.

введите здесь описание изображения

У меня есть 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];

Если у вас есть идея, пожалуйста, поделитесь ею со мной. (это нормально, что ваша идея использует этот шнур или нет)

Спасибо.


xcode ios c iphone objective-c
person zmbdr    schedule 25.08.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вот довольно надежный пример, просто используйте его в качестве шаблона:

видео-шоу: 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"];
}
person Larry Pickles    schedule 25.08.2015