The login interface (with owl animation effect) implemented by Swift, iOS development

This is a lovely login box page, animation effect imitation from foreign website Readme.io. Someone wrote a objective-c version on the GitHub, and I'm here to share it with the swift version.

The effect chart is as follows:

(1) When the user name is entered, the owl's hand is on the login box

(2) When the password is entered, the owl's hand will cover the eye. This one has an animated effect. Implementation is actually a picture moving animation.

(3) When leaving the password box, the owl hand will be put down again.

The dynamic effect is as follows:

Import Uikit

Class Viewcontroller:uiviewcontroller, Uitextfielddelegate {
User Password input Box
var txtuser:uitextfield!
var txtpwd:uitextfield!

The distance from the left hand to the head
var offsetlefthand:cgfloat = 60

Left hand picture, right hand picture (eye-covering)
var imglefthand:uiimageview!
var imgrighthand:uiimageview!

Left hand picture, right hand picture (round)
var imglefthandgone:uiimageview!
var imgrighthandgone:uiimageview!

Login Box Status
var showtype:loginshowtype = Loginshowtype.none

Override Func Viewdidload () {
Super.viewdidload ()

Get screen Size
Let mainsize = Uiscreen.mainscreen (). bounds.size

Owl Head
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)

Owl's left hand (eye-covering)
Let Rectlefthand = CGRectMake (61-offsetlefthand, 90, 40, 65)
Imglefthand = Uiimageview (Frame:rectlefthand)
Imglefthand.image = UIImage (named: "Owl-login-arm-left")
Imglogin.addsubview (Imglefthand)

Owl's right hand (eye-covering)
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)

Login Box Background
Let Vlogin = UIView (Frame:cgrectmake, mainsize.width-30, 160)
VLogin.layer.borderWidth = 0.5
VLogin.layer.borderColor = Uicolor.lightgraycolor (). Cgcolor
Vlogin.backgroundcolor = Uicolor.whitecolor ()
Self.view.addSubview (Vlogin)

Owl left hand (round)
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)

The right hand of the Owl (round)
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)

User name Input Box
Txtuser = Uitextfield (Frame:cgrectmake (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

User name input box left icon
Let Imguser = Uiimageview (Frame:cgrectmake (11, 11, 22, 22))
Imguser.image = UIImage (named: "Iconfont-user")
txtuser.leftview!. Addsubview (Imguser)
Vlogin.addsubview (Txtuser)

Password input Box
Txtpwd = Uitextfield (Frame:cgrectmake (M, 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

Password input box left icon
Let imgpwd = Uiimageview (Frame:cgrectmake (11, 11, 22, 22))
Imgpwd.image = UIImage (named: "Iconfont-password")
txtpwd.leftview!. Addsubview (IMGPWD)
Vlogin.addsubview (TXTPWD)
}

Input box get focus start Edit
Func textfielddidbeginediting (Textfield:uitextfield)
{
If the user name is currently entered
If Textfield.isequal (txtuser) {
if (ShowType!= loginshowtype.pass)
{
ShowType = Loginshowtype.user
Return
}
ShowType = Loginshowtype.user

Play non-eye animation
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)
})
}
If the password name is currently entered
else if Textfield.isequal (txtpwd) {
if (ShowType = = Loginshowtype.pass)
{
ShowType = Loginshowtype.pass
Return
}
ShowType = Loginshowtype.pass

Play Eye-Mask animation
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 ()
}
}

Login Box Status Enumeration
Enum Loginshowtype {
Case NONE
Case USER
Case Pass
}