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;
}
}
最终的实现效果是这样的
