iOS中的转场动画

在iOS开发中有时会有一些动画的需求，本篇博客我们说一下动画效果。本篇博客中的动画是动画中的一种－－转场动画（CATransition）。

1.为导航控制器添加动画。

在一般的开发中在一个控制器push到下一个控制器的时候苹果会有一个默认的动画即下一个控制器平移过来将上一个控制器覆盖，大多数的应用也使用了苹果给出的默认动画效果。然而有些项目在一个控制器push到下一个控制器的时候却需要添加一些特殊的动画效果。如何添加这些特殊动画呢？我们实际是将这些动画添加到了控制器的视图图层上。看代码：

CATransition * transition = [CATransition animation];

    /*

     pageCurl            向上翻页

     pageUnCurl          向下翻页

     rippleEffect        滴水效果

     suckEffect          收缩效果，如一块布被抽走

     cube                立方体效果

     oglFlip             上下翻转效果

     */

    transition.type = @"cube";  // 动画效果

    transition.duration = 1;    // 动画持续时间

    /*

     kCATransitionFromTop

     

     kCATransitionFromBottom

     

     kCATransitionFromRight

     

     kCATransitionFromLeft

     */

    transition.subtype = kCATransitionFromRight;    // 动画子类型，动画的方向

    transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];   // 动画的轨迹模式

    

    [self.navigationController.view.layer addAnimation:transition forKey:nil];

    NextViewController * nextVC = [[NextViewController alloc] init];

    [self.navigationController pushViewController:nextVC animated:YES];

在使用了以上的这些代码之后我们在进行push的时候就会有不一样的动画效果了。

效果如下图：

这是一个立方体的效果。

   二. 为切换视图添加动画

有时我们在切换两个视图的时候也需要添加动画，实际动画还是添加在了图层上了。切换的两个视图是添加在同一个视图控制器的view上的。看代码：

    CGContextRef context = UIGraphicsGetCurrentContext();

    [UIView beginAnimations:nil context:context];

    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];

    [UIView setAnimationDuration:kDuration];

    switch (tag) {

        case 105:

            [UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:self.view cache:YES];

            break;

        case 106:

            [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.view cache:YES];

            break;

        case 107:

            [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self.view cache:YES];

            break;

        case 108:

            [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self.view cache:YES];

            break;

        default:

            break;

    }

    

    NSUInteger green = [[self.view subviews] indexOfObject:self.greenView];

    NSUInteger blue = [[self.view subviews] indexOfObject:self.blueView];

    [self.view exchangeSubviewAtIndex:green withSubviewAtIndex:blue];

    

    [UIView setAnimationDelegate:self];

    // 动画完毕后调用某个方法

    //[UIView setAnimationDidStopSelector:@selector(animationFinished:)];

    [UIView commitAnimations];

下面的代码动画效果会更丰富一些：

CATransition *animation = [CATransition animation];

    animation.delegate = self;

    animation.duration = kDuration;

    animation.timingFunction = UIViewAnimationCurveEaseInOut;

    

    switch (tag) {

        case 101:

            animation.type = kCATransitionFade;

            break;

        case 102:

            animation.type = kCATransitionPush;

            break;

        case 103:

            animation.type = kCATransitionReveal;

            break;

        case 104:

            animation.type = kCATransitionMoveIn;

            break;

        case 201:

            animation.type = @"cube";

            break;

        case 202:

            animation.type = @"suckEffect";

            break;

        case 203:

            animation.type = @"oglFlip";

            break;

        case 204:

            animation.type = @"rippleEffect";

            break;

        case 205:

            animation.type = @"pageCurl";

            break;

        case 206:

            animation.type = @"pageUnCurl";

            break;

        case 207:

            animation.type = @"cameraIrisHollowOpen";

            break;

        case 208:

            animation.type = @"cameraIrisHollowClose";

            break;

        default:

            break;

    }

    animation.subtype = kCATransitionFromRight;

    

    

    NSUInteger green = [[self.view subviews] indexOfObject:self.greenView];

    NSUInteger blue = [[self.view subviews] indexOfObject:self.blueView];

    [[self.view layer] addAnimation:animation forKey:@"animation"];

    [self.view exchangeSubviewAtIndex:green withSubviewAtIndex:blue];