转场动画-仿AppStore跳转及抖音评论

有钱的捧个钱场，没钱的捧个人场，看一看瞧一瞧嘞。

demo下载地址:
demo-0
demo-1
demo-0为简化版，方便大家理解。demo-1为优化版，功能代码都比demo-0多一些，本文主要以demo-1进行讲解。

---

前言

在写这个demo之前我以为转场动画就像女神一样，离我很远，日常的项目中根本接触不到，毕竟系统自带的就好用了，身轻体柔易推倒。但好的动画效果就像电影彩蛋一样，不经意间给用户一个惊喜，这对App的拉新传播都很有帮助。而且程序员在写出后，不仅可以在测试女神面前秀一把操作，还可以让自己的老板在投资人面前标榜自己的团队质量，拉到更多的资金，从而弯道超车让自己升职加薪，走上人生巅峰。

国内在交互这方面做的比较好的公司有很多，比如腾讯和字节跳动。因为我这个demo主要是写AppStore跳转和抖音评论，所以就研究了下【AppStore】、【抖音】、【QQ音乐】这三个产品。

接下来我言简意赅，就此demo的实现过程，过程中进行产品相互的对比，对比产生问题进行一番描述。

1.转场动画基本概念

转场动画主要是由*转场动画*，*跳转协议*，*手势交互*三部分组成。

转场动画是对动画效果的代码描述，且遵守UIViewControllerAnimatedTransitioning协议。
跳转协议是在push，press等协议的相关方法里，返回动画对象。
手势交互就是用手势来控制动画的进度，一般都是建立UIPercentDrivenInteractiveTransition的子类。

我这里就转场动画的基本概念不进行过多的描述，网上相关的资料非常多。

2.AppStore效果

AppStore首页的动画主页分为这几个部分。

2.1 视图部分

长按，视图缩小，松开后，视图铺开进入下个界面且有轻微弹簧效果。

点击，视图缩小，松开后，视图铺开进入下个界面且有轻微弹簧效果。

长按后滑动，视图先缩小，然后恢复原状。

我这里直接用UIButton处理这些手势，touchesBegan处理视图缩小，touchesEnded处理点击回调。所以在这里加了个bool属性endTouchesBegan用来判断视图是否已经缩小。如果缩小，直接回调，没有则先进行缩小载回调。

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{    self.endTouchesBegan =NO;    [UIView animateWithDuration:0.2 a