首页 > 代码库 > iOS Controller中视图切换动画效果

iOS Controller中视图切换动画效果

2024-09-05 16:35:23   220人阅读

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


联系
我们