干货系列之实现City Guides的动画效果(一)

点此下载源码下载:源码(会持续更新,欢迎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最后完成动画,其动画变化较大。

以上两个动画完成的过程中,仔细观察SLIDES下对应的视图,UIScrollView有一些细微的变化。在Y方向上有一定的偏移量的变化。是根据UICollectionView移出的位置变化而改变。使用POPAnimationDelegate的方法,根据当前执行动画决定在Y方向偏移量是逐步增加或减少。

具体效果参见下图:

动画效果二

此部分动画是使用UIScrollView来实现,同样可以使用UICollectionView来实现。此处是UICollectionView实现。本篇文章使用继承UIScrollView的类来实现。只需要以下几行代码即可。是根据UIScrollView的子视图偏移量的变化实现。参考以下代码

其中CATransform3DPerspect实现方法和使用原理可以参考此篇文章iOS 3D UI—CALayer的transform扩展

后续实现内容,请持续关注小编。


点此下载源码下载:源码(会持续更新,欢迎star)

1 5 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部