iOS印象笔记交互动画 OC完善版本

前人种树

一直想知道 iOS 端的印象笔记(当然是老版本了,最新的印象笔记已经放弃了这个坑人的动画)是如何实现的,在网上搜到了这篇印象笔记交互效果(swift),UI 和效果做得都非常好。于是乎怎么也得学习学习吧,用 OC copy 一份吧。于是乎开始了踩坑之路。

首先,allsome(swift 印象笔记作者)这个 Demo,实现思路是首页使用 UICollectionView 实现,滑动时候实时改变 cell 的 frame 实现类似弹簧的效果。但是, 其实这个 Demo有很多的 bug 没有处理,但是仍然是一个很好的思路,要不是这个 Demo,估计自己怎么也写不出这个动画。

然后,这个 Demo 的 bug 其实并不是那么容易处理的,我特意抓取了印象笔记 7.18 版本的旧包,发现印象笔记原版也存在这个 bug,说不定这就是他们改版的原因呢,哈哈。

下面具体看下这个 bug,

bug.gif

造成这个 bug 的主要原因还是用了手势,在自定义专场中使用了转场手势,根据手势偏移比例可以控制转场的进度。

熟悉转场动画的人应该知道,手势驱动有一个 bug:假如你设定,拖拽比例超过0.5,才决定完成动画,否则取消动画。那么当你拖拽比例是0.3的时候,那转场动画就进行0.3的比例,这个时候松手,转场动画会重新回到0,但是屏幕会闪一下。也就是转场从0.3直接回到了0,没有任何过渡,所以视觉上会闪一下。

等等,这个 bug 并不是每个转场动画都会有的,要看你怎么转了,这句话怎么讲?我在学习转场动画的时候看了喵神的博客里iOS7中的 VC 切换,里面的 demo 并不会因为拖拽比例不足返回时发生卡顿,效果如下

无宽高改变.gif

因为这个 Demo,在 dismiss 控制器的时候只是简单的让控制器 y 的值从上往下偏移了一个屏幕的距离,没有任何宽度和高度的改变,不会触发这个 bug。我把这个 Demo 简单的改了一下,dismiss 的时候会同时改变控制器的宽和高,然后这个恶心的 bug 就会出现了


宽高改变.gif
后人完善

我在wazrx的这篇文章中找到了解决方案,那就是在手势拖拽比例达不到我们指定的比例时,开启一个CADisplayLink定时器不断更新转场的进度,比较好的解决了动画生硬这个问题。

解决这个主要的 bug 之后,自己再把一些细枝末节完善了一下,就写成了现在这个 印象笔记 OC

oc.gif
总结

简单说一下完成印象笔记的这个Demo需要哪些知识点吧, 其实就两个:

  1. 弹簧效果(严格说这个 demo 实现的并不是弹框效果,没有使用到UIDynamic的性质)
  2. 自定义转场

在写这个 Demo 之前特意看了喵神的弹簧效果笔记。但是看到 swift 版本的 Demo 的时候发现原作者并没有使用这个效果,而是在 collectionView 滑动的时候动态计算了每个 cell 的 frame,改变了每个 cell 的 y 值,从而实现了这个效果,不得不说非常棒!因为如果使用了 UIDynamic 实现弹簧效果,在点击 cell 进入转场动画的时候会非常混乱。所以原作者这个方法简单,实用!

转场动画具体介绍网上实在太多了,可以自行百度,google。主要思想其实是: 以前怎么 modal 一个控制器是系统自己决定的,怎么 dismiss 也是系统决定的。 iOS7之后,Apple 提供了一套 API 给我们,我们可以自己决定如何 dismiss,如何 modal。

allsome的 swift 版本的 demo 中,所有转场代理都在一个文件里,我为了让结构更加清晰,把转场代理全部分开,一共三个文件。

  1. 告诉我你想如何 present 一个控制器。
  2. 告诉我你想如何 dissmiss 掉一个控制器。
  3. 告诉我你手势驱动比例和dismiss 控制器的关系。
Snip20170510_1.png
最后的一点讨论

这个 Demo 中,点击 collectionView 的 cell,present出 MYNoteVC。
然后在使用手势 dismiss 的时候,只要手势开始 MYNoteVC 的 view 就被我们隐藏了,动画效果全部在 collectionView 上完成,所以手势没有完成的时候开启定时器,我们其实是对collectionView 做动画,正因为这个特性,才能使用定时器这个技巧解决动画生硬的问题。 如果我们直接对 MYNoteVC 做动画的话,定时器这个技巧也不能很好的完成这个动画,但是为什么wazrx的这篇文章的 Demo 里都没有任何不妥呢,原因有两个

  • wazrx 的这个 Demo 里 A -> B,B在dismiss 的时候实际上是对 B 的 view 的截图进行动画,并不是真正的 B 的 View。那印象笔记的 Demo 为什么不能对截图做动画呢? 因为还要实时改变控制器 title 和返回图标的 frame 和 alpha。

  • 印象笔记的 Demo 里 A -> B, B在dismiss的时候是先隐藏 B,实际对 A 进行动画。因为 A 和 B 长得一样,所以并看不出来。如果 B在 dismiss 的时候就真的对 B 进行动画,那么手势取消的时候还是会有bug。

本文 Demo
allsome的印象笔记 Swift
wazrx转场取消时开启定时器文章

好像也没什么可说的,只有动手写了,才更明白。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266

推荐阅读更多精彩内容