iOS开发-模仿AppStore中的各种动画

---

AppStore这个软件是我们苹果用户经常用到的，我在demo中对它进行了模仿，项目的地址是这里。

本文是想讲解一下项目中我觉得不错的效果，主要包括下面三部分：

一.Today中的应用卡片，打开和关闭的效果。

Overview1.gif

二.游戏App的详情中，上下滑动中渐变的导航栏和顶部视图,横滑展示的列表

Overview2.gif

三.更新列表中，点击某一项的更多，cell刷新

Overview3.gif

---

具体实现：

---

一、卡片打开和收起：

• 打开：从Today的列表中点击某一个cell，然后present出详情页面。

• 关闭：从详情页面点击关闭按钮，或者按住屏幕下滑，关闭详情页面。

整个动画过程是在TodayViewController到CardDetailViewController中完成的。

这里的打开和关闭都属于自定义转场动画，因此首页的一点是详情页面要遵循代理UIViewControllerTransitioningDelegate

picture1.png

这里TodayAnimationTransition是定义转场动画的效果具体是如何实现的，CardPresentationController是转场发生时的背景，也就是在详情页面下拉时，看到的高斯模糊效果。

下面来看看其中的具体是如何present的。这一部分实现是在TodayAnimationTransition.swift中。

picture2.png

这里分为3个部分：

• 先通过transitionContext获得转场动画的中需要的元素

• 设置动画开始时，控制器的size,也就是列表中卡片的大小

• 动画结束时，控制器的size撑满屏幕，卡片的size也随之变大

dismiss的部分原理类似，不过多了一个下拉关闭的手势。

这个动画里还包含了很多细节，包括：

• 状态栏和底部导航栏的隐藏和显示。

• 按住卡片时，卡片缩小，松开时，跳转到详情页面

具体细节可以到代码中查看。

---

二、游戏详情中的动画

1.上下滑动渐变的导航栏和顶部视图,对应的控制器是DetailViewController。

• 首先自定义navigationBar。对应的类是DetailNavigationView

• 然后基于全屏的滑动效果，我们将所有内容都放到一个tableView里。

• 设置顶部图片为tableView的tableHeaderView。

• 最后在tableView滑动时，按比例改变navigationBar的透明度，返回按钮的颜色，以及tableHeaderView的大小。

因为同时涉及到大小，透明度，颜色的变化，这里的运算会稍微复杂点：

picture4.png

如上，3个注释对应着

• 顶部图片的大小变化

• navigationBar的透明度变化

• 返回按钮的颜色变化

具体实现请到代码中看。

---

三、更新列表中，点击更多，cell的刷新。

对应的实现在UpdateTableViewController和UpdateTableViewCell

这里其实主要想说的是使用UITableViewCell的自适应高度，有些时候非常管用。

例如在更新列表中，本来每一个cell的等高的，但点击更多按钮后，cell的高度会变化。使用自适应高度后，我们并不关心实际每一个cell的高度，一切都交给系统自己去适配。

这里cell的布局我是用xib实现的，关键点在于xib由显示文字的控件和其他控件撑满，当文字越多时，显示文字的label越大，系统计算出cell的高度也会越大。

picture5.png

如图，ContentLabel是显示主要文字的Label,它的上下左右的约束，使得cell高度会随它的高度变化而变化。

在UpdateTableViewController中的代码也非常少，

picture6.png

只需要设置cell的预估高度，并将实际高度设为自适应，最后注册这个cell就行了

---

其他部分

项目中还包括了我的详情页面，搜索页面等，有兴趣的朋友也可以看看。

---

结尾：

• 出于想练练英文的目的，项目显示的内容以及代码中的注释，都是用的英文。

• 本项目只做了一部分，还有很多内容可以继续做，有兴趣的朋友，也可以提交你们想补充的地方，让我们一起把这个项目完善吧。

最后，项目地址是这里,觉得还不错的朋友请点个Star吧~