The Card Interface For Signing Up

 

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

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

动画分析

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

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

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

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

动画拆解

对于弹出层的构建

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

├── DGPopUpViewController
│   ├── DGPopUpView.h
│   ├── DGPopUpView.m
│   ├── DGPopUpViewController.h
│   ├── DGPopUpViewController.m
│   ├── DGPopUpViewLoginButton.h
│   ├── DGPopUpViewLoginButton.m
│   ├── DGPopUpViewTextView.h
│   └── DGPopUpViewTextView.m

结构一目了然,ViewController持有PopUpViewPopUpView中带有其他的自定义控件。我们写一个对外接口,来将这层ViewController的视图显示在当前视图上,但是其控制器还要保持原本的控制器。另外要注意的是,在添加背景色的时候,我们用到了UIColorcolorWithAlphaComponent方法,具体的作用是对当前颜色具有透明状态。当然我们使用更改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: 0.6
                          delay: 0
                        options: UIViewAnimationOptionCurveEaseInOut
                     animations: ^{
                         self.popUpView.alpha = 0;
                     }
                     completion: ^(BOOL finished) {
                         [self.view removeFromSuperview];
                     }];
}

- (void) endAnimation {
    self.endView = [[UIImageView alloc] initWithImage: [UIImage imageNamed: @"end_logo"]];
    self.endView.center = self.view.center;
    [self.view addSubview: self.endView];
    
    
    self.endView.transform = CGAffineTransformMakeScale(0, 0);
    
    [UIView animateWithDuration: 1.4
                          delay: 0
                        options: UIViewAnimationOptionCurveEaseInOut
                     animations: ^{
                         self.endView.transform = CGAffineTransformMakeScale(0.6, 0.6);
                     }
                     completion: ^(BOOL finished) {
                         
                     }];
}

#pragma mark - Animation
- (void) showAnimation {
    self.view.alpha = 0.0;
    self.popUpView.transform = CGAffineTransformMakeScale(0, 0);
    [UIView animateWithDuration: 0.25
                     animations: ^{
                         self.view.alpha = 1.0;
                     }
                     completion: ^(BOOL finished) {
                         [self showPopUpView];
                     }];
}

- (void) showPopUpView {
    self.popUpView.alpha = 0.5;
    [UIView animateWithDuration: 0.8
                          delay: 0
                        options: UIViewAnimationOptionCurveEaseOut
                     animations: ^{
                         self.popUpView.transform = CGAffineTransformMakeScale(1, 1);
                         self.popUpView.alpha = 1;
                     }
                     completion: ^(BOOL finished) {
                         
                     }];
}

弹出层

在弹出层View中,我们需要做的就是在上面增加控件。弹出层需要持有的控件有三个:标题Label、自定义TextField、按钮Button。另外,需要他自身需要处理点击按钮正常退出的动画。这种弹出层退出方式与在控制器中的退出方式很显然响应者不同。在用户主动请求退出的过程中,用户主要是以控制器View作为交互对象,而点击Next按钮后的退出时与弹出层View为交互对象。这样写能让我们的代码更清晰,可读性加强。

#pragma mark - Close Animation
- (void) closeAnimation {
    self.transform = CGAffineTransformMakeScale(1, 1);
    
    [UIView animateWithDuration: 0.6
                          delay: 0.3
                        options: UIViewAnimationOptionCurveEaseInOut
                     animations: ^{
                         self.transform = CGAffineTransformMakeScale(0.01, 0.01);
                         self.superview.alpha = 1;
                     }
                     completion: ^(BOOL finished) {
                         [[NSNotificationCenter defaultCenter] postNotificationName: @"end_animation" object: nil];
                         [self removeFromSuperview];
                     }];
    
}

自定义控件

这里用到的自定义有两个,第一个是NEXT的Button。仔细观察一下原型图,Button主要有两个特点:

  • 渐出动画是在PopUpView之前就开始,而且是独立渐出
  • Button的背景色是一种渐变色

对于第一个动效,只需要在PopUpView启动退出动画之前,先执行Button内部的退出动画。动画无论退出还是出现都是类似的CGAffineTransformMakeScale效果,无需讲述。

#pragma mark - Animation
- (void) pressAnimation {
    NSLog(@"click");
    self.transform = CGAffineTransformMakeScale(1, 1);
    
    [UIView animateWithDuration: 0.6
                          delay: 0
                        options: UIViewAnimationOptionCurveEaseInOut
                     animations: ^{
                         self.transform = CGAffineTransformMakeScale(0.01, 0.01);
                     }
                     completion: ^(BOOL finished) {
                         [self removeFromSuperview];
                     }];
    
    [[NSNotificationCenter defaultCenter] postNotificationName: @"NEXT_Button" object: nil];
}

渐变色的处理我们可以使用CAGradientLayer这个类。CAGradientLayer是用来生成两种或更多颜色平滑渐变,使用改类的好处在于绘制时使用了硬件加速(官方文档)。我们只要依次写出各个关键点,就可以确定颜色的一个渐变方向。直接看代码,很容易就能看懂。

#pragma mark - Set Color
- (void) setColor {
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = self.bounds;
    gradientLayer.locations = @[@0.3, @0.8];
    gradientLayer.colors = @[(__bridge id)[UIColor colorWithRed: 56 / 255.f green: 195 / 255.f blue: 227 / 255.f alpha: 1].CGColor,
                             (__bridge id)[UIColor colorWithRed: 16 / 255.f green: 156 / 255.f blue: 197 / 255.f alpha: 1].CGColor];
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(1, 0);
    
    [self.layer addSublayer: gradientLayer];
}

我们最后来说说自定义的TextFieldTextField我们仅仅是在下方增加了一个类似于进度条的动画。具体的逻辑是这样,当我们手势响应一个TextField之后,我们就会启动动画,让进度条滑动到定点位置。而当我们退出响应该TextField的时候,先要检查text部分是否为空,然后在决定进度条是否要保存状态。先给出代码,解释一下。

#pragma mark - UITextFieldDelegate
- (void)textFieldDidBeginEditing: (UITextField *)textField {
    // 确定动画类型
    CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath: @"transform.scale.x"];
    // 确定锚点
    [self.progressLine.layer setAnchorPoint: CGPointMake(0, 0.5)];
    // 持续时间
    basic.duration = 0.3;
    // 重复次数
    basic.repeatCount = 1;
    // 结束后是否删除
    basic.removedOnCompletion = NO;
    // 状态点数值
    basic.fromValue = [NSNumber numberWithFloat: 1];
    basic.toValue = [NSNumber numberWithFloat: 280];
    // 完成时保存状态
    basic.fillMode = kCAFillModeForwards;
    // 增加缓动函数
    basic.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn];
    [self.progressLine.layer addAnimation: basic forKey: nil];
}

- (void)textFieldDidEndEditing:(UITextField *)textField{
    if ([self.textField.text isEqualToString: @""]) {
        CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath: @"transform.scale.x"];
        [self.progressLine.layer setAnchorPoint: CGPointMake(0, 0.5)];
        basic.duration = 0.3;
        basic.repeatCount = 1;
        basic.removedOnCompletion = NO;
        basic.fromValue = [NSNumber numberWithFloat: 280];
        basic.toValue = [NSNumber numberWithFloat: 1];
        basic.fillMode = kCAFillModeForwards;
        basic.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn];
        [self.progressLine.layer addAnimation: basic forKey: nil];
    }
}

这里我们不在对View层进行动画,而是改用CABasicAnimation。好处仍旧是硬件加速。这里我们特别要注意一个地方。刚开始接触CABasicAnimation的时候,可能不太理解fromValuetoValue。这两个数值既不反应屏幕坐标,也不表示像素数。它的意思是起始尺寸数值的整数倍数。也就是说,这里我们假设进度条的长度为x,则该动画的过程就是把进度条长度线性的从x增长到280x,这里也就反应了一个问题,我们在设定进度条初值的时候不能设置成0

结束语

大体上,整个卡片登录界面的实现思路就是这样,最后再次感谢原型图作者。在进行动画制作之后,强烈建议读者去学习《iOS Core Animation: Advanced Techniques》这本书,之后会对Core Animation会有更深层的认识。


DGPopUpViewController repo