点此下载源码下载：源码（会持续更新，欢迎star。保证炫酷，童叟无欺！）

从dribbble的设计师的作品中了解到City Guides上非常优秀的动画效果。感叹设计师很棒的设计的同时，小编也在心里默想这些动画是怎么实现的。于是从App Store上下载了APP，使用然后仔细研究后便有了此篇文章。

City Guides中几乎所有的界面展示与交互方式都是有动画效果的。小编也就分几部分来实现动画效果。

这一篇要实现的动画效果如下：

第一个动画效果：

第二个动画效果：

本篇文章只讲解实现思路，具体的可以参见源码。

动画效果一

第一个动画效果，实际上包括三个部分动画效果。选中动画效果、动画转场和切换动画效果。本篇文章中所有的动画，使用POP和Core Animation实现。

选中动画效果

此动画实现相对简单一些，中间部分是使用的UICollectionView,创建了四个cell。在可视的cell中实现被选中的cell放大，其余可视的cell缩放的同时透明度减少。使用POP实现的方法如下：

此部分实现的效果图：

动画转场

此部分的转场过渡动画效果，参考小编上篇文章讲解的自定义转场。里面涉及到手势交互，下一篇文章再做详细讲解。

切换效果动画

实际上是点击最上面的两个button后，对应的视图动画效果。

切换到SLIDES后，UICollectionView整个视图向左移，移出当前屏幕。与此同时可视的UICollectionViewCell随着变化，而且每个cell的变化有区别。区别是：移出的时候，第二个cell最后消失在视线里（偏移量最小），第四个cell旋转幅度较大（角度最大）。
实现的方式：

切换到GRID后，UICollectionView整个视图向右移，渐入到当前屏幕。UICollectionViewCell变化与上面有些不一样。第3个cell 和第4个cell最后完成动画，其动画变化较大。