iOS仿微信相册界面翻转过渡动画
来源:互联网 发布:安卓的重置网络设置 编辑:程序博客网 时间:2024/05/20 07:17
点开微信相册的时候,想要在相册图片界面跳转查看点赞和评论时,微信会采用界面翻转的过渡动画来跳转到评论界面,好像是在图片界面的背面一样,点击完成又会翻转回到图片界面,这不同于一般的导航界面滑动动画,觉得很有意思,于是自己学着做了一下,其实也很简单,下面是实现的类似的效果图:
在图片界面点击右下角的查看评论会翻转到评论界面,评论界面点击左上角的返回按钮会反方向翻转回图片界面,真正的实现方法,与传统的导航栏过渡其实只有一行代码的区别,让我们来看看整体的实现。
首先我们实现图片界面,这个界面上有黑色的背景,一张图片和一个查看评论的按钮:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
到这里其实都没什么特别的,现在来看看查看评论文字的点击响应,也就是跳转的实现:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
可以看到,就是比普通的push多了一行代码而已,原本的push部分我们的animated参数要设为NO,然后再行设置翻转的动画即可,这里options的参数可以看出,动画是从右边开始翻转的,duration表示动画时间,很简单地就实现了翻转到评论界面。
我们再看看评论界面的代码,界面元素上有一个返回按钮,一个图片,一行文字,但是这个返回按钮的特殊在于,我们重新定义了导航栏的返回按钮,如果什么都不做,导航栏其实会自带一个带箭头的返回按钮,点击后就是正常的滑动回上一个界面,这里我们要用我们自己的按钮来取代它:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
可以看到,我们自定义了一个UIBarButtonItem按钮,然后用它放在导航栏的leftBarButtonItem的位置,这样就取代了原本的返回按钮了,然后在按钮点击响应中去设置翻转动画:
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
还是一样的,不过这次要先设置动画,再进行pop,否则没有效果,而且pop的动画参数也要设为NO,可以看到这次的options的参数是从左边开始翻转,在视觉上就有一个反方向翻回去的效果。
以上,就是该过渡动画的全部实现过程了,其实无非就是加了两行代码而已,非常简单,但是偶尔用一下,还是能带来非常好的效果的~
这里有我的示例工程:https://github.com/Cloudox/ReverseDemo
- iOS仿微信相册界面翻转过渡动画
- iOS仿微信相册界面翻转过渡动画
- iOS仿微信相册界面翻转过渡动画
- 【IOS动画】UIView翻转
- surface界面翻转动画效果
- 两个界面切换翻转动画
- IOS页面切换过渡动画
- iOS 过渡动画的实现
- IOS界面(图片)翻转
- ios 视图动画翻转效果
- ios 视图动画翻转效果
- ios 前后摄像头翻转动画
- iOS开发翻转动画效果
- android翻转动画,界面不会颠倒
- Android动画--Activity界面180度翻转
- ios uivew过渡动画 翻页效果
- iOS开发——圆形过渡动画
- 自定义iOS的过渡动画的效果
- Redis各个数据类型的使用场景
- 查询数据库中每个表占用空间方法
- Oracle 使用connect by进行级联查询
- C++学习小疑问:类的名称能否和命名空间的名称相同?
- Simple、KMP、BM、Sunday匹配算法-效率测试
- iOS仿微信相册界面翻转过渡动画
- WIN32多线程二 用WaitXXX函数等待线程结束
- hexo教程系列——hexo配置教程
- Android SO库
- Kubernetes/Docker相关问题
- thread的status详解
- 巧用WM_PAINT解决ListView控件嵌入Edit显示不正常的问题
- HDU 4734 F(x) (数位DP)
- iOS 9不能访问HTTP的解决方法