Анимированные круговая диаграмма в прошивкой

Question

Я пытаюсь создать анимированный круговую диаграмму в ИО, который действует в основном как это:

В двух словах, он начинает как серый круг, а также анимации прогрессирует стрелка, перемещается по кругу до тех пор, пока он не достигнет указанного мной процента.

Я использовал пример кода, который Захари Waldowski отвечал в эту SO вопрос:

Animated CAShapeLayer Pie

Вот получил меня до точки, где я могу создать базовую анимацию. Марочный кусок пирога растет, чтобы поразить правильный размер. То, с чем я борюсь, состоит в том, как сопоставить стрелку с анимацией, чтобы она затягивалась, когда растет кусок пирога.

Любые мысли о том, как я могу это сделать?

Answer 1

Хорошо, я нашел решение.

Основано на работе Zachary Waldowski создано (см. Мое оригинальное сообщение), я смог сделать все это в CALayer.

В двух словах, я рисую один наружный круг в темно-бордовый, меньший круг светло-серого цвета, поглаженный путь в белом, затем рисуем треугольник для наконечника стрелки вручную.

Вот соответствующий раздел кода, который делает волшебство:

- (void)drawInContext:(CGContextRef)context { 
    CGRect circleRect = CGRectInset(self.bounds, 1, 1); 
    CGFloat startAngle = -M_PI/2; 
    CGFloat endAngle = self.progress * 2 * M_PI + startAngle; 

    CGColorRef outerPieColor = [[UIColor colorWithRed: 137.0/255.0 green: 12.0/255.0 blue: 88.0/255.0 alpha: 1.0] CGColor]; 
    CGColorRef innerPieColor = [[UIColor colorWithRed: 235.0/255.0 green: 214.0/255.0 blue: 227.0/255.0 alpha: 1.0] CGColor]; 
    CGColorRef arrowColor = [[UIColor whiteColor] CGColor]; 

    // Draw outer pie 
    CGFloat outerRadius = CGRectGetMidX(circleRect); 
    CGPoint center = CGPointMake(CGRectGetMidX(circleRect), CGRectGetMidY(circleRect)); 

    CGContextSetFillColorWithColor(context, outerPieColor); 
    CGContextMoveToPoint(context, center.x, center.y); 
    CGContextAddArc(context, center.x, center.y, outerRadius, startAngle, endAngle, 0); 
    CGContextClosePath(context); 
    CGContextFillPath(context); 

    // Draw inner pie 
    CGFloat innerRadius = CGRectGetMidX(circleRect) * 0.45; 

    CGContextSetFillColorWithColor(context, innerPieColor); 
    CGContextMoveToPoint(context, center.x, center.y); 
    CGContextAddArc(context, center.x, center.y, innerRadius, startAngle, endAngle, 0); 
    CGContextClosePath(context); 
    CGContextFillPath(context); 

    // Draw the White Line 
    CGFloat lineRadius = CGRectGetMidX(circleRect) * 0.72; 
    CGFloat arrowWidth = 0.35; 

    CGContextSetStrokeColorWithColor(context, arrowColor); 
    CGContextSetFillColorWithColor(context, arrowColor); 

    CGMutablePathRef path = CGPathCreateMutable(); 
    CGContextSetLineWidth(context, 16); 
    CGFloat lineEndAngle = ((endAngle - startAngle) >= arrowWidth) ? endAngle - arrowWidth : endAngle; 
    CGPathAddArc(path, NULL, center.x, center.y, lineRadius, startAngle, lineEndAngle, 0); 
    CGContextAddPath(context, path); 
    CGContextStrokePath(context); 

    // Draw the Triangle pointer 
    CGFloat arrowStartAngle = lineEndAngle - 0.01; 
    CGFloat arrowOuterRadius = CGRectGetMidX(circleRect) * 0.90; 
    CGFloat arrowInnerRadius = CGRectGetMidX(circleRect) * 0.54; 

    CGFloat arrowX = center.x + (arrowOuterRadius * cosf(arrowStartAngle)); 
    CGFloat arrowY = center.y + (arrowOuterRadius * sinf(arrowStartAngle)); 

    CGContextMoveToPoint (context, arrowX, arrowY); // top corner 

    arrowX = center.x + (arrowInnerRadius * cosf(arrowStartAngle)); 
    arrowY = center.y + (arrowInnerRadius * sinf(arrowStartAngle)); 

    CGContextAddLineToPoint(context, arrowX, arrowY); // bottom corner 

    arrowX = center.x + (lineRadius * cosf(endAngle)); 
    arrowY = center.y + (lineRadius * sinf(endAngle)); 

    CGContextAddLineToPoint(context, arrowX, arrowY); // point 
    CGContextClosePath(context); 
    CGContextFillPath(context); 

    [super drawInContext: context]; 
} 

Answer 2

Имейте пирог со стрелкой в ​​качестве изображения.

На каждом шагу нарисуйте это изображение, слегка повернув его. Нарисуйте серый рисунок над изображением, выбирая правильные углы поворота изображения.