快速封装Airbnb风格Loadingview

前言

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

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

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

RFLoadingView

思路

分析一下思路：

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

为了使动画更流畅不至于生硬，我们使用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