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

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

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

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

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

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

具体实现：

1、卡片打开和收起：

打开：从Today的列表中点击某一个cell，而后present出详情页面。swift
关闭：从详情页面点击关闭按钮，或者按住屏幕下滑，关闭详情页面。markdown

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

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

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

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

这里分为3个部分：spa

先经过transitionContext得到转场动画的中须要的元素3d
设置动画开始时，控制器的size,也就是列表中卡片的大小
动画结束时，控制器的size撑满屏幕，卡片的size也随之变大

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

这个动画里还包含了不少细节，包括：

状态栏和底部导航栏的隐藏和显示。
按住卡片时，卡片缩小，松开时，跳转到详情页面

具体细节能够到代码中查看。

2、游戏详情中的动画

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

首先自定义navigationBar。对应的类是DetailNavigationView
而后基于全屏的滑动效果，咱们将全部内容都放到一个tableView里。
设置顶部图片为tableView的tableHeaderView。
最后在tableView滑动时，按比例改变navigationBar的透明度，返回按钮的颜色，以及tableHeaderView的大小。

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

如上，3个注释对应着

顶部图片的大小变化
navigationBar的透明度变化
返回按钮的颜色变化

具体实现请到代码中看。

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

对应的实如今UpdateTableViewController和UpdateTableViewCell

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

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

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

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

在UpdateTableViewController中的代码也很是少，

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

其余部分

项目中还包括了个人详情页面，搜索页面等，有兴趣的朋友也能够看看。

结尾：

出于想练练英文的目的，项目显示的内容以及代码中的注释，都是用的英文。
本项目只作了一部分，还有不少内容能够继续作，有兴趣的朋友，也能够提交大家想补充的地方，让咱们一块儿把这个项目完善吧。