iOS Controller中视图切换动画效果

最近在一个小项目中遇到一个动画切换的效果,一时被难到了,后来又去看了下苹果公司提供的动画类,找到了几个动画的执行方法,这些默认的动画方法足够满足一般需求的动画效果了,接下来贴代码 首先我们在Controller中创建对应的按钮按钮 CGFloat mainHeight = [UIScreen mainScreen].bounds.size.height; NSArray titleArr = @[@"添加",@"翻页",@"移入",@"揭开",@"立方体",@"收缩",@"翻转",@"水波"]; for (int i = 0; i < 8; i ++) { UIButton button = [UIButton buttonWithType:UIButtonTypeSystem]; button.tag = 100 + i; [button setTitle:titleArr[i] forState:UIControlStateNormal]; //每行四个button NSInteger row = i / 4; NSInteger col = i % 4; [button addTarget:self action:@selector(changePageAnimation:) forControlEvents:UIControlEventTouchUpInside]; button.frame = CGRectMake(5 + col 80,mainHeight - (2 - row) 45 - 20 , 70, 40); [self.view addSubview:button]; } 创建好按钮后我们就可以添加一些视图控件了,这里我添加了两个UIView作为演示用: UIView purpleView = [[UIView alloc] initWithFrame:self.view.bounds]; purpleView.backgroundColor = [UIColor purpleColor]; [self.view addSubview:purpleView]; UIView blackView = [[UIView alloc] initWithFrame:self.view.bounds]; blackView.backgroundColor = [UIColor blackColor]; [self.view addSubview:blackView]; 这里要注意UIView的层级关系 接下来是按钮的点击方法,我这里使用tag值来取当前button

• (void)changePageAnimation:(UIButton *)sender { switch (sender.tag) { case 100: { // 开始执行动画 [UIView beginAnimations:@"animation" context:nil]; [UIView setAnimationDuration:1.0f]; // 控制UIView内过渡动画的类型 [UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:self.view cache:YES]; // 设置动画的变化曲线 [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut]; [self.view exchangeSubviewAtIndex:3 withSubviewAtIndex:2]; // 提交动画 [UIView commitAnimations]; } break; case 101: { // 开始执行动画 [UIView beginAnimations:@"animation" context:nil]; [UIView setAnimationDuration:1.0f]; // 控制UIView内过渡动画的类型 [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.view cache:YES]; // 设置动画的变化曲线 [UIView setAnimationCurve:UIViewAnimationCurveEaseOut]; // 交换视图控制器所显示的UIView中中2个子控件位置 [self.view exchangeSubviewAtIndex:3 withSubviewAtIndex:2];

      [UIView commitAnimations];
  }
      break;
  case 102: { CATransition *transition = [CATransition animation]; transition.duration = 2.0f; // 使用kCATransitionMoveIn动画 transition.type = kCATransitionMoveIn; // 指定动画方向，从左向右 transition.subtype = kCATransitionFromLeft; [self.view.layer addAnimation:transition forKey:@"animation"]; [self.view exchangeSubviewAtIndex:2 withSubviewAtIndex:3]; } break; case 103: { CATransition *transition = [CATransition animation]; transition.duration = 2.0f; // 使用kCATransitionReveal动画 transition.type = kCATransitionReveal; // 指定动画方向，从上到下 transition.subtype = kCATransitionFromLeft; [self.view.layer addAnimation:transition forKey:@"animation"]; // 交换视图控制器所显示的UIView中中2个子控件位置 [self.view exchangeSubviewAtIndex:2 withSubviewAtIndex:3]; } break; case 104: { CATransition *transition = [CATransition animation]; transition.duration = 2.0f; // 使用@"cube"动画 transition.type = @"cube"; // 指定动画方向，从左到右 transition.subtype = kCATransitionFromLeft; [self.view.layer addAnimation:transition forKey:@"animation"]; // 交换视图控制器所显示的UIView中中2个子控件位置 [self.view exchangeSubviewAtIndex:2 withSubviewAtIndex:3]; } break; case 105: { CATransition *transition = [CATransition animation]; transition.duration = 2.0f; // 使用@"suck"动画, 该动画与动画方向无关 transition.type = @"suckEffect"; [self.view.layer addAnimation:transition forKey:@"animation"]; // 交换视图控制器所显示的UIView中中2个子控件位置 [self.view exchangeSubviewAtIndex:2 withSubviewAtIndex:3]; } break; case 106: { CATransition *transition = [CATransition animation]; transition.duration = 0.5f; // 使用@"oglFlip"动画 transition.type = @"oglFlip"; // 指定动画方向为上下翻转 transition.subtype = kCATransitionFromTop; [self.view.layer addAnimation:transition forKey:@"animation"]; // 交换视图控制器所显示的UIView中中2个子控件位置 [self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:3]; } break; case 107: { CATransition *transition = [CATransition animation]; transition.duration = 2.0f; // 使用@"rippleEffect"动画，该动画与方向无关 transition.type = @"rippleEffect"; [self.view.layer addAnimation:transition forKey:@"animation"]; // 交换视图控制器所显示的UIView中中2个子控件位置 [self.view exchangeSubviewAtIndex:2 withSubviewAtIndex:3]; } break; default: break;

  } } 最终的实现效果是这样的 

转载于:https://www.cnblogs.com/zimou47/p/6432810.html