前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >iOS中的转场动画

iOS中的转场动画

作者头像
用户1451823
发布2018-09-13 15:33:34
1.4K0
发布2018-09-13 15:33:34
举报
文章被收录于专栏:DannyHoo的专栏DannyHoo的专栏

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1337721

在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;

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017年03月26日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档