Horizontally animate progressbar created with drawRect

Question

So I've built out the progress bar in draw rect, and would like to animate it to move right horizontally as the progress changes, but am lost on what to do next.. If someone could point me in the right direction on how to go about this I would greatly appreciate it... thanks! Below is my code that I've got right now that's creating the drawrect.

ProgressBar - Made with DrawRect

- (void)drawRect:(CGRect)rect {
    //// General Declarations
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef context = UIGraphicsGetCurrentContext();

    //// Color Declarations
    UIColor* main_color_1 = [UIColor colorWithRed: 0.29 green: 0.357 blue: 0.133 alpha: 1];
    UIColor* main_color_2 = [UIColor colorWithRed: 0.341 green: 0.412 blue: 0.153 alpha: 1];
    UIColor* main_color_3 = [UIColor colorWithRed: 0.424 green: 0.498 blue: 0.243 alpha: 1];
    UIColor* main_color_4 = [UIColor colorWithRed: 0.514 green: 0.592 blue: 0.337 alpha: 1];
    UIColor* main_color_5 = [UIColor colorWithRed: 0.482 green: 0.561 blue: 0.306 alpha: 1];
    UIColor* back_rect_1 = [UIColor colorWithRed: 0.145 green: 0.141 blue: 0.141 alpha: 1];
    UIColor* back_rect_2 = [UIColor colorWithRed: 0.333 green: 0.333 blue: 0.333 alpha: 1];
    UIColor* back_rect_3 = [UIColor colorWithRed: 0.416 green: 0.416 blue: 0.416 alpha: 1];
    UIColor* back_rect_4 = [UIColor colorWithRed: 0.439 green: 0.439 blue: 0.439 alpha: 1];
    UIColor* bacK_rect_shadow = [UIColor colorWithRed: 0.145 green: 0.145 blue: 0.145 alpha: 1];

    //// Gradient Declarations
    NSArray* main_gradientColors = [NSArray arrayWithObjects:
                                    (id)main_color_1.CGColor,
                                    (id)main_color_2.CGColor,
                                    (id)main_color_3.CGColor,
                                    (id)main_color_4.CGColor,
                                    (id)main_color_5.CGColor, nil];
    CGFloat main_gradientLocations[] = {0, 0.15, 0.43, 0.78, 1};
    CGGradientRef main_gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)main_gradientColors, main_gradientLocations);
    NSArray* back_rect_gradientColors = [NSArray arrayWithObjects:
                                         (id)back_rect_1.CGColor,
                                         (id)back_rect_2.CGColor,
                                         (id)back_rect_3.CGColor,
                                         (id)back_rect_4.CGColor, nil];
    CGFloat back_rect_gradientLocations[] = {0, 0.35, 0.91, 1};
    CGGradientRef back_rect_gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)back_rect_gradientColors, back_rect_gradientLocations);

    //// Shadow Declarations
    UIColor* shadow = bacK_rect_shadow;
    CGSize shadowOffset = CGSizeMake(0.1, 1.1);
    CGFloat shadowBlurRadius = 12;

    //// back_rect Drawing
    UIBezierPath* back_rectPath = [UIBezierPath bezierPathWithRect: CGRectMake(0, 0, self.w, 26.5)];
    CGContextSaveGState(context);
    [back_rectPath addClip];
    CGContextDrawLinearGradient(context, back_rect_gradient, CGPointMake(148.5, 0), CGPointMake(148.5, 26.5), 0);
    CGContextRestoreGState(context);

    ////// back_rect Inner Shadow
    CGRect back_rectBorderRect = CGRectInset([back_rectPath bounds], -shadowBlurRadius, -shadowBlurRadius);
    back_rectBorderRect = CGRectOffset(back_rectBorderRect, -shadowOffset.width, -shadowOffset.height);
    back_rectBorderRect = CGRectInset(CGRectUnion(back_rectBorderRect, [back_rectPath bounds]), -1, -1);

    UIBezierPath* back_rectNegativePath = [UIBezierPath bezierPathWithRect: back_rectBorderRect];
    [back_rectNegativePath appendPath: back_rectPath];
    back_rectNegativePath.usesEvenOddFillRule = YES;

    CGContextSaveGState(context);
    {
        CGFloat xOffset = shadowOffset.width + round(back_rectBorderRect.size.width);
        CGFloat yOffset = shadowOffset.height;
        CGContextSetShadowWithColor(context,
                                    CGSizeMake(xOffset + copysign(0.1, xOffset), yOffset + copysign(0.1, yOffset)),
                                    shadowBlurRadius,
                                    shadow.CGColor);

        [back_rectPath addClip];
        CGAffineTransform transform = CGAffineTransformMakeTranslation(-round(back_rectBorderRect.size.width), 0);
        [back_rectNegativePath applyTransform: transform];
        [[UIColor grayColor] setFill];
        [back_rectNegativePath fill];
    }
    CGContextRestoreGState(context);

    //// main_rect Drawing
    UIBezierPath* main_rectPath = [UIBezierPath bezierPathWithRect: CGRectMake(0, 0.1, progress, 26.5)];
    CGContextSaveGState(context);
    [main_rectPath addClip];
    CGContextDrawLinearGradient(context, main_gradient, CGPointMake(116, 0), CGPointMake(116, 26.5), 0);
    CGContextRestoreGState(context);


    //// Cleanup
    CGGradientRelease(main_gradient);
    CGGradientRelease(back_rect_gradient);
    CGColorSpaceRelease(colorSpace);

}

Answer 1

The way to animate a view using a UIView animation or a function like UIProgressView...

- (void)setProgress:(float)progress animated:(BOOL)animated;

is to draw the control on a CALayer using a path. You can then animate the percentage of the path that gets drawn and it will animate the view.

Other than that you could use UIImageViews and change the frames of them where the frame width relates to the progress. etc...

In the end I gave up trying to animate the progress with my OJFSegmentedProgressView.

However, if you set the progress often enough (i.e. every time something happens set the progress) then you wouldn't need to animate it as it would jump in small increments.