码迷,mamicode.com
首页 > 移动开发 > 详细

iOS Controller中视图切换动画效果

时间:2017-02-23 13:14:49      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:oid   视图切换   ges   UI   state   case   set   icon   nts   

最近在一个小项目中遇到一个动画切换的效果,一时被难到了,后来又去看了下苹果公司提供的动画类,找到了几个动画的执行方法,这些默认的动画方法足够满足一般需求的动画效果了,接下来贴代码 首先我们在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;

    } } 最终的实现效果是这样的 技术分享

iOS Controller中视图切换动画效果

标签:oid   视图切换   ges   UI   state   case   set   icon   nts   

原文地址:http://www.cnblogs.com/zimou47/p/6432810.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!