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