MMTextFieldEffects之Ichiro特效深度解析：CALayer双层伸缩动画是怎么实现的？

MMTextFieldEffects之Ichiro特效深度解析CALayer双层伸缩动画是怎么实现的【免费下载链接】MMTextFieldEffectsExtension of TextFieldEffects with Custom UITextFields effects inspired by Codrops, built using Objective-C项目地址: https://gitcode.com/gh_mirrors/mm/MMTextFieldEffects还在为 iOS 输入框的呆板外观发愁吗开源项目 MMTextFieldEffects 用 Objective-C 复刻了 Codrops 上经典的 7 种 TextField 动画特效而其中 Ichiro 特效凭借聚焦后底部一条灰色横线从下向上生长的流畅伸缩动画成为最受欢迎的输入框特效之一。本文将带你逐行看懂 Ichiro 特效背后的 CALayer 双层结构与动画时序。 MMTextFieldEffects 是什么MMTextFieldEffects 是一个轻量级的 iOS 开源库以 Objective-C 实现了 Ichiro、Juro、Kuro、Minoru、Nariko、Yoshiko、Nao 共 7 种文字输入框动画效果。使用方式极其简单只需把你的 UITextField 子类化为对应的特效类即可无需手动写任何动画代码。所有特效类都位于MMTextFieldEffects/目录下每个效果一对.h/.m文件例如 Ichiro 特效的完整实现就是 IchiroTextField.h 和 IchiroTextField.m。 核心原理两个 CALayer 各司其职打开MMTextFieldEffects/IchiroTextField.m会发现 Ichiro 动画的精髓在于两个 CALayer 成员变量CALayer *borderTextField, *contentTextfield;图层角色未聚焦时的位置borderTextField外层白色背景层Outer Frame下移 25pt高度为整体高度减 25contentTextfield内层内容层Inner Frame高度为 0藏在底部完全隐形这种双层结构是理解整个特效的钥匙第一层borderTextField在drawRect:中它的初始 frame 被设为CGRectMake(0, 25, 宽, 高-25)即白色背景整体下移 25 个点让出顶部 25pt 的空间——这正是日后 placeholder 缩小后要住进去的位置。第二层contentTextfield初始 frame 是CGRectMake(6, self.bounds.size.height, 宽-12, 0)注意高度为 0 且贴着底边所以平时看不见它。它的白色背景与第一层完全重合肉眼看起来只是一个输入框。两层叠在一起就是输入框静止时的样子一个干净的白色矩形。▶️ 动画时序拆解聚焦与失焦的完整流程步骤一点击输入框textFieldDidBeginEditing:聚焦时的动画分为两段接力这是实现丝滑效果的关键第一段0.5scrossDissolve 过渡[UIView transitionWithView:self.placeHolderLabel duration:0.5 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{ borderTextField.frame CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height); // placeholder 字体从 18pt 缩小到 14pt并上移到顶部 }白色外层borderTextField从下移 25pt平滑升到顶天立地同时 placeholder 标签缩小并上浮到左上角。由于使用了transitionWithView交叉淡化选项整个过程柔和不生硬。第二段0.1scompletion 中触发contentTextfield.frame CGRectMake(6, 25, 宽-12, 高-25-6); contentTextfield.backgroundColor [UIColor lightGrayColor].CGColor;内层contentTextfield从底部 0 高度生长出来并且背景色变浅灰——这条浅灰色横线就是 Ichiro 特效标志性的聚焦下划线。先升背景、后长横线的两段式编排让动画有了明确的节奏感。步骤二结束编辑textFieldDidEndEditing:失焦时的动作正好倒放且先检查了输入内容非空才执行还原动画0.2scontentTextfield高度缩回 0、颜色变回白色灰色横线沉入底部消失completion 后 0.3sborderTextField下移 25ptplaceholder 恢复 18pt 大字号回到中央同样使用交叉淡化过渡。整个过程没有用到 CoreAnimation 的 keyframe 或自定义 CAAnimation全部依赖UIView动画对CALayer.frame的隐式动画——这就是为什么两层图层必须分开外层负责背景升降内层负责横线生长互不干扰动画叠加起来却浑然一体。 三步在你自己的项目中用上 Ichiro 特效第 1 步把仓库克隆到本地git clone https://gitcode.com/gh_mirrors/mm/MMTextFieldEffects.git第 2 步将IchiroTextField.h/IchiroTextField.m两个文件拖入你的 Xcode 工程。第 3 步在 Storyboard 中选中你的 UITextField在右侧 Attributes Inspector 的Custom Class一栏填入IchiroTextField在Xcode中为UITextField设置IchiroTextField自定义类保存运行一个带伸缩下划线动画的输入框就完成了。⚠️ 两个容易踩坑的细节默认高度是 80pt代码中大量魔法数字下移 25pt、placeholder 居中偏移等都是基于 80pt 高度设计的改高度后需要自己调整placeholderInset、textFieldInset等参数。只读属性要成对实现Ichiro 用borderTextField做外框、contentTextfield做内框README 中明确列出了这两个属性分别服务于哪些特效borderTextField用于 Ichiro、Juro、Minoru、Nariko、YoshikocontentTextfield用于 Ichiro 和 Nariko定制时别改错层。 小结Ichiro 特效的实现可以浓缩为一句话用两个 CALayer 分别承载背景升降和横线伸缩两种形变再用 transition 交叉淡化 时长错开的接力动画把一个输入框的状态切换演得既柔和又有节奏。想继续探索MMTextFieldEffects/目录下 Kuro 的左右分栏、Nariko 的斜角生长都是同一套双层思路的不同变奏值得一看。【免费下载链接】MMTextFieldEffectsExtension of TextFieldEffects with Custom UITextFields effects inspired by Codrops, built using Objective-C项目地址: https://gitcode.com/gh_mirrors/mm/MMTextFieldEffects创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考