阅读 2027

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

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

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

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

Overview1.gif

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

Overview2.gif

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

Overview3.gif


具体实现:


一、卡片打开和收起:

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

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

整个动画过程是在TodayViewControllerCardDetailViewController中完成的。

这里的打开和关闭都属于自定义转场动画,因此首要的一点是详情页面要遵循代理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的刷新。

对应的实现在UpdateTableViewControllerUpdateTableViewCell

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

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

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

picture5.png

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

UpdateTableViewController中的代码也非常少,

picture6.png

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


其他部分

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


结尾:

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

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

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

关注下面的标签,发现更多相似文章
评论