动画特效四：精致登陆

本人录制技术视频地址：https://edu.csdn.net/lecturer/1899 欢迎观看。

传统的登陆界面只是一个静态的UI，让用户输入用户名及密码就可以了。但为了增加用户体验，我们可以为登陆界面适当的添加动画效果。示例的静态登陆界面如下：

添加动画后的效果如下：

一、动画效果分析：

1. title和两个文本框是从屏幕左侧推进过来的，并且有层次感。

2. 登陆按钮是从下面推上来的，并且具有弹簧效果。

3. 背景中的云朵是一直在漂浮移动的，并且当云朵离开了屏幕右侧，会立刻从屏幕左侧再次进入界面。

二、思路及代码

首先来分析第一点，要让title和两个文本框推进过来，默认情况下，应该使得他们的位置在屏幕之外，如下图所示

即上面的元素的CenterX = CenterX - 屏幕宽度，以title为例，在viewWillAppear中写入代码：

self.heading.centerX -= self.view.width;

然后在viewDidAppear中执行动画操作，思路其实很简单，就是将username的x值再还原。代码如下：

 [UIView animateWithDuration:0.5 animations:^{self.heading.centerX += self.view.width;}];

然而，观察动画，他们进来的时候有层次感，所以我们只需为各自的动画添加延时效果就可以了。比如username的动画代码如下：

[UIView animateWithDuration:0.5 delay:0.3 options:UIViewAnimationOptionCurveEaseInOut animations:^{self.username.centerX += self.view.width;} completion:nil];

我们再来分析第二点，登陆按钮的弹簧效果。我们可以这样设计，将登陆按钮的y值先加上一定的距离（比如30px）并将其透明度置为0，在执行动画的时候，用弹簧效果来显示，动画过程中，逐渐将透明度置为1。这样看起来登陆按钮有弹簧效果一样。

viewWillAppear中得代码：

self.loginButton.alpha = 0;self.loginButton.centerY += 30;self.loginButton.layer.cornerRadius = 5;

ViewDidAppear中得代码：

 [UIView animateWithDuration:0.5 delay:0.5 usingSpringWithDamping:0.5 initialSpringVelocity:0.0 options:UIViewAnimationOptionCurveLinear animations:^{self.loginButton.centerY -= 30;self.loginButton.alpha = 1.0;} completion:nil];

最后再来分析漂浮的云朵。由于有四个云朵，所以可以考虑直接使用IBOutletCollection

@property (strong, nonatomic) IBOutletCollection(UIImageView) NSArray *clouds;

I）各个云朵的位置是不一致的，所以他们在屏幕上面漂移的时间也不一致。

云朵漂移时间计算(假设跨过整个屏幕需要的时间为60s)：

1. 云朵需要漂移的距离应该是屏幕总宽度减去云朵的x值：self.view.width - cloud.x

2. 各个云朵漂移所需要的时间应该为 (self.view.width - cloud.x) / self.view.width * 60

II) 怎样达到无限漂移的效果？

应该是当云朵一离开屏幕右侧，即动画完成的时候，立刻再次调用动画。

说的也许有点晦涩了，立刻上代码：

// 云朵循环飘过
- (void)animateCloud:(UIImageView *)cloud {CGFloat flyDuration = (self.view.width - cloud.x) / self.view.width * 60;[UIView animateWithDuration:flyDuration delay:0.0 options:UIViewAnimationOptionCurveLinear animations:^{cloud.x = self.view.width;} completion:^(BOOL finished) {cloud.x = - cloud.width;[self animateCloud:cloud];}];
}

至此，代码就已经分析完毕了。完整的代码如下：

- (void)viewWillAppear:(BOOL)animated {[super viewWillAppear:animated];// move them(heading,username,password) off of the screen just before your view controller makes an appearanceself.heading.centerX -= self.view.width;self.username.centerX -= self.view.width;self.password.centerX -= self.view.width;// 登陆按钮默认不显示self.loginButton.alpha = 0;self.loginButton.centerY += 30;self.loginButton.layer.cornerRadius = 5;
}- (void)viewDidAppear:(BOOL)animated {[super viewDidAppear:animated];// animate label，textfield(进入视野；加延时操作，显得更有层次感)[UIView animateWithDuration:0.5 animations:^{self.heading.centerX += self.view.width;}];[UIView animateWithDuration:0.5 delay:0.3 options:UIViewAnimationOptionCurveEaseInOut animations:^{self.username.centerX += self.view.width;} completion:nil];[UIView animateWithDuration:0.5 delay:0.4 options:UIViewAnimationOptionCurveEaseInOut animations:^{self.password.centerX += self.view.width;} completion:nil];// animate login button (弹簧效果)[UIView animateWithDuration:0.5 delay:0.5 usingSpringWithDamping:0.5 initialSpringVelocity:0.0 options:UIViewAnimationOptionCurveLinear animations:^{self.loginButton.centerY -= 30;self.loginButton.alpha = 1.0;} completion:nil];//animateCloud(self.clouds[0]);for (UIImageView *cloud in self.clouds) {[self animateCloud:cloud];}
}// 云朵循环飘过
- (void)animateCloud:(UIImageView *)cloud {CGFloat flyDuration = (self.view.width - cloud.x) / self.view.width * 60;[UIView animateWithDuration:flyDuration delay:0.0 options:UIViewAnimationOptionCurveLinear animations:^{cloud.x = self.view.width;} completion:^(BOOL finished) {cloud.x = - cloud.width;[self animateCloud:cloud];}];
}

动画特效四：精致登陆相关推荐

精致的动画特效源代码
动画特效 css简介代码部分纯css3云彩动画效果 css3放大镜动画效果 jQuery游戏图片手风琴收缩切换特效 js百叶窗图片3D旋转切换特效纯CSS3制作飞舞的火箭动画简单易用的纯CSS ...
设计/前端关于AE动画/特效web实现的四种方法
1.通过动图/视频来实现如果你是设计师,并且熟练的运用Photoshop,那你一定对混合图层非常熟悉,他是实现两种图层消除颜色差值的一种快速实现方法,当然在web网页上也存在像Photoshop中的 ...
html适合app的登陆页面,纯CSS3创意手机APP登录界面动画特效
这是一款使用纯CSS3制作的效果非常有创意的手机APP登录界面动画特效.该特效在用户点击登录按钮之后,按钮变形为一个小球图标,并且小球会上下弹跳,之后小球会落入界面底部成为一个图标按钮. 使用方法 H ...
2022跨年烟花代码（四）HTML5全屏烟花动画特效
HTML5全屏烟花动画特效 html代码: <!doctype html> <html> <head> <meta charset="utf-8&q ...
分享web前端七款HTML5 Loading动画特效集锦
以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...
jQuery图片自动轮转动画特效
本例的功能是用jQuery图片自动轮转动画特效实现阿里巴巴首页图片动画效果. 所用到的图片截图: 从网上下载一个jQuery文件jquery.js: 具体HTML网页代码如下: <!DOCTYP ...
CSS3: 常用动画特效及4个最流行的动画库
一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...
iOS-各种动画特效
概述广播跑马灯/弹幕/直播点赞/烟花/雪花等动画特效, 后续增加~ 详细代码下载:http://www.demodashi.com/demo/10674.html 一.实现功能 1. 广播跑马灯 ...
loading窗口动画 web_分享web前端七款HTML5 Loading动画特效集锦
以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...

动画特效四：精致登陆

动画特效四：精致登陆相关推荐

最新文章

热门文章