iOS动画系列之六:利用CABasic Animation完成带动画特效的登录界面1. 画风突变的笑脸2. 心跳3. iOS实践:实现一个带动效的登录界面

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

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

自己要把握一些节奏了哈,不然网络的部分、数据库的部分还有巴拉巴拉好多东西要等到猴年马月呀~

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

Paste_Image.png

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

CABasic Animation成果展示.gif

源代码可以在这里下载,里面有OC和Swift两版。https://git.oschina.net/atypical/CABasic-Animation.git

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动画系列之九:实现点赞的动画及播放起伏指示器 第十篇:实战系列:绘制过山车场景

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android 开发者

Android P 中的新文本特性

在 “What’s new in Android P Beta” 中我们已经谈到 Android 的两个新文本特性。现在既然 Android P Beta 3 ...

692
来自专栏Coding迪斯尼

VUE+WebPack前端游戏设计:实现物体的拖拽动态特效

843
来自专栏腾讯社交用户体验设计

SVG fallback 及可读性

953
来自专栏何俊林

Android TV开发总结(三)构建一个TV app的焦点控制及遇到的坑

前言:关于《TV Metro界面(仿泰捷视频TV版)源码解析》由于都是相关代码,就不发公众号了,有兴趣的可以看链接:http://blog.csdn.net/h...

23110
来自专栏我有一个梦想

Python 项目实践一(外星人入侵小游戏)第五篇

接着上节的继续学习,在本章中,我们将结束游戏《外星人入侵》的开发。我们将添加一个Play按钮,用于根据需要启动游戏以及在游戏结束后重启游戏。我们还将修改这个游戏...

1918
来自专栏拂晓风起

HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具

1、js配合传统css属性控制,可以使用setTimeout或者高级的requestAnimationFrame

891
来自专栏WebHub

简单了解下无障碍设计模式

一款设计良好的产品可供所有能力的用户使用,包括视力低下、失明、听力障碍、认知障碍或运动障碍的用户。改进产品的无障碍功能可以增强所有用户的可用性,这是非常值得做的...

894
来自专栏腾讯社交用户体验设计

你离高效制作动画只差一篇文章的距离

1132
来自专栏破晓之歌

高德地图开放平台 原

平台地址:http://lbs.amap.com/api/javascript-api/example/amap-ui-districtcluster/cust...

2902
来自专栏娱乐心理测试

Ios常用第三方动画框架(三)

593

扫码关注云+社区