学会不一样的Loading图

2,875 阅读3分钟

前言:

越来越多的应用,在等待网络时使用闪烁的效果,那么这种效果,如何实现?且听我娓娓道来,相关代码已经放在github

gif图比效果偏快

本文概要

一、增加覆盖层以及动态效果

1、获取控件path

获取每个控件,并且求出控件的path(也就是控件最外边的那些线),原本的控件遮罩只是矩形,为了美观,我建议每个控件path添加圆角

// 获取每个子控件的path,用于后面的加遮盖 mask layer
    // 添加圆角
    UIBezierPath *defaultCoverblePath = [UIBezierPath bezierPathWithRoundedRect:subview.bounds cornerRadius:subview.frame.size.height/2.0/*subview.layer.cornerRadius*/];
    if ([subview isMemberOfClass:[UILabel class]] || [subview isMemberOfClass:[UITextView class]]) {
        defaultCoverblePath = [UIBezierPath bezierPathWithRoundedRect:subview.bounds cornerRadius:4];
    }
    UIBezierPath *relativePath = defaultCoverblePath;

    // 计算subview相对super的view的frame
    CGPoint offsetPoint = [subview convertRect:subview.bounds toView:view].origin; 
    [subview layoutIfNeeded];
    [relativePath applyTransform:CGAffineTransformMakeTranslation(offsetPoint.x, offsetPoint.y)];

    UIBezierPath *totalCoverablePath = [[UIBezierPath alloc] init];
    [totalCoverablePath appendPath:relativePath];

2、添加覆盖层,仅显示控件path的渐变色图层

1、 添加覆盖控件的覆盖层

2、 添加渐变色图层到挡住控件的覆盖层

3、为渐变色图层设置mask,从而显示mask面积下面的渐变色图层(原理看下方)

    // 添加挡住所有控件的覆盖层(挡住整superview,包括 superview 的子控件)
    self.viewCover.frame = CGRectMake(0, 0, view.frame.size.width, view.frame.size.height);
    [view addSubview:self.viewCover];

// gradientLayer CAGradientLayer是CALayer的一个子类,用来生成渐变色图层
    CAGradientLayer *colorLayer = [CAGradientLayer layer];
    colorLayer.frame = (CGRect)self.view.bounds;

    colorLayer.startPoint = CGPointMake(-1.4, 0);
    colorLayer.endPoint = CGPointMake(1.4, 0);
    
    // 颜色分割线
    colorLayer.colors = @[(__bridge id)[UIColor colorWithRed:0 green:0 blue:0 alpha:0.03].CGColor,(__bridge id)[UIColor colorWithRed:0 green:0 blue:0 alpha:0.1].CGColor,(__bridge id)[UIColor colorWithRed:1 green:1 blue:1 alpha:0.02].CGColor, (__bridge id)[UIColor colorWithRed:0 green:0 blue:0 alpha:0.06].CGColor, (__bridge id)[UIColor colorWithRed:0 green:0 blue:0 alpha:0.04].CGColor];

    colorLayer.locations = @[
                             [NSNumber numberWithDouble:colorLayer.startPoint.x],
                             [NSNumber numberWithDouble:colorLayer.startPoint.x],
                             @0,
                             [NSNumber numberWithDouble:0.2],
                             [NSNumber numberWithDouble:1.2]];

    [self.viewCover.layer addSublayer:colorLayer];
    
    // superview添加mask(能显示的遮罩)
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.path = totalCoverablePath.CGPath;
    maskLayer.fillColor = [UIColor whiteColor].CGColor;
    colorLayer.mask = maskLayer;

原理:

遮罩层必须至少有两个图层,上面的一个图层为“遮罩层”,下面的称“被遮罩层”;这两个图层中只有相重叠的地方才会被显示。也就是说在遮罩层中有对象的地方就是“透明”的,可以看到被遮罩层中的对象,而没有对象的地方就是不透明的,被遮罩层中相应位置的对象是看不见的。 它的原理是:上面一层是遮罩层,下面一层是被遮罩层。遮罩层上的图,自己是不显示的。它只起到一个透光的作用。假定遮罩层上是一个正圆,那么光线就会透过这个圆形,射到下面的被遮罩层上,只会显示一个圆形的图形。如果遮罩层上什么都没有,那么光线就无法透到下面来,那么下面的被遮罩层什么也显示不出来。

上述代码,得出如下效果:

上述效果,其实很多app就单纯这样使用了,但是我们为了更美化,决定为其增加动态效果

3、为渐变层增加动态效果

    // 动画 animate
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"locations"];
    animation.fromValue = colorLayer.locations;
    animation.toValue = @[
                          @0,
                          @1,
                          @1,
                          @1.2,
                          @1.2];
    animation.duration = 0.7;
    animation.repeatCount = HUGE;
    [animation setRemovedOnCompletion:NO];
    // 为渐变层增加添加动画
    [colorLayer addAnimation:animation forKey:@"locations-layer"];

二、移除所有覆盖层以及效果

    // 移除动态效果以及图层
    [self.colorLayer removeAllAnimations];
    [self.colorLayer removeFromSuperlayer];
    [self.maskLayer removeFromSuperlayer];
    // 移除控件的覆盖层
    [self.viewCover removeFromSuperview];

就这样,完成了一个主流APP的Loding图,我针对此代码还进行了特殊封装,代码已经放在github

demo图




欢迎关注技术公众号 「程序员大咖秀」