Boss直聘转场动画的实现

先上效果图

1156fb49dc34a33

仿Boss直聘的专场动画.gif

在iOS7之后,开发者可以自定制转场动画,但是本人在开发过程中一直要兼容iOS6,因此也没能在项目中使用到这些新特性,本文旨在学习,参考资料在文末给出。以下下指示谈谈仿写中的一些思路和误区。

思路一

push动画分为两部分:

  1. push开始时先进行的是 fromVC.view 的缩放动画,并且显示一个遮罩层覆盖掉你所点击的位置(例如:cell,demo中用Button代替)
  2. 紧接着将遮罩层进行放大到遮挡住整个屏幕,完成后移除掉次遮罩层

思路二

pop有两个动画效果:一个是通过tableView滑动到一定位置时开始pop的转场动画,一个是直接点击navigatioBar上的返回按钮进行的界面下滑出屏幕的pop转场动画。因此我增加了一个 BOOL 值来判断是哪种动画。

对第二种动画下过很容易就能做到,但是对于第一种动画效果,本人计入了一个误区。

误区

做第一种pop动画时,一开始以为是按照滑动距离来进行类似于进行手势百分比返回的转场动画,但是当我进行实际编码是发现如果是按百分比进行动画,无论我怎么写都会出现 BUG 并且达不到我想要的效果,因此在深(shui)思(jiao)后,还是采用了如 push动画一样的截图来实现(如果你能实现百分比返回,请收下我的膝盖并告诉我🙃)

源码中的一处注释的示意图

1256fb4adcee4ee

注释的示意图.png

对仿写的进一步补充

UICollectionView上集成了UITableView,来实现Boss直聘的交互效果

效果图如下

1357061ef5e53d9

仿Boss的转场和交互.gif

备注:由于最近离职时遇到了一些坑忙的焦头烂额,因此一些小的地方还没做处理:

  1. ViewController中左右滑动时,没有通知FirstViewControllertableView滚动到对应的位置
  2. TestCollectionViewCell中进行的下载用的是 GCD 模仿的因此你在快速左右滑动时会出现一些小BUG
  3. 带动画的button没来得及写出来
  4. 最主要的是TestCollectionViewCell中的tableViewcell没有写,因此界面还是如此的丑😢

Demo地址

  1. 仿Boss直聘的转场动画实现
  2. CollectionViewWithTableView

参考链接

  1. OneV’s Den 博客 – iOS7中的ViewController切换 OneV’s Den
  2. ColinEberhardt的VCTransitionsLibrary
  3. Kitten’s 时间胶囊 – 实现Keynote中的神奇移动效果
1 3 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部