ios - 使用drawRect创建的水平动画进度条

Question

所以我在绘制矩形中构建了进度条，并希望将其设置为随着进度变化而向右水平移动的动画，但我不知道下一步该做什么..如果有人能指出我正确的方向关于如何解决这个问题，我将不胜感激...谢谢!下面是我现在创建的绘制矩形的代码。

ProgressBar - 使用 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

使用 UIView 动画或诸如 UIProgressView 之类的函数来对 View 进行动画处理的方法...

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

是使用路径在CALayer上绘制控件。然后，您可以对绘制的路径的百分比进行动画处理，并且 View 也会进行动画处理。

除此之外，您可以使用 UIImageViews 并更改它们的框架，其中框架宽度与进度相关。等等……

最终我放弃了尝试使用 OJFSegmentedProgressView 来制作进度动画。

但是，如果您设置进度的频率足够高(即每次发生某事时都设置进度)，那么您就不需要为其设置动画，因为它会以较小的增量跳跃。