Animated progress view with CAGradientLayer(带翻译)

Posted 2020-06-13

原文网址：使用CAGradientLayer的动画精度条View

Modern software design is getting flatter and thinner all the time. Another trend that follows suit is the thin, one pixel progress bar that you see at the top of websites and apps. You’ve seen in it on Medium blogs, mobile Safari and other apps on ios 7. I’m going to show you how to create a component like this to use in your own apps. Here is what we’re going to create:

现代软件设计越来越扁平化，更薄所有的时间。下面西装的另一个趋势是，你的网站和应用程序的顶部看到薄，一个像素进度条。你已经看到了它在中等博客，移动Safari和iOS上7的其他应用程序，我将向你展示如何创建这样一个组件在自己的应用程序中使用。下面是我们要创建：

First thing we need to do is create a new UIView subclass and give it a name. Next we need to tell this class to use CAGradientLayer as its backing layer instead of the default CALayer. You can do this by overriding the layerClass method.

我们需要做的第一件事是创建一个新的UIView子类，并给它一个名字。接下来，我们需要告诉这个类使用CAGradientLayer作为其衬里层，而不是默认的CALayer。您可以通过重写做到这一点layerClass方法。

+ (Class)layerClass {    
    return [CAGradientLayer class];
}

CAGradientLayer is a pretty simple subclass of CALayer that adds a few additional properties. We’re going to be using the colors, startPoint and endPoint properties to create an animated horizontal gradient.

Now there are a couple ways to achieve this rainbow effect. One way, which I am going to use, is to create an array of UIColor objects with incremental hue values. In your initWithFrame: method add the following code:

CAGradientLayer是一个非常简单的子类的CALayer，增加了一些额外的属性。我们将要使用的颜色，的startPoint和端点属性来创建一个动画水平梯度。

现在有几种方法来实现这个彩虹效果。一种方式，这我会使用，是创建数组的UIColor增量对象的色调值。在您的initWithFrame：方法方法中添加以下代码：

// Use a horizontal gradient 
CAGradientLayer *layer = (id)[self layer];
[layer setStartPoint:CGPointMake(0.0, 0.5)];
[layer setEndPoint:CGPointMake(1.0, 0.5)];
 
// Create colors using hues in +5 increments
NSMutableArray *colors = [NSMutableArray array];
for (NSInteger hue = 0; hue <= 360; hue += 5) {
 
    UIColor *color;
    color = [UIColor colorWithHue:1.0 * hue / 360.0
                       saturation:1.0
                       brightness:1.0
                            alpha:1.0];
    [colors addObject:(id)[color CGColor]];
}
[layer setColors:[NSArray arrayWithArray:colors]];

Pretty straightforward. If you parent the view and run it in the simulator you’ll see our view has a horizontal gradient with all the colors in the spectrum.

Next, to create the moving effect we can cycle the colors in the colors array and use a layer animation. A single animation will move one color and repeat the process when finished. The next two methods will do the trick.

很简单。如果父视图并运行它在模拟器上你会看到我们的看法与在光谱中所有颜色水平渐变。

接下来，创建我们可以循环中的颜色移动效果的颜色阵列，并使用图层动画。单个动画将移动一个颜色，完成后重复上述过程。接下来的两个方法就可以了。

- (void)performAnimation {    
    // Move the last color in the array to the front
    // shifting all the other colors.
    CAGradientLayer *layer = (id)[self layer];    
    NSMutableArray *mutable = [[layer colors] mutableCopy];
    id lastColor = [[mutable lastObject] retain];
    [mutable removeLastObject];
    [mutable insertObject:lastColor atIndex:0];
    [lastColor release];
    NSArray *shiftedColors = [NSArray arrayWithArray:mutable];
    [mutable release];
 
    // Update the colors on the model layer
    [layer setColors:shiftedColors];
 
    // Create an animation to slowly move the gradient left to right.
    CABasicAnimation *animation;
    animation = [CABasicAnimation animationWithKeyPath:@"colors"];
    [animation setToValue:shiftedColors];
    [animation setDuration:0.08];
    [animation setRemovedOnCompletion:YES];
    [animation setFillMode:kCAFillModeForwards];
    [animation setDelegate:self];
    [layer addAnimation:animation forKey:@"animateGradient"];
}
 
- (void)animationDidStop:(CAAnimation *)animation finished:(BOOL)flag {
    [self performAnimation];
}

To add the indication of progress, we can use a simple layer mask to block out portions of our gradient. Add the following two properties to your header file:

要添加的进度指示，我们可以用一个简单的图层蒙版来阻挡我们梯度的部分。以下两个属性添加到您的头文件：

@property (nonatomic, readonly) CALayer *maskLayer;
@property (nonatomic, assign) CGFloat progress;

Be sure to @synthesize and then append the following to your initWithFrame:

一定要@synthesize，然后添加以下到您的initWithFrame：方法

maskLayer = [CALayer layer];
[maskLayer setFrame:CGRectMake(0, 0, 0, frame.size.height)];
[maskLayer setBackgroundColor:[[UIColor blackColor] CGColor]];
[layer setMask:maskLayer];

This creates a zero width mask, covering the entire view. The color of the mask doesn’t matter here but it is required to work properly. Now when our progress is updated we want to expand the width of the mask to reflect the value. Override the setProgress: method to contain the following:

这将创建一个零宽度面具，覆盖了整个视图。面膜的肤色并不重要，在这里，但它需要正常工作。现在，当我们的进展被更新我们要扩大掩模的宽度，以反映值。重写setProgress：方法包含以下内容：

- (void)setProgress:(CGFloat)value {
    if (progress != value) {
        // Progress values go from 0.0 to 1.0
        progress = MIN(1.0, fabs(value));
        [self setNeedsLayout];
    }
}
 
- (void)layoutSubviews {
    // Resize our mask layer based on the current progress
    CGRect maskRect = [maskLayer frame];
    maskRect.size.width = CGRectGetWidth([self bounds]) * progress;
    [maskLayer setFrame:maskRect];
}

Now when our progress value is set, we make sure it’s within the 0.0 to 1.0 range and invalidate the layout. Then in the next call to layoutSubviews we resize the mask based on its new value.

That’s it! You can view the entire project on GitHub.

现在，当我们的进展值设置，我们要确保它的0.0至1.0范围内，布局失效。然后到下一次调用layoutSubviews我们调整基于它的新值面具。

而已！您可以查看整个项目GitHub上。