iOS动画系列之六：利用CABasic Animation完成带动画特效的登陆界面

发现毫无节制的继续拓展是一件没有尽头的事情。原计划五篇完成的CAAnimation系列已经这是第六篇了，还至少有三篇才会完成。

最开始分享这个iOS Apprentice Notes的时候就是打算从基础的部分开始，大致都过一遍以后再找专题或者本身感兴趣的部分深刻进去。如今忽然发现有点脱离了初衷，看到某些分享的点赞数多、浏览量大，就自觉不自觉的想要迎合一下宝宝们。

本身要把握一些节奏了哈，否则网络的部分、数据库的部分还有巴拉巴拉好多东西要等到猴年马月呀～

今天主要是借助完成一个带动画特效的登陆界面的结束掉我们的CABasic Animation部分。
在这个登陆界面，登录框、密码框、登陆按钮依次滑入，点击登陆按钮会有闪动的效果。
完成后的效果图以下：

Paste_Image.png

而后不要脸的本人又夹带了点私活，回顾了一下前面三篇关于CABasic Animation的内容。

CABasic Animation成果展现.gif

源代码能够在这里下载，里面有OC和Swift两版。git.oschina.net/atypical/CA…

iOS动画系列之CABasic-Animation（OC和Swift两版）

1. 画风突变的笑脸

画风突变的笑脸.gif

1.1 动画分析

根据上面的动图，看到其实动画就三个部分。
1， 眼睛在动画的时候左右进行了呼唤，而且位置进行了下移。
2，表明嘴巴的方块变大了。
3，动画播放完毕以后出现了文字提示“吓死宝宝了！”。

1.2 包含的动画

1，有平移动画，基础部分能够参考：iOS动画系列之四：基础动画之平移篇
2，有缩放动画，基础部分能够参考：iOS动画系列之五：基础动画之缩放篇&旋转篇
3，阻尼动画，就是眼睛变换位置后闪动的那一下。

1.3 代码实现

代码量其实很小，因此索性就一会儿贴上来了。而后我们再一点点说。

- (void)viewDidLoad {
    [super viewDidLoad];

    //设置头部标题的文字
    self.titleLabel.text = @"吓死宝宝了！";

    //暂时先隐藏头部标题，等动画播放完成再显示
    [self.titleLabel setHidden:YES];
}

//    触摸屏以后触发的方法
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{

    __weak typeof(self) weakSelf = self;

    //添加阻尼动画
    [UIView animateWithDuration:0.8 delay:0.2 usingSpringWithDamping:0.6 initialSpringVelocity:0.8 options:UIViewAnimationOptionTransitionNone animations:^{

        //改变黄色的中心点位置
        weakSelf.yellowView.center = CGPointMake(weakSelf.view.bounds.size.width - weakSelf.yellowView.center.x, weakSelf.yellowView.center.y + 30);

        //改变蓝色的中心点位置
        weakSelf.greenView.center = CGPointMake(weakSelf.view.bounds.size.width - weakSelf.greenView.center.x, weakSelf.greenView.center.y + 30);

        //改变嘴巴的高度和中心点y的位置
        CGRect frame = CGRectMake(weakSelf.mouseView.frame.origin.x, weakSelf.mouseView.frame.origin.y, weakSelf.mouseView.frame.size.width, 180);

        weakSelf.mouseView.frame = frame;

        //这句必定要加，否则看不到动画
        [weakSelf.view layoutIfNeeded];
    } completion:^(BOOL finished) {

        //添加阻尼动画     
        [UIView animateWithDuration:0.2 delay:0 usingSpringWithDamping:0.6 initialSpringVelocity:0.8 options:UIViewAnimationOptionTransitionNone animations:^{
            //把隐藏的标题文字设置为显示状态
            [weakSelf.titleLabel setHidden:NO];
        } completion:nil];
    }];

}复制代码

1.3.1 阻尼动画

这个我们前面尚未分享过，因此第一个先说说这个怎么实现的。
阻尼动画是经过UIView里面以下的方法实现的：

+(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**;复制代码

几个参数的解释：
duration : 动画时间
delay : 延迟时间
dampingRatio : 阻尼系数(弹性) 越小越弹
velocity : 速率
options : 选项
animations : 作动画的时候须要写的代码都放在这里，这是一个Block。
completion : 动画完成后要执行的block。

1.3.2 weakSelf

在使用UIView添加动画的时候，其实能够看到系统提供的都是Block。咱们所写的全部的动画都是在block中编写的。

一般在block里面咱们为了不形成循环引用，都使用weakSelf替代self进行修饰。使用以前须要先声明一下：

__weak typeof(self) weakSelf = self;复制代码

在这个动画里面其实并无形成循环引用，使用weakself和self都没有什么问题。可是我们是为了引出weakSelf，特地使用的。之后我们会分享一下弱引用和强引用。这里就是买个伏笔。（心机婊）

2. 心跳

2.1 动画分析

1，这里我们用到了缩放，基础部分能够参考：iOS动画系列之五：基础动画之缩放篇&旋转篇。
2， 照片的隐藏这部分动画，我们是经过修改imageView的alpha值实现的。

2.2 实现步骤

1， 公共方法的抽取。同前几篇文章提到的同样，宅胖懒。因此把会须要反复用到的方法都抽取出来了。此次抽取了建立Layer的公共方法、建立Animation的方法。
2，设置心跳图层的位置。这里刻意为了复习CALayer，专门没有建立imageView来加载心跳图片。
3，CALayer并不能直接放置❤️的图片，只能经过背景绘制的方法实现图片加载。
4，为❤️添加动画。
5，设置渐渐消失的图片，设置位置、逐渐消失的动画。

2.3 代码实现

代码稍微有一点点多，因此这里我们只放一下关键的部分。其他的代码能够经过文章后面的连接下载源代码。源代码中注释写的可详细可详细了。

//        将❤️图层绘制上图片
    heartLayer.contents = (__bridge id _Nullable)([heartImage CGImage]);

    //        设置照片消失的动画
    [UIView animateWithDuration:2.0 animations:^{
        photoImageView.alpha = 0;
    }];

    //        动画的节奏。心跳的节奏。为了让更有节奏感一些，使用了快进快出模式。
    scaleAni.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];复制代码

3. iOS实践：实现一个带动效的登陆界面

臭不要脸的，居然前面夹带了这么多私货！到这里才分享登陆界面。哈哈～

FreedomMobile是加拿大一家超级经济实惠就是便宜，没别的了的手机运营商。前身是wind，后来为了谋求更大的发展哼，确定是牌子作烂了，换个牌子从新开始。咱中国不少餐厅都这么干，换个名字，原班人马，就改了名字。

3.1 动画分析

1，非典型技术宅这么懒，确定不会用添加一个layer的方式作了。我们使用的都是UIView提供的动画方法。
2，PhoneNumber 和Pin 这两个输入框是平移动画。
3，登陆按钮是经过阻尼动画实现的闪动。

3.2 实现步骤

1，登陆页的UI搭建，这里偷懒用的是StoryBoard。
2，login按钮的点击事件：使用模态或者PUSH均可以，弹出登陆界面。
3，在登陆界面的viewWillAppear方法中，先把两个输入框还有按钮的位置都修改了，否则作动画的时候我们才能让这些控件移动到正确的位置上嘛。
4，在viewDidAppear方法中，实现动画。把两个输入框的位置放到正确地方，同时让登陆按钮显示出来。
5，实现登陆按钮点击事件：这里模拟的是登陆失败的情况，按钮会进行晃动。

3.3 须要注意的一些小地方

1，为了可以有一个相对舒服一点的视觉效果，对导航栏进行了隐藏。
2，修改了电池栏的颜色，能让全屏的时候看起来舒服一点。默认状况下，系统的电池栏颜色都是黑色。
3，修改了各个边框的圆角。若是有大量大量的圆角修改，请不要直接经过这种方式，会消耗必定的性能。就几个点缀一下，固然是怎么方便怎么来啦。
4，在登陆失败交互的时候记得关闭、打开交互效果。不让在动画的播放过程当中能够不停的点击登陆按钮，若是动画播放时间比较长，这个动画时间是会累加的😯。最后那个闪动按钮就在那里不停的左摆摆，右拜拜扭屁股啦～

//        将导航栏隐藏
 [self.navigationController setNavigationBarHidden:YES];

 //    设置电池栏的状态为白色
 - (UIStatusBarStyle)preferredStatusBarStyle{
 return UIStatusBarStyleLightContent;
 }

 //        设置登陆和注册两个btn的圆角
 self.signBtn.layer.cornerRadius = 5;
 self.loginBtn.layer.cornerRadius = 5;

 //在动画没有播放完成以前，关闭按钮的交互
 [weakSelf.loginBtn setEnabled:NO];复制代码

-----------------------华丽分割线，iOS动画系列全集连接-------------------------------------------------
第一篇：iOS动画系列之一：经过实战学习CALayer和透视的原理。作一个带时分秒指针的时钟动画(上)
第二篇：iOS动画系列之二：经过实战学习CALayer和透视的原理。作一个带时分秒指针的时钟动画。包含了OC和Swift两种源代码(下)
第三篇：iOS动画系列之三：Core Animation。介绍了Core Animation的经常使用属性和方法。
第四篇：CABasic Animation。iOS动画系列之四：基础动画之平移篇
第五篇：CABasic Animation。iOS动画系列之五：基础动画之缩放篇&旋转篇
第六篇：iOS动画系列之六：利用CABasic Animation完成带动画特效的登陆界面
第七篇：iOS动画系列之七：实现相似Twitter的启动动画
第八篇：iOS动画系列之八：使用CAShapeLayer绘画动态流量图
第九篇：iOS动画系列之九：实现点赞的动画及播放起伏指示器
第十篇：实战系列:绘制过山车场景