卡片式弹出窗口

490 查看

Apple公司在WWDC 2016前后带来了10个重大更新，其中重中之重可谓是iOS 10的更新了。iOS 10被称作iOS 7之后迎来的最大升级，在所有的革新中，无论在通知中心的UI修改，还是各处的3D Touch弹出层，都能看到卡片式设计的影子。笔者不是设计师，但是以一个iOS开发者的角度来看，iOS的扁平化设计风格，逐渐正在往在Google I/O 2014提出的卡片式设计靠拢。（关于更多的卡片式设计资料可查看这里）。

img_0.jpg

处此大势之下，我也跟风来搞一波。首先先感谢原型图的作者Sarah，虽然我不是Dribbble的Pro用户，无法在您的作品上留言，但之后我会及时的联系你。以下就是原型图的效果了：

img_1.gif

动画分析

观察全部特效，我们发现了以下步骤

弹出卡片弹出窗口
自定义UITextField填写进度动画
卡片缩小至消失
弹出logo动画片尾

其中我们忽略掉一个效果，就是在原型图中，触摸键移动到NEXT按钮上的动效。因为在手机上，我们不可能持续在屏幕上滑动手指，而是采用轻按的方式。想必设计师当时忘记了使用场景，当做web来设计的。

一番动画分析之后，我们逐步击破。

动画拆解

对于弹出层的构建

笔者在实现之前，对于这个弹出的感觉就是在View上面附加一层View进行实现。我在awesome-ios搜索了其他其他关于Popup View实现的方式，在主流的NMPopUpView、CNPPopup等都是使用了ViewController来实现，虽然现在还没有明确这样做的好处，我觉的可能是减少了当前视图的负担。因为在弹出层中，有许多需要与触控手势的控件，所以对于View的负担过重。我们规划一下文件结构：

├── DGPopUpViewController

│ ├── DGPopUpView.h

│ ├── DGPopUpView.m

│ ├── DGPopUpViewController.h

│ ├── DGPopUpViewController.m

│ ├── DGPopUpViewLoginButton.h

│ ├── DGPopUpViewLoginButton.m

│ ├── DGPopUpViewTextView.h

│ └── DGPopUpViewTextView.m

img_2.png

结构一目了然，ViewController持有PopUpView，PopUpView中带有其他的自定义控件。我们写一个对外接口，来将这层ViewController的视图显示在当前视图上，但是其控制器还要保持原本的控制器。另外要注意的是，在添加背景色的时候，我们用到了UIColor的colorWithAlphaComponent方法，具体的作用是对当前颜色具有透明状态。当然我们使用更改alpha也可修改透明状态，但是对View的修改，会影响到该View的子视图。

#pragma mark - Override

#define DGPopUpViewBackgroundColor [[UIColor colorWithRed: 245 / 255.f green: 245 / 255.f blue: 245 / 255.f alpha: 1] colorWithAlphaComponent: 0.8]

- (instancetype) init {

isOpen = YES;

self.view.backgroundColor = DGPopUpViewBackgroundColor;

[self.view addSubview: self.popUpCloseButton];

[self.view addSubview: self.popUpView];

// 尾部动画通知实现

[[NSNotificationCenter defaultCenter] addObserver: self

selector: @selector(endAnimation)

name: @"end_animation"

object: nil];

// 尾部动画调试

// [self endAnimation];

return self;

}

#pragma mark - Add SubView

- (void) showInView: (UIView *)aView animated: (BOOL)animated {

self.view.center = aView.center;

[aView addSubview: self.view];

if (animated) {

[self showAnimation];

}

写完入口方法之后，我们需要做一些处理。例如，在弹出层弹出后，若点击非PopUpView部分，即可将PopUpView退出的方法即相关动画。另外，还需要构建弹出动画、尾部的logo动画。

#pragma mark - Removew SubView

- (void) removeAnimation {

self.popUpView.transform = CGAffineTransformMakeScale(1, 1);

[UIView animateWithDuration="crayon-cn">1);

[UIView animateWithDurationڄUI修改，还是各处的3D Touch弹出层，都能看到卡片式设计的影子。笔者不是设计师，但是以一个iOS开发者的角度来看，iOS的扁平化设计风格，逐渐正在往在Google I/O 2014提出的卡片式设计靠拢。（关于更多的卡片式设计资料可查看这里）。