iOS -- 两个视图view的翻转效果简单实现

有的app里面， 点击某个按钮之后， 一个view翻转到另一个视图view，再次点击按钮，又显示了第一个view，如下所示：

演示动画.gif

简书不能上传本地的.mov视频，就找到一个录制操作之后直接为.gif的软件，LICEcap.app 简单好用 。dmg下载地址

利用UIView的类方法：

+ (void)transitionFromView:(UIView *)fromView
                    toView:(UIView *)toView
                  duration:(NSTimeInterval)duration
                   options:(UIViewAnimationOptions)options
                completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);
      // toView added to fromView.superview, fromView removed from its superview

// toView added to fromView.superview, fromView removed from its superview
注释的意思是：执行这个方法之后，fromView会从父视图superview上移除掉，toView会添加到fromView的父视图superview上。(初始化时候 toView并未添加到父视图上)

上述类方法的参数解析：

1、 fromView：第一个视图，显示在用户眼前的view
2、 toView：第二个视图，翻转之后需要显示的view
3、 duration：翻转用时时长，单位是s 秒
4、 options：翻转模式，枚举类型

• UIViewAnimationOptionTransitionNone // default没有动画
• UIViewAnimationOptionTransitionFlipFromLeft // 从左向右同时从里向外翻转
• UIViewAnimationOptionTransitionFlipFromRight // 从右向左同时从里向外翻转
• UIViewAnimationOptionTransitionCurlUp // 从下往上纸张翻页
• UIViewAnimationOptionTransitionCurlDown // 从上往下纸张翻页
• UIViewAnimationOptionTransitionCrossDissolve //溶解消失显示下一个视图 动画比较柔和
• UIViewAnimationOptionTransitionFlipFromTop // 从上往下同时从外向里翻转
• UIViewAnimationOptionTransitionFlipFromBottom // 从下往上同时从外向里翻转
  5、 completion：翻转动画结束之后，所做的事情

在这里由于有remove移除，所以在.m文件中预防fromView(mapView)、toView(tableView)丢失，就用了strong强引用：

/// 属性
@property (weak, nonatomic) IBOutlet UIView *containView; // superView
@property(nonatomic, strong) UITableView *tableView;    // toView
@property (strong, nonatomic) MKMapView *mapView;    // fromView

在viewDidLoad中，初始化tableView(toView), mapView(fromView)，首先展现的是mapView，所以先将mapView add到父视图self.containView上：

// 初始化
// fromView
MKMapView *mapView = [[MKMapView alloc] init];
mapView.frame = self.containView.bounds;
self.mapView = mapView;
[self.containView addSubview:self.mapView];  // 首先显示mapView视图
self.mapView.mapType = MKMapTypeStandard;
self.mapView.rotateEnabled = NO; // 不旋转

// toView
UITableView *tableView = [[UITableView alloc] init];
tableView.frame = self.containView.bounds;
tableView.delegate = self;
tableView.dataSource = self;
self.tableView = tableView;

翻转事件，包括文字的改变，以及fromView与toView的切换：

/// 点击翻转“列表”或者 “地图”事件
- (IBAction)listOrMapShowItemClick:(id)sender {
if ([self.listOrMapShowItem.title isEqualToString:@"列表"]) {
// 点击 “列表”  翻转显示到列表tableview
self.listOrMapShowItem.title = @"地图";
// 翻转到列表那一页
// tableView添加到mapView的父视图上， mapView从父视图移除
   [UIView transitionFromView:self.mapView toView:self.tableView duration:0.5f options:UIViewAnimationOptionTransitionFlipFromLeft completion:^(BOOL finished) {
       NSLog(@"翻转到了列表页面");
   }];
}else
{
// 点击 地图 翻转显示 地图页面
self.listOrMapShowItem.title = @"列表";
// mapView添加到tableView的父视图上， tableView从父视图移除
   [UIView transitionFromView:self.tableView toView:self.mapView duration:0.5f options:UIViewAnimationOptionTransitionFlipFromLeft completion:^(BOOL finished) {
      NSLog(@"翻转到了地图页面");
   }];
 }
}