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;

    }

}

最终的实现效果是这样的