現在又很多軟體為了吸引更多的使用者量, 使用了各種各樣炫的動畫效果, 我們也不能落下, 所以我們也要給我們的UI介面新增一些趣味, 讓我們來看看吧.

1.佈局介面

2.自定義UITextField

PS: 在這之前, 我們需要建立一個CustomUITextFieldAnimation類, 並且繼承於UITextField.
現在讓我們一起來封裝一下CustomUITextFieldAnimation類.

// 1.自定義列舉型別 
enum CSTextFieldAnimation: Int { 
    case CSAnimationTypeUpDown // 上下抖動
 

    case CSAnimationTypeLeftRight // 左右抖動
    case CSAnimationTypeBlowUp // 縮放動畫
    case CSAnimationTypeEasyInOut // 透明動畫
    case CSAnimationTypeNone // 沒有動畫
} 


class CustomUITextFieldAnimation: UITextField {

    // 2.視察所要設定的placeholderLabel的文字顏色 
    @IBInspectable var normalColor: UIColor? { willSet { 
        // 2.1.設定csPlaceholderLabel的textColor 
 

        csPlaceholderLabel?.textColor = newValue 
        } 
    } 

    // 3.視察點選的顏色 
    @IBInspectable var selectedColor: UIColor? 

    // 4.獲取第一個列舉型別作為預設動畫效果 
    var animationType = CSTextFieldAnimation.CSAnimationTypeUpDown 

    // 5.宣告一個空的回撥函式 
    var operateWhenResignFirstResponder:(() -> ())? 

    // 6.自定義一個私有方法獲取_placeholderLabel控制元件 
 

    private var csPlaceholderLabel: UILabel? { get { 
        // 6.1.返回獲得的_placeholderLabel控制元件 return 
        self.valueForKey("_placeholderLabel") as? UILabel 
        } 
    } 

// 7.自定義一個私有方法獲取_displayLabel控制元件 private var csDisplayLabel: UILabel? { get { 
// 7.1.返回獲得的_displayLabel控制元件 return self.valueForKey("_displayLabel") as? UILabel } } 

    // 8.自定義各個列舉型別對應的動畫效果 
    private func doAnimationWithType(animationType: CSTextFieldAnimation, label: UILabel?) { 
    switch animationType { 
        case .CSAnimationTypeUpDown: 
            doAnimation() {
                // 8.1.CGAffineTransformMakeTranslation的tx引數代表是左右, ty代表的是上下 
                label?.transform = CGAffineTransformMakeTranslation(0, 10) 
            } 

        case .CSAnimationTypeLeftRight : 
            doAnimation(){ 
                // 8.2.CGAffineTransformMakeTranslation的tx引數代表是左右, ty代表的是上下 
                label?.transform = CGAffineTransformMakeTranslation(10, 0) 
            } 
        case .CSAnimationTypeBlowUp : 
            doAnimation(){ 
                // 8.3.CGAffineTransformMakeScale的sx是代表左右, ty代表的是上下, 預設是1.0, 大於1.0就代表放大, 小於1.0就代表縮小 
            label?.transform = CGAffineTransformMakeScale(1.2, 1.2) 
            } 
        case .CSAnimationTypeEasyInOut : 
            // 8.4.調整UITextField的placeholder文字透明度 
            UIView.animateWithDuration(0.5, animations: { () -> Void in label?.alpha = 0.4 }) 
            case .CSAnimationTypeNone: 
                // 8.5.什麼都不做, 直接結束 
                break 
            } 
    } 

// 9.自定義一個私有的動畫效果方法 
private func doAnimation(action: () -> ()) { 
    UIView.animateWithDuration(0.5, delay: 0, usingSpringWithDamping: 0.1, initialSpringVelocity: 10, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in 
    // 9.1.執行傳入進來的方法 
        action() 
    }, completion: nil) 
} 

// 10.自定義顯示動畫執行之後效果的方法 
func displayLableDoAnimationWithType(animtaion: CSTextFieldAnimation) { 
    // 10.1.呼叫doAnimationWithType私用方法, 並且把動畫列舉, 對應的label傳入 
    doAnimationWithType(animtaion, label: self.csDisplayLabel) 

    // 10.2.還原csDisplayLabel的動畫效果 
    csDisplayLabel?.transform = CGAffineTransformIdentity 
} 

// 11.自定義佔位符動畫執行之後效果的方法 
func placeholderLabelDoAnimationWithType(animation: CSTextFieldAnimation) { 

    // 11.1.呼叫doAnimationWithType私用方法, 並且把動畫列舉, 對應的label傳入 
    doAnimationWithType(animationType, label: self.csPlaceholderLabel) 
} 

// 12.重寫成為第一響應者的方法 
override func becomeFirstResponder() -> Bool { 

    // 12.1.判斷normaColor是否為nil 
    if normalColor == nil { 
        // 12.1.1.如果是, 那麼就把csPlaceholderLabel的textColor賦值過去 
        normalColor = csPlaceholderLabel?.textColor 
} 

    // 12.2.判斷selectedColor是否為nil 
    if selectedColor == nil { 
        // 12.2.1.如果是, 那麼就把csPlaceholderLabel的textColor賦值過去 
        selectedColor = csPlaceholderLabel?.textColor 
    } 

    // 12.3.把selectedColor設定好的值賦值給csPlaceholderLabel.textColor 
    csPlaceholderLabel?.textColor = selectedColor

    // 12.4.呼叫佔位符的動畫方法 
    placeholderLabelDoAnimationWithType(animationType) 

    // 12.5.返回給super的becomeFirstResponder 
    return super.becomeFirstResponder() 
} 


// 13.重寫取消第一響應者的方法 
override func resignFirstResponder() -> Bool { switch animationType { 

    case .CSAnimationTypeUpDown: 
        // 13.1.添加了fallthrough關鍵字, 就會忽略當前case之後的內容, 直接跳轉到下一個case 
        fallthrough 

    case .CSAnimationTypeBlowUp: 
        // 13.2.添加了fallthrough關鍵字, 就會忽略當前case之後的內容, 直接跳轉到下一個case 
        fallthrough 

    case .CSAnimationTypeLeftRight: 
        // 13.3.還原tpcPlaceholderLabel的transform 
        csPlaceholderLabel?.transform = CGAffineTransformIdentity 

    case .CSAnimationTypeEasyInOut: 
        // 13.4.還原tpcPlaceholderLabel的透明度 
        UIView.animateWithDuration(0.5, animations: { () -> Void in csPlaceholderLabel?.alpha = 1.0 }) 

    case .CSAnimationTypeNone: 
        // 13.5.直接結束 
        break 
    } 

    // 13.6.判斷operate是否為nil 
    if let operate = operateWhenResignFirstResponder { 
        // 13.6.1.如果不等於nil, 就繼續呼叫operate 
        operate() 
    } 

    // 13.7.將normalColor賦值給csPlaceholderLabel 
    csPlaceholderLabel?.textColor = normalColor 

    // 13.8.返回給super.resignFirstResponder 
    return super.resignFirstResponder() } 
}

封裝好之後, 我們就來使用, 在這裡, 我們運用兩種方式, 一種是使用UIStoryboard, 一種是純程式碼.

// 1.關聯UITextField控制元件 
@IBOutlet weak var passwordTextField: CustomUITextFieldAnimation! { 
    didSet { 
    // 1.1.設定passwordTextField的animationType 
    passwordTextField.animationType = CSTextFieldAnimation.CSAnimationTypeBlowUp 
    } 
} 

override func viewDidLoad() { 
    super.viewDidLoad() 
    // 2.初始化textField, 並且設定frame 
    var textFiled = CustomUITextFieldAnimation(frame: CGRectMake(passwordTextField.frame.origin.x - 70, passwordTextField.frame.origin.y - 70, self.view.frame.width / 2, passwordTextField.frame.height)) 

    // 2.1.設定normaColor的顏色 
    textFiled.normalColor = UIColor.darkGrayColor() 

    // 2.2.設定selectedColor的顏色 
    textFiled.selectedColor = UIColor.redColor() 

    // 2.3.設定textField的顯示樣式為圓角 
    textFiled.borderStyle = UITextBorderStyle.RoundedRect 

    // 2.4.設定textField的placeholder的內容 
    textFiled.placeholder = "請輸入賬號" 

    // 2.5.設定textField的字型大小 
    textFiled.font = UIFont.systemFontOfSize(14) 

    // 2.6.設定textField的placeholder動畫 
    textFiled.animationType = CSTextFieldAnimation.CSAnimationTypeLeftRight 

    // 2.7.新增到self.view 
    self.view.addSubview(textFiled) 

    // 3.初始化textField, 並且設定frame 
    var textFiled2 = CustomUITextFieldAnimation(frame: CGRectMake(passwordTextField.frame.origin.x - 70, passwordTextField.frame.origin.y + 40, self.view.frame.width / 2, passwordTextField.frame.height)) 

    // 3.1.設定UITextField的現實樣式為圓角 
    textFiled2.borderStyle = UITextBorderStyle.RoundedRect 

    // 3.2.設定textField的placeholder的內容 
    textFiled2.placeholder = "請輸入姓名" 

    // 3.3.設定textField的文字大小 
    textFiled2.font = UIFont.systemFontOfSize(14) 

    // 3.4.設定點選textField的動畫效果 
    textFiled2.animationType = CSTextFieldAnimation.CSAnimationTypeNone

    // 3.5.設定取消textField編輯狀態的動畫效果 
    textFiled2.operateWhenResignFirstResponder = { 
        // 3.5.1.設定點選textField的動畫效果
    textFiled2.displayLableDoAnimationWithType(CSTextFieldAnimation.CSAnimationTypeLeftRight) 

        // 3.5.2.設定textField的文字顏色 
        textFiled2.textColor = UIColor.redColor() 
} 


// 3.6.新增到self.view 
self.view.addSubview(textFiled2) 

} 


// 4.點選空白地方, 結束所有控制元件的編輯狀態 
override func touchesBegan(touches: Set<NSObject>, withEvent event: UIEvent) { 
    self.view.endEditing(true) 
}

3.最終效果