Question

所以我已经在draw rect中建立了进度条，并希望动画它以随着进度的变化而水平向右移动，但我对下一步做什么感到迷失..如果有人能指出我正确的方向关于如何去做这件事，我将非常感谢...谢谢！下面是我现在的代码，它创建了drawrect。

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等函数为视图设置动画的方法......

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

是使用路径在CALayer上绘制控件。然后，您可以设置绘制路径的百分比的动画，它将为视图设置动画。

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

最后，我放弃了尝试使用我的OJFSegmentedProgressView动画进度。

但是，如果您经常设置进度（即每次发生某些事情都会设置进度），那么您就不需要为它设置动画，因为它会以较小的增量跳跃。

水平设置使用drawRect创建的进度条

1 个答案: