快速封装 Airbnb 风格 Loadingview

前言

一直在观察各种 App 的 LoadingView ，比较有代表性的是 MBProgressVHUD ， SVProgressHUD ，这两个使用得非常广泛，大到 QQ，支付宝，小到各种不知道名的 App，长时间的迭代让它们的逻辑非常完善，同时也导致了有些累赘，如果把它们当一个产品来分析，可以看出，它们在不断地增加需求和使用场景，有没有一个非常简洁的 HUD 没有我们不需要的那些多余的逻辑只是负责显示指示和隐藏呢？

好像没有，所有今天动手准备自己封装一个 LoadingView ，灵感来自 Airbnb，用过 Airbnb 的同学都知道，它的 LoadingView 很有风格,Airbnb 是几张图片循环翻转切换，当然我不准备复制他们的 idea，我准备做一个循环左右上下切换的 LoadingView 。

废话不多说，先来看一下，最终效果的原型图

思路

分析一下思路：

• 四条虚线交叉形成的区域就是我们能够看到的图片
• 首先准备两张图片，位置 中+上
• 开始第一段动画，向下切换，位置 变成 中+下
• 第一段动画结束，将下面的图片移动到右边，准备开始第二段动画
• 第二动画跟第一段类似，只是方向是从右向左，动画结束后 位置变成 中+左
• 将左边的图片移动到上方位置，完成一个循环

为了使动画更流畅不至于生硬，我们使用 iOS7 推出的带弹簧效果的 API

 
+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(7_0);
 

API 接口

在 API 接口设计上，我希望尽量简单实用，封装了两个方法，一个用来显示，一个用来隐藏，可以指定显示到某个 view，以及指定显示和隐藏时是否使用动画。

 
+ (void)showViewAddedTo:(UIView *)view animated:(BOOL)animated;
+ (void)hideViewForView:(UIView *)view animated:(BOOL)animated;

API 实现

根据刚才的分析，核心的动画实现已经有了思路，现在就是怎么设计内部代码实现，为了方便显示蒙版阻止加载的时候用户交互，我把 view 的背景颜色设置了一个淡灰色，view 的中间有三个子 view，一个是位于中间的容器 centralView ,负责显示我们所看到的区域，方便实现圆角和动画效果，里面加入两个子 view， firstView 和 secondView 用于显示动画切换的图片。

内部接口大概这样

@property (nonatomic, strong) UIView      *centralView;
@property (nonatomic, strong) UIImageView *firstView;
@property (nonatomic, strong) UIImageView *secondView;

为了防止多次添加 LoadingView ，在每次添加前，我们会查找该 view 是否存在，如果不存在，创建一个新的对象，如果存在直接跳过添加操作。反向遍历，快速查找。

+ (RFLoadingView *)loadingViewForView:(UIView *)view
{
    NSEnumerator *subviewsEnum = [view.subviews reverseObjectEnumerator];
    for (UIView *subview in subviewsEnum) {
        if ([subview isKindOfClass:self]) {
            return (RFLoadingView *)subview;
        }
    }
    
    return nil;
}

动画核心实现,两端动画，封装成两个方法

• - (void)animatedImageFromTopToBottom * - (void)animatedImageFromTopToBottom 具体实现如下

- (void)animatedImageFromTopToBottom
{
    [UIView animateWithDuration:0.3 delay:0.5 usingSpringWithDamping:0.7 initialSpringVelocity:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        _firstView.centerY  += kCenterViewSize;
        _secondView.centerY += kCenterViewSize;
    } completion:^(BOOL finished) {
        _firstView.centerX += kCenterViewSize;
        _firstView.centerY -= kCenterViewSize;
        
        [self changeFirstImage];
        [self animatedImageFromRightToLeft];
    }];
}

- (void)animatedImageFromRightToLeft
{
    
    [UIView animateWithDuration:0.3 delay:0.5 usingSpringWithDamping:0.7 initialSpringVelocity:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        _firstView.centerX  -= kCenterViewSize;
        _secondView.centerX -= kCenterViewSize;
    } completion:^(BOOL finished) {
        _secondView.centerX += kCenterViewSize;
        _secondView.centerY -= kCenterViewSize;
        
        if (self.alpha && self) {
            [self changeSecondImage];
            [self animatedImageFromTopToBottom];
        }
        
    }];
}

需要非常注意的是，一定要写上终止动画的条件，不然会无限循环，影响性能

show 和 hide

- (void)showAnimated:(BOOL)animated
{
    RFMainThreadAssert();
    
    self.alpha = 1;
    
    [UIView animateWithDuration:animated ? 0.3 : 0 animations:^{
        _centralView.alpha = 1;
    } completion:^(BOOL finished) {
        [self animatedImageFromTopToBottom];
    }];
}

- (void)hideAnimated:(BOOL)animated
{
    RFMainThreadAssert();
    
    [UIView animateWithDuration:animated ? 0.3 : 0 animations:^{
        self.alpha = 0;
    } completion:^(BOOL finished) {
        [self removeFromSuperview];
    }];
}

最终效果

• Github Demo 地址:
  RFLoadingViewDemo