前言
一直在观察各种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
