iOS仿微信相册界面翻转过渡动画

原创 2016年08月28日 18:35:55

点开微信相册的时候,想要在相册图片界面跳转查看点赞和评论时,微信会采用界面翻转的过渡动画来跳转到评论界面,好像是在图片界面的背面一样,点击完成又会翻转回到图片界面,这不同于一般的导航界面滑动动画,觉得很有意思,于是自己学着做了一下,其实也很简单,下面是实现的类似的效果图:

在图片界面点击右下角的查看评论会翻转到评论界面,评论界面点击左上角的返回按钮会反方向翻转回图片界面,真正的实现方法,与传统的导航栏过渡其实只有一行代码的区别,让我们来看看整体的实现。

首先我们实现图片界面,这个界面上有黑色的背景,一张图片和一个查看评论的按钮:

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor blackColor];// 背景设为黑色

    // 图片
    UIImageView *myImage = [[UIImageView alloc] initWithFrame:CGRectMake(0, (SCREENHEIGHT - SCREENWIDTH + 100) / 2, SCREENWIDTH, SCREENWIDTH - 100)];
    myImage.image = [UIImage imageNamed:@"image.jpg"];
    [self.view addSubview:myImage];

    // 右下角查看评论的按钮
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(SCREENWIDTH - 100, SCREENHEIGHT - 50, 80, 30)];
    label.text = @"查看评论";
    label.textColor = [UIColor whiteColor];
    label.userInteractionEnabled = YES;
    UITapGestureRecognizer *labelTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(viewComment)];
    [label addGestureRecognizer:labelTap];
    [self.view addSubview:label];
}

到这里其实都没什么特别的,现在来看看查看评论文字的点击响应,也就是跳转的实现:

// 查看评论
- (void)viewComment {
    CommentViewController *commentVC = [[CommentViewController alloc] init];
    [self.navigationController pushViewController:commentVC animated:NO];
    // 设置翻页动画为从右边翻上来
    [UIView transitionWithView:self.navigationController.view duration:1 options:UIViewAnimationOptionTransitionFlipFromRight animations:nil completion:nil];
}

可以看到,就是比普通的push多了一行代码而已,原本的push部分我们的animated参数要设为NO,然后再行设置翻转的动画即可,这里options的参数可以看出,动画是从右边开始翻转的,duration表示动画时间,很简单地就实现了翻转到评论界面。

我们再看看评论界面的代码,界面元素上有一个返回按钮,一个图片,一行文字,但是这个返回按钮的特殊在于,我们重新定义了导航栏的返回按钮,如果什么都不做,导航栏其实会自带一个带箭头的返回按钮,点击后就是正常的滑动回上一个界面,这里我们要用我们自己的按钮来取代它:

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];// 背景色设为白色

    // 自定义导航栏按钮
    UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithTitle:@"返回" style:UIBarButtonItemStyleBordered target:self action:@selector(back)];
    self.navigationItem.leftBarButtonItem = backButton;

    // 图片
    UIImageView *myImage = [[UIImageView alloc] initWithFrame:CGRectMake((SCREENWIDTH - 300)/2, (SCREENHEIGHT - 200)/2 - 100, 300, 200)];
    myImage.image = [UIImage imageNamed:@"image.jpg"];
    [self.view addSubview:myImage];

    // 一条文本
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake((SCREENWIDTH - 200)/2, myImage.frame.origin.y + myImage.frame.size.height + 20, 200, 30)];
    label.text = @"100个赞,100条评论";
    label.textAlignment = NSTextAlignmentCenter;
    [self.view addSubview:label];
}

可以看到,我们自定义了一个UIBarButtonItem按钮,然后用它放在导航栏的leftBarButtonItem的位置,这样就取代了原本的返回按钮了,然后在按钮点击响应中去设置翻转动画:

// 返回上一页
- (void)back {
    // 设置翻转动画为从左边翻上来
    [UIView transitionWithView:self.navigationController.view duration:1 options:UIViewAnimationOptionTransitionFlipFromLeft animations:nil completion:nil];
    [self.navigationController popViewControllerAnimated:NO];
}

还是一样的,不过这次要先设置动画,再进行pop,否则没有效果,而且pop的动画参数也要设为NO,可以看到这次的options的参数是从左边开始翻转,在视觉上就有一个反方向翻回去的效果。

以上,就是该过渡动画的全部实现过程了,其实无非就是加了两行代码而已,非常简单,但是偶尔用一下,还是能带来非常好的效果的~

这里有我的示例工程:https://github.com/Cloudox/ReverseDemo
版权所有:http://blog.csdn.net/cloudox_

版权声明:本文为博主原创文章,允许转载,注明出处,回复告诉博主一声即可。

仿微信抢红包打开特效3D图片翻转

参考网上的代码,主要是通过动画类,实现图片的3D旋转效果。代码简单易懂,移植方便。 下载链接...
  • page1001
  • page1001
  • 2016年11月07日 14:47
  • 1624

ios 视图动画翻转效果

虽然,网上有很多代码,但是 还是觉得自己写了一个简单的动画翻转的效果, 会更加熟悉些。下面把代码贴出来学习学习。 - (void)viewDidLoad {     [super vie...
  • ouY_huan
  • ouY_huan
  • 2012年05月31日 10:42
  • 17601

iOS 动画效果:Core Animation & Facebook's pop

前言 相信很多人对实现 iOS 中的动画效果都特别头疼,往往懒得动手,功能实现不就得了,何必要那么花哨、装13的东西。但是看到别人的炫酷动效,心中又瘙痒不已,便下定决心学习,于是开始翻看 Core ...
  • x32sky
  • x32sky
  • 2015年12月28日 09:42
  • 1910

iOS 环绕旋转动画实现

// 调用 DiyAnimation *circle = [[DiyAnimation alloc] initWithFrame:CGRectMake(0, 120, 320, 300)];...
  • sinat_30657013
  • sinat_30657013
  • 2017年03月09日 15:43
  • 283

两个UIViewController之间的翻转可以用动画效果翻转(上下,左右)--跨界面之间的视图切换

UIViewController之间的切换除了UINavigationController里面的pushViewController和popViewController与UITalbarControl...
  • cxiao_11
  • cxiao_11
  • 2016年01月27日 14:45
  • 1892

IOS引导页 图片旋转动画

  • 2015年03月27日 10:00
  • 1.21MB
  • 下载

iOS中动画的实现:以及视图的移动、缩放和旋转

一、动画和移动视图 IOS上实现动画的方式有多种,我们可以获得的最高层次的动画能力是通过UIKit,UIKit中包括一些Core Animation的较低层次的功能,并且包装成非常简洁的API供我们使...
  • qq348931837
  • qq348931837
  • 2013年09月18日 16:20
  • 1622

iOS - iOS平移旋转动画 通过核心动画实现(动画组)

有时需要对某个特定的View进行平移+旋转的操作,其实很简单,只需要一个动画组就可以解决:#pragma mark 动画 - (void)tipAnimation:(UIView *)tipView ...
  • icefishlily
  • icefishlily
  • 2016年08月12日 17:04
  • 857

IOS翻转动画(可来回切换图片)

有个需求是让图片的两面显示不同的图片,点击图片时让这两张图片翻转切换,以前做这个效果的同事(已离职)专门下载了个框架,现在想想完全没必要,跟大家分享我自己写的Demo,10行代码就解决问题,具体实现代...
  • IOS_dashen
  • IOS_dashen
  • 2015年09月14日 11:40
  • 1973

猫猫学IOS(四十一)UI之核心动画 两行代码搞定3D转场(做android的哭死)

猫猫分享,必须精品原创文章,欢迎转载。转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243?viewmode=contents 源码素材地址:效果:代码...
  • u013357243
  • u013357243
  • 2015年05月08日 18:04
  • 2470
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:iOS仿微信相册界面翻转过渡动画
举报原因:
原因补充:

(最多只允许输入30个字)