# UIKit 与图形动画

语言：zh-CN
原文：[UIKit 与图形动画](<https://allluckly.cn/journal/topics/uikit-graphics/>)
中文：[中文 HTML](<https://allluckly.cn/journal/topics/uikit-graphics/>)
English: [English HTML](<https://allluckly.cn/en/journal/topics/uikit-graphics/>)

DEVELOPMENT NOTES · 48 篇

一个界面效果，往往牵涉布局、事件和绘制三件事。这组文章从具体控件出发，记录当时如何实现列表、富文本、转场和动画，适合按手头的问题挑着读。

## 怎么读这一组

1. 先找对应的控件或交互：列表高度、事件传递、输入框和弹出视图，比从动画代码直接开始更容易定位问题。
2. 读动画时把初始状态、最终状态、时间和坐标变换分开记录，再比较 UIView 动画、关键帧和 Core Animation 的写法。
3. Core Text、Core Graphics 和波浪效果可以接着读；留意示例的坐标系、绘制范围及 Swift 版本，不要只照搬视觉参数。

这是 2015–2017 年的历史记录，示例未在本次整理中重新运行验证。先核对文章日期和版本说明，再决定哪些思路适合当前项目。

## 主题文章

48 篇 · 新到旧

- 2016-11-14 

  ### [iOS 两行代码实现自定义转场动画](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tougao70>)

  介绍 WTKTransitionAnimate 的调用方式，通过导航代理和工厂方法选择转场，再结合拖动手势与百分比进度控制实现交互式返回动画，说明封装内部的组织思路。

  逆流丶而上 WTKTransitionAnimate · 导航转场 · 交互式动画
- 2016-10-09 

  ### [iOS开发之UITextField的那点事](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tougao64>)

  针对文本输入长度、数字和金额限制、中文联想及键盘遮挡等问题，利用分类与运行时组织可扩展的输入规则，再通过键盘通知调整界面位置。

  Sindri UITextField · 输入限制 · 中文输入
- 2016-09-20 

  ### [iOS开发之按钮动画](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tougao59>)

  承接 Core Animation 基础，用 CALayer、CABasicAnimation 与动画组实现按钮的渐变和形变，说明图层属性、时间设置以及多个动画配合时的组织方式。

  Sindri Core Animation · CABasicAnimation · CAAnimationGroup
- 2016-09-09 

  ### [iOS开发之百度外卖APP个人中心头像\<浪\>起来的动画效果](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tougao58>)

  拆解个人中心头像周围的波浪效果，利用 CADisplayLink 驱动刷新、三角函数生成曲线，再交给 CAShapeLayer 绘制，说明连续波形动画所需的组成部分。

  乔同X CADisplayLink · CAShapeLayer · 波浪动画
- 2016-07-12 

  ### [iOS游戏开发没有你想的那么难--Hardest](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao54>)

  介绍用 Objective-C 与 UIKit 实现 Hardest 小游戏的整体结构，覆盖关卡选择、游戏状态、分数结算、音效和存档，并说明专用游戏引擎与此示例的适用差别。

  维尼的小熊 UIKit · 小游戏 · 关卡管理
- 2016-07-04 

  ### [iOS开发之复杂动画之抽丝剥茧(Objective-C & Swift)](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao52>)

  将一个欢迎页复杂动画拆成圆形缩放、椭圆挤压、边缘凸起、旋转和波浪填充等阶段，逐步安排图层与路径变化，展示如何把视觉效果转换为可实现的动画步骤。

  HenryCheng CAShapeLayer · 路径动画 · 关键帧动画
- 2016-06-19 

  ### [iOS动画CoreAnimation浅谈](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao49>)

  围绕 CALayer、CAAnimation 与 CAAction 介绍 Core Animation，解释图层和动画对象的关系、时间控制与动作查找，再通过示例理解隐式和显式动画的组织方式。

  Sindri Core Animation · CALayer · CAAnimation
- 2016-06-12 

  ### [分分钟解决iOS开发中App启动广告的功能](<https://allluckly.cn/lblaunchimagead/LBLaunchImageAd>)

  封装启动广告视图，支持全屏或底部保留标志的两种布局，通过 SDWebImage 获取广告图片，再用透明度动画与 block 回调处理显示、点击和关闭等事件。

  Bison LBLaunchImageAd · 开屏广告 · SDWebImage
- 2016-05-12 

  ### [iOS开发之动画篇-碎片动画](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao45>)

  通过 UIView 的 maskView 解释遮罩如何影响内容显示，再把遮罩拆分成多个区域并分别安排动画，逐步构建碎片化展示与图片轮播过渡效果。

  Sindri maskView · 碎片动画 · UIView
- 2016-04-29 

  ### [iOS开发之超链接富文本](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao42>)

  利用 Core Text 绘制属性字符串，在预留的文字位置插入图片并实现超链接交互，再比较 TextKit 的处理方式，串起聊天表情与富文本排版所需的基本流程。

  Sindri Core Text · NSAttributedString · 图文混排
- 2016-04-15 

  ### [iOS开发之如何制作番茄钟App](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao37>)

  围绕番茄钟应用串起定时、通知提醒、音乐播放和 Today Widget，并整理卡片布局、转场、xib 与 URL Scheme 等实现入口，适合结合工程了解功能如何组合。

  威權在B612等着那阵温柔的风 番茄钟 · NSTimer · Today Widget
- 2016-03-23 

  ### [iOS开发动画篇之layout动画深入](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao34>)

  通过登录页的账号列表展开与按钮收缩，演示调整顶部、高度和左右边距约束后触发布局动画，进一步说明视图层级与约束变化如何配合形成连续过渡。

  Sindri Auto Layout · layoutIfNeeded · 登录动画
- 2016-03-17 

  ### [Swift之实现类似于格瓦拉启动页中的放大转场动画](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao33>)

  从普通导航 push 过渡到圆形放大转场，利用 CALayer 遮罩控制页面显露范围，再加入手势驱动动画；正文以 Swift 展开，并提供 Objective-C 示例参照。

  HenryCheng 自定义转场 · CALayer mask · Swift
- 2016-03-15 

  ### [iOS开发仿微信(WeChat)系列(七)](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao31>)

  拆解聊天输入栏与消息单元格，用 block 将发送和显隐事件交给控制器，再根据消息归属配置头像、拉伸气泡背景，并在模型中计算尺寸以适配不同长度的消息。

  WzxJiang 聊天界面 · UITableViewCell · 气泡布局
- 2016-03-04 

  ### [学习Swift你应该懂点Core Graphics (长篇高能)](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao29>)

  从获取绘图上下文和建立路径开始，以 Swift 演示矩形、圆、曲线、文字和图片绘制，再扩展线性与径向渐变、混合模式、坐标变换以及位图和 PDF 输出。

  大石头布 Core Graphics · Quartz 2D · 贝塞尔曲线
- 2016-02-28 

  ### [iOS开发之Layout动画初体验](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao25>)

  从横竖屏下的文本布局说明约束的作用，再拆解随列表滚动变化的界面动画，通过调整约束值控制元素位置和尺寸，演示 Auto Layout 与动画结合的基本过程。

  SindriLin Auto Layout · NSLayoutConstraint · 约束动画
- 2016-02-22 

  ### [Github源码推荐:(02.22):高仿小日子Swift2.0,高仿爱鲜蜂Swift2.0](<https://allluckly.cn/%E6%BA%90%E7%A0%81%E6%8E%A8%E8%8D%90/yuanma03>)

  选编 Swift 2.0 实现的小日子和爱鲜蜂两个仿制项目，提供 SmallDay、LoveFreshBeen 仓库及作者介绍入口，便于结合完整工程观察页面组织与界面实现。

  Bison Swift 2.0 · SmallDay · LoveFreshBeen
- 2016-02-17 

  ### [iOS开发Swift自定义下拉刷新如此简单](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao22>)

  使用 xib 创建文字视图覆盖 UIRefreshControl 的默认样式，分阶段旋转、变色和缩放文字，再模拟数据加载与插入，串起自定义下拉刷新从开始到结束的流程。

  威權在B612等着那阵温柔的风 Swift · UIRefreshControl · xib
- 2016-02-15 

  ### [iOS开发自定义转场动画实战讲解](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao20>)

  从转场中 from、to 与 presenting 的角色区别出发，逐步实现自定义模态和导航转场，再扩展交互式动画与转场协调器，解释复用动画逻辑的组织方式。

  bestswifter UIViewController转场 · 交互式动画 · UINavigationController
- 2016-02-15 

  ### [iOS开发动画篇之Transform和KeyFrame动画](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao19>)

  通过季节文字变化和落叶动画说明仿射变换与关键帧动画，逐步组合缩放、平移和旋转，讨论形变参数及动画阶段安排对最终运动轨迹的影响。

  SindriLin CGAffineTransform · 关键帧动画 · UIView
- 2016-02-05 

  ### [Swift2.0之CoreText排版神器(续)](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao17>)

  在 Core Text 基础排版之上，分析基线、上升部和下降部等字体度量，逐行绘制统一中文与 emoji 的行高，再扩展链接与提及识别等富文本交互。

  大石头布 Core Text · CTLineDraw · 字体度量
- 2016-02-01 

  ### [iOS开发仿微信(WeChat)系列(三)](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao15>)

  继续完成仿微信主界面，记录从 xib 暴露约束并按屏幕调整 constant、微调导航栏按钮位置，以及使用 SDWebImage 占位图加载图片的具体做法。

  WzxJiang Auto Layout · xib · UIBarButtonItem
- 2016-01-31 

  ### [Swift2.0之CoreText排版神器(长篇高能)](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao14>)

  从富文本属性设置进入 Core Text，介绍字体、颜色与文本范围，再结合底层排版和绘制步骤实现图文混排，帮助理解复杂文本界面所需的基本对象。

  大石头布 Swift 2.0 · Core Text · NSAttributedString
- 2016-01-30 

  ### [iOS开发仿微信(WeChat)系列(二)](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao13>)

  搭建仿微信的通讯录、发现和个人页面，复用分组 UITableView 与自定义个人信息 Cell，并用排序和分组数据组织联系人列表，展示多个页面的初始界面结构。

  WzxJiang UITableView · 通讯录 · 分组列表
- 2016-01-29 

  ### [iOS开发仿微信(WeChat)系列(-)](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao12>)

  仿微信系列的开篇先整理工程与 MVC 文件夹，建立公共控制器，再创建各功能页和 UITabBarController，重点说明后续页面共享的导航骨架如何搭建。

  WzxJiang 仿微信 · MVC · UITabBarController
- 2016-01-28 

  ### [Cell特效之图片随着TableView的滑动上下移动](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao11>)

  根据单元格中心与父视图中心的偏移调整图片位置，使图片随 UITableView 滚动形成视差，并记录自定义 Cell 与可见项更新方式，附改编代码和原项目链接。

  WzxJiang UITableView · 视差效果 · 单元格复用
- 2016-01-22 

  ### [iOS开发动画篇之从UIView动画说起](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao09>)

  以输入框进入和按钮出现的登录动画为例，介绍 UIView 可动画属性、时间与选项参数，再加入弹簧动画，帮助理解位置、透明度与形变如何组合成连续效果。

  SindriLin UIView动画 · 可动画属性 · 弹簧动画
- 2016-01-22 

  ### [iOS开发之视觉差动画效果详解](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao08>)

  把视差效果拆成多层视图的位置关系，通过拖动中间层、补偿文字层偏移和裁剪越界内容，让文字相对底层保持不动，解释遮挡与位移如何共同形成视觉差。

  WzxJiang 视差动画 · clipsToBounds · 视图层级
- 2016-01-19 

  ### [iOS开发之CollectionViewFlowLayout实现LOL皮肤选择动画](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao07>)

  通过自定义 UICollectionViewFlowLayout 实现英雄皮肤卡片选择效果，说明如何调整布局属性和滚动停止位置，再将布局子类接入列表以完成居中切换动画。

  WzxJiang UICollectionViewFlowLayout · 卡片布局 · 滚动定位
- 2016-01-17 

  ### [iOS开发仿简书、淘宝等等App的View弹出效果](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao06>)

  将仿简书和淘宝的弹出效果拆成内容、遮罩与弹出层，结合两阶段图层形变和收起动画实现背景后退的视觉感受，并说明视图添加到 window 的层级关系。

  WzxJiang 弹出视图 · CATransform3D · 遮罩
- 2016-01-14 

  ### [iOS开发仿美国国家地理App的一个炫酷的动画](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tougao04>)

  拆解仿国家地理应用的弹出页面动画，逐项处理状态栏隐藏、视图拖动与回弹、导航栏衔接和返回按钮变色，展示多层界面联动效果的实现过程。

  WzxJiang UIView动画 · 拖动手势 · 导航栏
- 2016-01-13 

  ### [iOS实现自定义炫酷的弹出视图（popView）](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao03>)

  介绍 HWPopTool 自定义弹出视图的接入，通过配置内容视图、背景遮罩和关闭按钮控制展示效果，并说明关闭回调由代理改为 block 后的使用方式。

  HenryCheng HWPopTool · 弹出视图 · 遮罩
- 2016-01-13 

  ### [iOS开发之事件传递响应链](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao02>)

  从 UIResponder、UIEvent 与 UITouch 说明触摸事件如何交给视图处理，结合多个自定义视图观察响应链和手势的关系，并讨论事件传递机制在界面中的应用。

  SindriLin UIResponder · 响应链 · UITouch
- 2016-01-04 

  ### [仿window阿里旺旺登陆界面,打印机吐纸动画效果](<https://allluckly.cn/sdk/aliww>)

  模仿 Windows 阿里旺旺的打印机吐纸登录动画，通过保持视图横向位置与宽度不变、逐步调整高度实现展开效果，并提供 LBPrinterPaper 示例工程。

  Bison UIView动画 · frame · 登录界面
- 2015-12-07 

  ### [Github源码推荐:(12.25):手势解锁,个人SDK集成,无限循环图片轮播](<https://allluckly.cn/%E6%BA%90%E7%A0%81%E6%8E%A8%E8%8D%90/yuanma01>)

  选编手势解锁、个人中心与无限图片轮播三个开源项目，列出下载入口和部分集成代码，便于按界面需求了解对应组件及其使用方式。

  Bison PCGestureUnlock · LBPersonalPage · SDCycleScrollView
- 2015-11-23 

  ### [Mac OS开发系列之NSImageView](<https://allluckly.cn/mac/Mac-OS01>)

  以 macOS 图片视图为例，展示 NSImageView 的创建、图片赋值及添加到界面的过程，再通过启用图层、设置圆角与边框完成圆形头像样式。

  Bison macOS · NSImageView · NSImage
- 2015-10-24 

  ### [Bison教你1分钟集成3D无限翻转的Banner](<https://allluckly.cn/%E5%B9%BF%E5%91%8A%E8%BD%AE%E6%92%AD/Private>)

  通过左右滑动手势切换广告图片，并结合转场动画实现三维翻转轮播，介绍组件导入与点击代理。原文同时指出该效果使用私有动画接口，保留为技术实验。

  Bison Banner · CATransition · 手势交互
- 2015-10-19 

  ### [iOS9新特性之实现3D Touch就是So easy（更新Swift版）](<https://allluckly.cn/3d%20touch/3D-Touch>)

  围绕 iOS 9 的主屏快捷操作，说明在 Info.plist 中配置图标、标题与类型，再由 AppDelegate 分发点击事件，并给出 Objective-C 与 Swift 两种写法。

  Bison 3D Touch · UIApplicationShortcutItem · AppDelegate
- 2015-09-19 

  ### [Swift纯代码走进UICollectionView](<https://allluckly.cn/ios%E4%B9%8Bswift%E5%88%9D%E6%8E%A2/Swift%E7%BA%AF%E4%BB%A3%E7%A0%81%E8%B5%B0%E8%BF%9BUICollectionView>)

  从数据源和代理配置开始，用 Swift 创建 UICollectionView，逐步实现单元格、网络数据加载与可复用头视图，串起一个纯代码列表界面的完整结构。

  Bison UICollectionView · Swift · Alamofire
- 2015-09-07 

  ### [Swift超炫的个人界面依旧如此简单](<https://allluckly.cn/swift/Swift%E7%89%88%E8%B6%85%E7%82%AB%E7%9A%84%E4%B8%AA%E4%BA%BA%E7%95%8C%E9%9D%A2%E4%BE%9D%E6%97%A7%E5%A6%82%E6%AD%A4%E7%AE%80%E5%8D%95>)

  展示 Swift 版本个人中心组件的接入方式，说明如何导入 LBSwift\_PersonalPage 并通过继承复用界面，配合示例代码理解页面封装与调用关系。

  Bison Swift · LBSwift\_PersonalPage · 个人中心
- 2015-08-31 

  ### [iOS开发之1分钟做出超炫的个人界面](<https://allluckly.cn/uitabview/1%E5%88%86%E9%92%9F%E5%81%9A%E5%87%BA%E8%B6%85%E7%82%AB%E7%9A%84%E4%B8%AA%E4%BA%BA%E7%95%8C%E9%9D%A2%E4%B8%8D%E5%86%8D%E6%98%AF%E6%A2%A6>)

  介绍 LBPersonalPage\_VC 个人中心界面的集成方法，通过导入文件、继承基础控制器并补充配置来复用页面效果，同时提供对应示例供查看具体实现。

  Bison LBPersonalPage · 个人中心 · UITableView
- 2015-08-25 

  ### [Swift初探之纯代码写tabBar](<https://allluckly.cn/swift/Swift%E5%88%9D%E6%8E%A2%E4%B9%8B%E7%BA%AF%E4%BB%A3%E7%A0%81%E5%86%99tabBar>)

  用早期 Swift 代码构建仿折800的标签栏，演示创建多个子控制器、配置标题与图标并加入系统 TabBar 的过程，适合对照理解纯代码组织导航结构。

  Bison Swift · UITabBarController · 子控制器
- 2015-08-17 

  ### [iOS开发禁止使用系统自带手势滑动返回功能](<https://allluckly.cn/%E7%A6%81%E6%AD%A2%E4%BD%BF%E7%94%A8%E7%B3%BB%E7%BB%9F%E8%87%AA%E5%B8%A6%E6%89%8B%E5%8A%BF%E6%BB%91%E5%8A%A8%E8%BF%94%E5%9B%9E%E5%8A%9F%E8%83%BD>)

  针对嵌入游戏左滑时意外露出导航栏和标签栏的问题，展示如何控制导航控制器自带的滑动返回手势，记录局部界面禁用系统交互的代码位置。

  Bison UINavigationController · 返回手势 · interactivePopGestureRecognizer
- 2015-07-29 

  ### [iOS开发动画之绕View旋转的View](<https://allluckly.cn/ios%E5%8A%A8%E7%94%BB/iOS%E5%BC%80%E5%8F%91%E5%8A%A8%E7%94%BB%E4%B9%8B%E7%BB%95View%E6%97%8B%E8%BD%AC%E7%9A%84View>)

  为视图围绕图片中心运动的需求给出实现思路，利用三角函数计算圆周上的位置并更新视图坐标，展示不依赖复杂动画框架的环绕运动代码。

  Bison UIView · 圆周运动 · 三角函数
- 2015-07-15 

  ### [iOS开发如何实现长微博的功能](<https://allluckly.cn/iOS%E5%BC%80%E5%8F%91%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E9%95%BF%E5%BE%AE%E5%8D%9A>)

  把长文字转为图片来实现长微博展示，代码围绕文本宽度、字号、所需高度与图像绘制展开，适合了解固定宽度下生成长图的早期 UIKit 做法。

  Bison 长图 · 文本绘制 · UIKit
- 2015-06-21 

  ### [iOS使用Google地图Api创建的地图显示标注及轨迹回放](<https://allluckly.cn/%E5%9C%B0%E5%9B%BE/iOS%E8%B0%83%E7%94%A8Google-%E5%9C%B0%E5%9B%BE>)

  记录为 iOS 与 Android 统一地图效果而接入 Google Maps 的过程，给出地图初始化、标注与轨迹线的主要代码，并说明申请地图 API Key 的配置入口。

  Bison Google Maps · GMSMapView · 地图标注
- 2015-06-15 

  ### [iOS开发类似折800功能中的一个小Demo](<https://allluckly.cn/uiscrollview/%E7%B1%BB%E4%BC%BC%E6%8A%98800%E5%8A%9F%E8%83%BD%E4%B8%AD%E7%9A%84%E4%B8%80%E4%B8%AA%E5%B0%8FDemo>)

  以仿折800的滚动交互为例，记录拖动开始时的 contentOffset，并在滚动回调中比较偏移量来判断方向，附示例工程供对照查看界面的联动效果。

  UIScrollView · contentOffset · 滚动方向
- 2015-05-17 

  ### [iOS开发自动计算tabview中label的高度](<https://allluckly.cn/uitabview/%E8%87%AA%E5%8A%A8%E8%AE%A1%E7%AE%97tabview%E4%B8%ADlabel%E7%9A%84%E9%AB%98%E5%BA%A6>)

  通过字体、限制宽度与文本测量计算标签所需高度，再在 UITableView 行高回调中增加留白，展示手动处理多行文字与列表单元格高度的代码思路。

  UITableView · UILabel · 文本测量