20.给UITextField添加一些小动画, 增强UI界面的趣味
2015-12-23 13:42
537 查看
现在又很多软件为了吸引更多的用户量, 使用了各种各样炫的动画效果, 我们也不能落下, 所以我们也要给我们的UI界面添加一些趣味, 让我们来看看吧.
现在让我们一起来封装一下CustomUITextFieldAnimation类.
封装好之后, 我们就来使用, 在这里, 我们运用两种方式, 一种是使用UIStoryboard, 一种是纯代码.
工程项目地址: 链接: http://pan.baidu.com/s/1dDEYmFf 密码: bes9
1.布局界面
2.自定义UITextField
PS: 在这之前, 我们需要创建一个CustomUITextFieldAnimation类, 并且继承于UITextField.现在让我们一起来封装一下CustomUITextFieldAnimation类.
[code]// 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, 一种是纯代码.
[code]// 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.最终效果
工程项目地址: 链接: http://pan.baidu.com/s/1dDEYmFf 密码: bes9
相关文章推荐
- iOS UI-Lable标签、NStimer定时器和RunLoop超级死循环
- 19.制作自动切换滚动的图片轮播
- IOS学习笔记之UISwitch
- iOS UISearchDisplayController学习笔记
- 【ZSTU4215 2015年12月浙理工校赛 F】【Dijkstra最短路】Landlocked 到达海洋最少跨越国家数
- UI布局分析工具-视图工具(Hierarchy Viewer)
- 仿支付宝密码输入界面+随机键盘
- UITextField键盘类型
- UITextField键盘类型
- NGUI研究院之3D模型坐标转2D屏幕坐标-血条
- Handler-接受子线程数据更新UI主线程;非主线程通信--HandlerThread
- 317. Shortest Distance from All Buildings
- UGUI 制作Animation 死活都不播放的坑
- ios搜索栏 UISearchBarDelegate委托常用方法
- Arduino - RGB全彩LED模块
- UITextField与键盘returnSearch关联
- uefi与GPT
- 在iOS 8中使用UIAlertController
- iOS 在UILabel显示不同的字体和颜色
- 关于uitableviewcell的accessoryType属性