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

这个是一个可爱的登录框页面，动画效果仿自国外网站readme.io。在GitHub上有人写了个objective-C版本，这里我翻译成Swift版的分享给大家。

效果图如下：

（1）当输入用户名时，猫头鹰的手是搭在登录框上

（2）当输入密码时，猫头鹰的手会遮住眼睛。这个是有动画效果的。实现方式其实就是图片移动动画。

（3）离开密码框时，猫头鹰手又会放下。

     

动态效果如下：

代码如下：

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