Swift - 一个纯代码实现的登录界面（带猫头鹰动画效果）

于 2017-06-17 22:10:05 发布
阅读量3.8k 收藏 13
点赞数 2
分类专栏： # Swift
这个是一个可爱的登录框页面，动画效果仿自国外网站readme.io。在GitHub上有人写了个objective-C版本，这里我翻译成Swift版的分享给大家。

效果图如下：
（1）当输入用户名时，猫头鹰的手是搭在登录框上
（2）当输入密码时，猫头鹰的手会遮住眼睛。这个是有动画效果的。实现方式其实就是图片移动动画。
（3）离开密码框时，猫头鹰手又会放下。
原文:Swift - 一个纯代码实现的登录界面（带猫头鹰动画效果）   原文:Swift - 一个纯代码实现的登录界面（带猫头鹰动画效果）   原文:Swift - 一个纯代码实现的登录界面（带猫头鹰动画效果）

动态效果如下：
原文:Swift - 一个纯代码实现的登录界面（带猫头鹰动画效果）


代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
import  UIKit
 
class  ViewController :  UIViewController ,  UITextFieldDelegate  {
     //用户密码输入框
     var  txtUser: UITextField !
     var  txtPwd: UITextField !
     
     //左手离脑袋的距离
     var  offsetLeftHand: CGFloat  = 60
     
     //左手图片,右手图片(遮眼睛的)
     var  imgLeftHand: UIImageView !
     var  imgRightHand: UIImageView !
     
     //左手图片,右手图片(圆形的)
     var  imgLeftHandGone: UIImageView !
     var  imgRightHandGone: UIImageView !
     
     //登录框状态
     var  showType: LoginShowType  =  LoginShowType . NONE
 
     override  func  viewDidLoad() {
         super .viewDidLoad()
         
         //获取屏幕尺寸
         let  mainSize =  UIScreen .mainScreen().bounds.size
         
         //猫头鹰头部
         let  imgLogin =   UIImageView (frame: CGRectMake (mainSize.width/2-211/2, 100, 211, 109))
         imgLogin.image =  UIImage (named: "owl-login" )
         imgLogin.layer.masksToBounds =  true
         self .view.addSubview(imgLogin)
         
         //猫头鹰左手(遮眼睛的)
         let  rectLeftHand =  CGRectMake (61 - offsetLeftHand, 90, 40, 65)
         imgLeftHand =  UIImageView (frame:rectLeftHand)
         imgLeftHand.image =  UIImage (named: "owl-login-arm-left" )
         imgLogin.addSubview(imgLeftHand)
         
         //猫头鹰右手(遮眼睛的)
         let  rectRightHand =  CGRectMake (imgLogin.frame.size.width / 2 + 60, 90, 40, 65)
         imgRightHand =  UIImageView (frame:rectRightHand)
         imgRightHand.image =  UIImage (named: "owl-login-arm-right" )
         imgLogin.addSubview(imgRightHand)
         
         //登录框背景
         let  vLogin =   UIView (frame: CGRectMake (15, 200, mainSize.width - 30, 160))
         vLogin.layer.borderWidth = 0.5
         vLogin.layer.borderColor =  UIColor .lightGrayColor(). CGColor
         vLogin.backgroundColor =  UIColor .whiteColor()
         self .view.addSubview(vLogin)
         
         //猫头鹰左手(圆形的)
         let  rectLeftHandGone =  CGRectMake (mainSize.width / 2 - 100,
             vLogin.frame.origin.y - 22, 40, 40)
         imgLeftHandGone =  UIImageView (frame:rectLeftHandGone)
         imgLeftHandGone.image =  UIImage (named: "icon_hand" )
         self .view.addSubview(imgLeftHandGone)
         
         //猫头鹰右手(圆形的)
         let  rectRightHandGone =  CGRectMake (mainSize.width / 2 + 62,
             vLogin.frame.origin.y - 22, 40, 40)
         imgRightHandGone =  UIImageView (frame:rectRightHandGone)
         imgRightHandGone.image =  UIImage (named: "icon_hand" )
         self .view.addSubview(imgRightHandGone)
         
         //用户名输入框
         txtUser =  UITextField (frame: CGRectMake (30, 30, vLogin.frame.size.width - 60, 44))
         txtUser.delegate =  self
         txtUser.layer.cornerRadius = 5
         txtUser.layer.borderColor =  UIColor .lightGrayColor(). CGColor
         txtUser.layer.borderWidth = 0.5
         txtUser.leftView =  UIView (frame: CGRectMake (0, 0, 44, 44))
         txtUser.leftViewMode =  UITextFieldViewMode . Always
         
         //用户名输入框左侧图标
         let  imgUser =   UIImageView (frame: CGRectMake (11, 11, 22, 22))
         imgUser.image =  UIImage (named: "iconfont-user" )
         txtUser.leftView!.addSubview(imgUser)
         vLogin.addSubview(txtUser)
         
         //密码输入框
         txtPwd =  UITextField (frame: CGRectMake (30, 90, vLogin.frame.size.width - 60, 44))
         txtPwd.delegate =  self
         txtPwd.layer.cornerRadius = 5
         txtPwd.layer.borderColor =  UIColor .lightGrayColor(). CGColor
         txtPwd.layer.borderWidth = 0.5
         txtPwd.secureTextEntry =  true
         txtPwd.leftView =  UIView (frame: CGRectMake (0, 0, 44, 44))
         txtPwd.leftViewMode =  UITextFieldViewMode . Always
         
         //密码输入框左侧图标
         let  imgPwd =   UIImageView (frame: CGRectMake (11, 11, 22, 22))
         imgPwd.image =  UIImage (named: "iconfont-password" )
         txtPwd.leftView!.addSubview(imgPwd)
         vLogin.addSubview(txtPwd)
     }
     
     //输入框获取焦点开始编辑
     func  textFieldDidBeginEditing(textField: UITextField )
     {
         //如果当前是用户名输入
         if  textField.isEqual(txtUser){
             if  (showType !=  LoginShowType . PASS )
             {
                 showType =  LoginShowType . USER
                 return
             }
             showType =  LoginShowType . USER
             
             //播放不遮眼动画
             UIView .animateWithDuration(0.5, animations: { () ->  Void  in
                 self .imgLeftHand.frame =  CGRectMake (
                     self .imgLeftHand.frame.origin.x -  self .offsetLeftHand,
                     self .imgLeftHand.frame.origin.y + 30,
                     self .imgLeftHand.frame.size.width,  self .imgLeftHand.frame.size.height)
                 self .imgRightHand.frame =  CGRectMake (
                     self .imgRightHand.frame.origin.x + 48,
                     self .imgRightHand.frame.origin.y + 30,
                     self .imgRightHand.frame.size.width,  self .imgRightHand.frame.size.height)
                 self .imgLeftHandGone.frame =  CGRectMake (
                     self .imgLeftHandGone.frame.origin.x - 70,
                     self .imgLeftHandGone.frame.origin.y, 40, 40)
                 self .imgRightHandGone.frame =  CGRectMake (
                     self .imgRightHandGone.frame.origin.x + 30,
                     self .imgRightHandGone.frame.origin.y, 40, 40)
             })
         }
         //如果当前是密码名输入
         else  if  textField.isEqual(txtPwd){
             if  (showType ==  LoginShowType . PASS )
             {
                 showType =  LoginShowType . PASS
                 return
             }
             showType =  LoginShowType . PASS
             
             //播放遮眼动画
             UIView .animateWithDuration(0.5, animations: { () ->  Void  in
                 self .imgLeftHand.frame =  CGRectMake (
                     self .imgLeftHand.frame.origin.x +  self .offsetLeftHand,
                     self .imgLeftHand.frame.origin.y - 30,
                     self .imgLeftHand.frame.size.width,  self .imgLeftHand.frame.size.height)
                 self .imgRightHand.frame =  CGRectMake (
                     self .imgRightHand.frame.origin.x - 48,
                     self .imgRightHand.frame.origin.y - 30,
                     self .imgRightHand.frame.size.width,  self .imgRightHand.frame.size.height)
                 self .imgLeftHandGone.frame =  CGRectMake (
                     self .imgLeftHandGone.frame.origin.x + 70,
                     self .imgLeftHandGone.frame.origin.y, 0, 0)
                 self .imgRightHandGone.frame =  CGRectMake (
                     self .imgRightHandGone.frame.origin.x - 30,
                     self .imgRightHandGone.frame.origin.y, 0, 0)
             })
         }
     }
     
     override  func  didReceiveMemoryWarning() {
         super .didReceiveMemoryWarning()
     }
}
 
//登录框状态枚举
enum  LoginShowType  {
     case  NONE
     case  USER
     case  PASS
}
源码下载： hangge_926.zip
原文出自： www.hangge.com   转载请保留原文链接： http://www.hangge.com/blog/cache/detail_927.html
量子物理学
关注
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值