脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → IOS → IOS实现微信朋友圈相册界面翻转过渡动画

IOS实现微信朋友圈相册评论界面的翻转过渡动画

 更新时间：2016年08月29日 10:58:26   投稿：daisy  
现在很多人几乎每天都离不开微信，大家有没有发现在点开微信相册的时候，想要在相册图片界面跳转查看点赞和评论时，微信会采用界面翻转的过渡动画来跳转到评论界面，点击完成又会翻转回到图片界面，这不同于一般的导航界面滑动动画，于是学着做了一下，有需要一起看看。

先来看看实现的类似效果图：

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

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

- (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的参数是从左边开始翻转，在视觉上就有一个反方向翻回去的效果。

总结

以上，就是该过渡动画的全部实现过程了，其实无非就是加了两行代码而已，非常简单，但是偶尔用一下，还是能带来非常好的效果的~希望这篇文章的内容对大家的学习和工作能带来一些帮助，如果有疑问可以留言交流。

您可能感兴趣的文章:

相关文章

  • iOS开发使用GDataXML框架解析网络数据

    iOS开发使用GDataXML框架解析网络数据

    GDataXML是Google开发的一个XML解析库，轻便，特点使用非常简单，支持XPath。今天把前两天弄的IOS XML解析记录下来，也供大家参考。
    2016-02-02
  • ios 使用xcode11 新建项目工程的步骤详解

    ios 使用xcode11 新建项目工程的步骤详解

    这篇文章主要介绍了ios 使用xcode11 新建项目工程 （值得注意的问题）,本文分步骤通过图文的形式给大家展示，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-04-04
  • 移动web开发技能之touch事件详解

    移动web开发技能之touch事件详解

    这篇文章主要为大家介绍了移动web开发技能之touch事件详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • iOS RN启动中管理Native Module详解

    iOS RN启动中管理Native Module详解

    这篇文章主要为大家介绍了iOS RN启动中 Native Module 是如何被管理的，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • 使用objc runtime实现iOS闭环的懒加载功能

    使用objc runtime实现iOS闭环的懒加载功能

    利用objc runtime的动态性实现懒加载可以实现即可增加又可删除功能，也可以避免污染类型。这篇文章主要介绍了使用objc runtime实现iOS闭环的懒加载功能,需要的朋友可以参考下
    2019-06-06
  • IOS实现展开二级列表效果

    IOS实现展开二级列表效果

    本文通过实例代码向大家演示在IOS中如何实现展开二级列表的效果，这个功能效果很好，对于日常开发APP中很有帮助，下面一起来看看如何实现吧。
    2016-08-08
  • IOS 陀螺仪开发(CoreMotion框架)实例详解

    IOS 陀螺仪开发(CoreMotion框架)实例详解

    这篇文章主要介绍了IOS 陀螺仪开发实例详解的相关资料,介绍了螺旋仪参数意义及CoreMotion框架，需要的朋友可以参考下
    2016-10-10
  • iOS获取当前网络环境的实现方法(推荐)

    iOS获取当前网络环境的实现方法(推荐)

    下面小编就为大家带来一篇iOS获取当前网络环境的实现方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • iOS开发之适配iOS10以及Xcode8

    iOS开发之适配iOS10以及Xcode8

    这篇文章主要为大家详细介绍了iOS开发之适配iOS10以及Xcode8的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • IOS开发仿微信消息长按气泡菜单实现效果

    IOS开发仿微信消息长按气泡菜单实现效果

    这篇文章主要介绍了IOS开发仿微信消息长按气泡菜单实现效果示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07

最新评论