给 更好的你
ii
终于有时间更新第二版了
如果你还能看到这段话
那真是真爱了
我在屏幕这边给您鞠一躬
你们的支持是本书继续更新的润滑剂
自打编写之初我就坚持
这必须是一本精致的、视觉优先的电子书
每个人心灵深处都有一种创造欲
享受那种从自己手底打磨出一件美好事物的愉悦的感觉
这本书的创作过程就是这样
更好的第二版 送给更好的你
ii
ii
创作历程
本书的第一版是我业余时间完成的。当时我还在锤子科技上
班。上班一族都有体会,尤其是作为软件工程师这一群体,白天
已经对着电脑写了一天代码,晚上回到家出于本能是拒绝碰代码
的。外加美食和美剧的诱惑,导致在创作第一版的 72 天里,我
有半个月的时间因偷懒而没有推进写书的进度。更疲劳的是,我
需要花费很长时间制作篇幅并不长的素材,几百个纯手工制作的
素材也是这本书最大耗时之处。但好在,我挺过来了。
第二版。第二版原本打算在 12 月份更新的。但还是拖了 2
个月。当时我已经去了另一家公司,然而巨大的工作压力让我呆
了 2 个月就毅然辞职了,这才给第二版的更新带来了时间上的
可能性。
在这本电子书中,我力图通过自己的尝试向所有软件工程师
亦或所有有意出书的朋友证明:如果你有想法,赶紧行动吧。坦
率地讲,一开始我认定写书这种事情离我太远,自己何德何能去
指导别人。但后来我意识到,其实我们所处的社会就是一个分享
的社会。没有人是天生就会写书的,作家亦是如此,更何况作为
一个非文字工作者的软件工程师。如今我已迈出这一步,相信你
也可以。你的能力永远超乎你想象(不是红牛软广)。
KittenYang
iiiiii
目录
第一章:序言
感谢
创作历程
· · · · · · · · · ii
· · · · · · · · · iii
第二章:玩转贝塞尔曲线
KYAnimatedPageControl · · · · · · · · · 6
GooeySlideMenu · · · · · · · · · 13
· · · · · · · · · 25
QQ 未读气泡的拖拽交互
LiquidLoader
· · · · · · · · · 28
第三章:Core Animation
模仿 Twitter 启动动画 · · · · · · · · · 35
圆圈遮罩转场动画 · · · · · · · · · 44
任意位置圆圈放大转场动画 · · · · · · · · · 50
Game Center 起泡晃动效果 · · · · · · · · · 50
图片弹跳切换动画 · · · · · · · · · 51
下载按钮动画 · · · · · · · · · 56
一个 loading 动画 · · · · · · · · · 65
第四章:动画中的数学
· · · · · · · · · 71
锤子邮件下拉刷新动画
· · · · · · · · · 76
模仿 tvOS 卡片悬浮扭动效果 · · · · · · · · · 84
第五章:自定义属性动画
粘性菜单
· · · · · · · · · 91
InteractiveCard
第六章:其他效果
重力回弹的锁屏界面 · · · · · · · · · 107
UIKitDynamics
· · · · · · · · · 114
· · · · · · · · · 122
下雪效果
点赞水花溅起效果
· · · · · · · · · 125
3则 CAReplicatorLayer loading 动画· · · · · · · · ·128
iv
2
玩转贝塞尔曲线
5
⾸ 先 ⾮ 常 感 谢 你 能 购 买 正 版 。 你 们 的 ⽀ 持 是 我 给 我 最 ⼤ 的 动 ⼒ 。
提笔写下第⼀个字,我犹豫了很久,犹豫
该以什么⽅式,什么内容开头。毕竟在我看
来,这是⼀个具有颇具仪式感的时刻,这意味
着这件将贯穿我⼀⽣的事情总算起步了。写书
和写博客的感觉完全不⼀样。⼀本完整的书籍需要考虑更多整体上的连贯性,
语⾔的组织,内容的合理编排来引导读者很顺畅地进⼊你的世界,⽽不像博
客,可以⼀篇⼀篇硬切。好在,⼀切都已踉跄着起步了,虽谈不上万事俱备,
但好⽍已经出发。在这个出发的地⽅,我想留下⼀句话,⽅便时刻提醒我⾃
⼰:「不要因为⾛得太远,就忘了当初为什么出发」。
第 ⼀ 章 , 我 们 先 来 聊 聊 贝 塞 尔 曲 线 。 贝 塞 尔 曲 线 的 发 明
⼈ 是 法 国 雷 诺 汽 车 的 ⼯ 程 师 ⽪ 埃 尔 · 贝 塞 尔 。 当 年 他 把
贝 塞 尔 曲 线 应 ⽤ 在 了 雷 诺 汽 车 的 设 计 上 。 贝 塞 尔 曲 线
的 出 现 可 以 说 对 计 算 机 图 形 学 的 发 展 产 ⽣ 了 巨 ⼤ 的 推
动 作 ⽤ 。 我 们 现 在 得 以 在 电 脑 上 使 ⽤ F l a s h , I I l s t r a t o r ,
6
C o r a l D R A W 和 P h o t o s h o p 上 制 作 优 美 的 图 形 , 这 其 中 都 离 不 开 贝 塞 尔 曲 线
的 功 劳 。
原 理 铺 垫 : 给 定 n + 1 个 数 据 点 , p 0( x 0 , y 0) . . . p n( x n , y n) ,
⽣ 成 ⼀ 条 曲 线 , 使 得 该 曲 线 与 这 些 点 所 连 结 的 折 线 相 近。
在 数 学 中 , 这 属 于 逼 近 问 题 。 在 ⼏
何 中 , 可 以 形 象 地 理 解 为 先 ⽤ 折 线
段 连 接 这 些 数 据 点 , 勾 勒 出 图 形 的 ⼤ 致
轮 廓 , 然 后 再 ⽤ 光 滑 的 曲 线 去 尽 可 能 接
近 地 拟 合 这 条 折 线 。
在 本 章 的 第 ⼀ 节 中 , 我 将 以 KYAnimatedPageControl 为 例 , 向 你 介 绍
贝 塞 尔 曲 线 在 实 际 ⽣ 产 中 的 应 ⽤ 。 你 可 以 通 过 点 击 下 ⽅ 的
MOVIE 2.1, 查 看 这 个 d e m o
MOVIE 2.1 ⼩球拖拽形变效果
的 最 终 效 果 。
初 看 这 个 效 果 , 直 观 的 感 受 就 是 ⼩
球 发 ⽣ 了 形 变 。 所 以 ⼀ 个 可 ⾏ 的 做 法
是 : 我 们 ⽤ 四 条 贝 塞 尔 曲 线 「 拼 」 出 这
代码来⾃ KYAnimatedPageControl
7