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

2017/07/16 iOS 动画

利用 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
注释的意思是:执行这个方法之后,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 // 从下往上同时从外向里翻转

在 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(@"翻转到了地图页面");
           }];
        }
}

Search

    Table of Contents