logo资料库

A GUIDE TO IOS ANIMATION 2.0.pdf

第1页 / 共139页
第2页 / 共139页
第3页 / 共139页
第4页 / 共139页
第5页 / 共139页
第6页 / 共139页
第7页 / 共139页
第8页 / 共139页
资料共139页,剩余部分请下载后查看
给 更好的你 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
分享到:
收藏