内容简介:CATransition是CAAnimation的子类,用于过渡动画或转场动画。为视图层移入移除屏幕提供转场动画。首先来看一下简单的Demo:将该动画添加到window.layer上,则会present或push时使用指定的转场动画。其中最主要的两个属性就是type和subtype。
1.CATransition
CATransition是CAAnimation的子类,用于过渡动画或转场动画。为视图层移入移除屏幕提供转场动画。首先来看一下简单的Demo:
CATransition *animation = [CATransition animation]; animation.type = kCATransitionFade; animation.subtype = kCATransitionFromRight; animation.duration = 1.0; // 在window上执行CATransition, 即可在ViewController转场时执行动画 [self.view.window.layer addAnimation:animation forKey:@"kTransitionAnimation"]; AViewController *vc = [[AViewController alloc] init]; [self presentViewController:vc animated:NO completion:nil];
将该动画添加到window.layer上,则会present或push时使用指定的转场动画。
其中最主要的两个属性就是type和subtype。
-
type:转场动画的类型。
官方SDK只提供了四种转场动画的类型,即:
CA_EXTERN NSString * const kCATransitionFade;CA_EXTERN NSString * const kCATransitionMoveIn;CA_EXTERN NSString * const kCATransitionPush;CA_EXTERN NSString * const kCATransitionReveal;
私有的type:
NSString *const kCATransitionCube = @"cube"; NSString *const kCATransitionSuckEffect = @"suckEffect"; NSString *const kCATransitionOglFlip = @"oglFlip"; NSString *const kCATransitionRippleEffect = @"rippleEffect"; NSString *const kCATransitionPageCurl = @"pageCurl"; NSString *const kCATransitionPageUnCurl = @"pageUnCurl"; NSString *const kCATransitionCameraIrisHollowOpen = @"cameraIrisHollowOpen";NSString *const kCATransitionCameraIrisHollowClose = @"cameraIrisHollowClose";
-
subtype:动画类型的方向
CA_EXTERN NSString * const kCATransitionFromRight;CA_EXTERN NSString * const kCATransitionFromLeft;CA_EXTERN NSString * const kCATransitionFromTop;CA_EXTERN NSString * const kCATransitionFromBottom;
上面讲的是给window.layer添加transition,这样使得在present或push时使用指定的转场动画。
既然讲到这里了,就看一下把transition加在layer上。
看一下示例代码:
- (void)viewDidLoad { [super viewDidLoad]; UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(100, 100, 100, 50)]; [button setTitle:@"进入" forState:UIControlStateNormal]; button.backgroundColor = [UIColor redColor]; [button addTarget:self action:@selector(buttonClicked) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:button]; _imageView = [[UIImageView alloc] initWithFrame:CGRectMake(100, 300, 150, 150)]; [self.view addSubview:_imageView]; _imageView.backgroundColor = [UIColor redColor]; _imageArray = @[[UIImage imageNamed:@"成果秀1"],[UIImage imageNamed:@"点赞他人1"],[UIImage imageNamed:@"偷师学艺1"],[UIImage imageNamed:@"学会欣赏3"]]; _imageView.image = [UIImage imageNamed:@"成果秀1"]; } - (void)buttonClicked{ CATransition *animation = [CATransition animation]; animation.type = @"cube"; animation.subtype = kCATransitionFromRight; animation.duration = 1.0; //换图片的时候使用转场动画 [self.imageView.layer addAnimation:animation forKey:nil]; //cycle to next image UIImage *currentImage = self.imageView.image; NSUInteger index = [self.imageArray indexOfObject:currentImage]; index = (index + 1) % [self.imageArray count]; self.imageView.image = self.imageArray[index]; }
2.transitionFromViewController
-
UIViewController自带的方法:
transitionFromViewController:toViewController:duration:options:animations:completion:这个转场动画是用在当一个父视图控制器中有几个childViewController,当要在这几个子视图控制器之间切换时就可以用这个方法。
AViewController *a = self.childViewControllers[0]; BViewController *b = self.childViewControllers[1]; CViewController *c = self.childViewControllers[2];// Curl 翻页效果// UIViewAnimationOptionTransitionCurlUp, UIViewAnimationOptionTransitionCurlDown// Flip 翻转效果// UIViewAnimationOptionTransitionFlipFromLeft, UIViewAnimationOptionTransitionFlipFromRight// UIViewAnimationOptionTransitionFlipFromTop, UIViewAnimationOptionTransitionFlipFromDown[self transitionFromViewController:_currentViewController toViewController:b duration:0.5 options:UIViewAnimationOptionTransitionFlipFromRight animations:^{ } completion:^(BOOL finished) { }];
3.Transition Animation
1 UINavigationControllerDelegate + UIViewControllerAnimatedTransitioning
在UINavigationController的转场动画中,要指定UINavigationControllerDelegate对象:
self.navigationController.delegate = self; [self.navigationController pushViewController:itemVC animated:YES];
UINavigationControllerDelegate主要有以下两个协议方法:
//pop- (nullable id <uiviewcontrollerinteractivetransitioning> )navigationController:(UINavigationController *)navigationController interactionControllerForAnimationController:(id <uiviewcontrolleranimatedtransitioning> ) animationController NS_AVAILABLE_IOS(7_0);//push- (nullable id <uiviewcontrolleranimatedtransitioning> )navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC NS_AVAILABLE_IOS(7_0); </uiviewcontrolleranimatedtransitioning> </uiviewcontrolleranimatedtransitioning> </uiviewcontrollerinteractivetransitioning>
首先创建一个基类PDAnimatorBaseTransition实现UIViewControllerAnimatedTransitioning协议的方法。
UIViewControllerAnimatedTransitioning协议的方法有:
//动画持续时间- (NSTimeInterval)transitionDuration:(nullable id <uiviewcontrollercontexttransitioning> )transitionContext;//转场动画实现细节- (void)animateTransition:(id <uiviewcontrollercontexttransitioning> )transitionContext; 动画结束时调用 - (void)animationEnded:(BOOL) transitionCompleted; </uiviewcontrollercontexttransitioning> </uiviewcontrollercontexttransitioning>
-
PDAnimatorBaseTransition.h
#import <foundation foundation="" h=""> #import <uikit uikit="" h=""> typedef NS_ENUM(NSInteger, PDAnimationType){ animationTypePresent = 0, animationTypeDismiss , animationTypePush , animationTypePop, };@interface PDAnimatorBaseTransition : NSObject <uiviewcontrolleranimatedtransitioning> @property (nonatomic, assign)PDAnimationType animationType;@property (nonatomic, strong)UIView *containerView;@property (nonatomic, strong)UIViewController *from;@property (nonatomic, strong)UIViewController *to;@property (nonatomic, strong)UIView *fromView;@property (nonatomic, strong)UIView *toView;@property (nonatomic, weak)id <uiviewcontrollercontexttransitioning> transitionContext;@end </uiviewcontrollercontexttransitioning> </uiviewcontrolleranimatedtransitioning> </uikit> </foundation>
-
PDAnimatorBaseTransition.m
#import "PDAnimatorBaseTransition.h"@interface PDAnimatorBaseTransition() @end@implementation PDAnimatorBaseTransition#pragma mark -required- (NSTimeInterval)transitionDuration:(nullable id <uiviewcontrollercontexttransitioning> )transitionContext{ return 1.f; } - (void)animateTransition:(id <uiviewcontrollercontexttransitioning> )transitionContext{ _transitionContext = transitionContext; _containerView = [transitionContext containerView]; _from = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey]; _to = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey]; if([transitionContext respondsToSelector:@selector(viewForKey:)]){ _fromView = [transitionContext viewForKey:UITransitionContextFromViewKey]; _toView = [transitionContext viewForKey:UITransitionContextToViewKey]; }else{ _fromView = _from.view; _toView = _to.view; } if(self.animationType == animationTypePresent){ [self animationPresent]; }else if (self.animationType == animationTypeDismiss){ [self animationDismiss]; }else if (self.animationType == animationTypePop){ [self animationPop]; }else{ [self animationPush]; } }#pragma mark -optional//动画结束时回调- (void)animationEnded:(BOOL) transitionCompleted{ } - (void)animationPresent{ } - (void)animationDismiss{ } - (void)animationPop{ } - (void)animationPush{ } </uiviewcontrollercontexttransitioning> </uiviewcontrollercontexttransitioning>
然后创建子类PDAnimatorPUshPopTransition继承自PDAnimatorBaseTransition,实现- (void)animationPush,- (void)animationPop方法。
-
PDAnimatorPUshPopTransition.h
#import "PDAnimatorBaseTransition.h"#import <uikit uikit="" h=""> @interface PDAnimatorPUshPopTransition : PDAnimatorBaseTransition@property (nonatomic, assign)CGPoint itemCenter;@property (nonatomic, assign)CGSize itemSize;@property (nonatomic, strong)NSString *imageName;@end </uikit>
-
PDAnimatorPUshPopTransition.m
#import "PDAnimatorPUshPopTransition.h"@implementation PDAnimatorPUshPopTransition- (instancetype)init{ self = [super init]; if(self){ } return self; } - (NSTimeInterval)transitionDuration:(nullable id <uiviewcontrollercontexttransitioning> )transitionContext{ return 5.f; } - (void)animateTransition:(id <uiviewcontrollercontexttransitioning> )transitionContext{ [super animateTransition:transitionContext]; } - (void)animationPush{ NSTimeInterval duration = [self transitionDuration:self.transitionContext]; __weak typeof(self) weakSelf = self; self.containerView.backgroundColor = [UIColor lightGrayColor]; UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 160)]; imageView.image = [UIImage imageNamed:self.imageName]; imageView.center = _itemCenter; CGFloat initialScale = _itemSize.width / CGRectGetWidth(imageView.frame); CGAffineTransform transform = CGAffineTransformIdentity; transform = CGAffineTransformScale(transform, initialScale, initialScale); transform = CGAffineTransformRotate(transform, M_PI); imageView.layer.affineTransform = transform; // imageView.transform = CGAffineTransformMakeScale(initialScale, initialScale); [self.containerView addSubview:imageView]; self.toView.frame = [self.transitionContext finalFrameForViewController:self.to]; CGPoint finalCenter = self.toView.center; self.toView.center = finalCenter; self.toView.alpha = 0.0; //这一句一定要 [self.containerView addSubview:self.toView]; [UIView animateWithDuration:duration delay:0 usingSpringWithDamping:0.5 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{ imageView.layer.affineTransform = CGAffineTransformIdentity; imageView.center = finalCenter; self.fromView.alpha = 0.0; self.containerView.backgroundColor = [UIColor redColor]; } completion:^(BOOL finished){ [imageView removeFromSuperview]; weakSelf.toView.alpha = 1.0f; weakSelf.fromView.alpha = 1.0f; [weakSelf.transitionContext completeTransition:![weakSelf.transitionContext transitionWasCancelled]]; }]; } - (void)animationPop{ NSTimeInterval duration = [self transitionDuration:self.transitionContext]; __weak typeof(self) weakSelf = self; self.toView.frame = [self.transitionContext finalFrameForViewController:self.to]; [self.containerView insertSubview:self.toView belowSubview:self.fromView]; self.fromView.alpha = 0.0; self.fromView.backgroundColor = [UIColor clearColor]; [UIView animateWithDuration:duration delay:0 usingSpringWithDamping:0.5 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{ CGFloat initialScale = _itemSize.width / 200; weakSelf.fromView.transform = CGAffineTransformMakeScale(initialScale, initialScale); weakSelf.fromView.center = weakSelf.itemCenter; weakSelf.toView.alpha = 1.0f; } completion:^(BOOL finished){ weakSelf.fromView.alpha = 0.0f; [weakSelf.transitionContext completeTransition:![weakSelf.transitionContext transitionWasCancelled]]; }]; }@end </uiviewcontrollercontexttransitioning> </uiviewcontrollercontexttransitioning>
然后我们在需要push的地方实现UINavigationControllerDelegate的协议方法:
- (nullable id <uiviewcontrolleranimatedtransitioning> )navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC NS_AVAILABLE_IOS(7_0){ PDAnimatorPUshPopTransition *animationTransition = [[PDAnimatorPUshPopTransition alloc] init]; if(operation == UINavigationControllerOperationPush){ animationTransition.animationType = animationTypePush; }else if (operation == UINavigationControllerOperationPop){ animationTransition.animationType = animationTypePop; } NSArray *indexPaths = [self.collectionView indexPathsForSelectedItems]; if (indexPaths.count == 0) { return nil; } NSIndexPath *selectedIndexPath = indexPaths[0]; UICollectionViewCell *cell = [self.collectionView cellForItemAtIndexPath:selectedIndexPath]; // 一定要加上convertPoint:toView:操作 animationTransition.itemCenter = [self.collectionView convertPoint:cell.center toView:self.view]; animationTransition.itemSize = cell.frame.size; animationTransition.imageName = [NSString stringWithFormat:@"%ld", (long)selectedIndexPath.item]; return animationTransition; } </uiviewcontrolleranimatedtransitioning>
2 UIViewControllerTransitioningDelegate+UIViewControllerAnimatedTransitioning
首先需要设置被present的Controller的transitionDelegate
DemoViewControllerTransitionPresentedViewController *presentedVC = [[DemoViewControllerTransitionPresentedViewController alloc] init]; presentedVC.transitionDelegate = self; [self presentViewController:presentedVC animated:YES completion:nil];
UIViewControllerTransitioningDelegate的代理的协议方法有:
// prenent - (id )animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source;// pop - (id )animationControllerForDismissedController:(UIViewController *)dismissed;// prenent - (id )interactionControllerForPresentation:(id )animator;// pop - (nullable id )interactionControllerForDismissal:(id )animator;
创建子类PDAnimationPresentTransitio继承自基类PDAnimatorBaseTransition,实现- (void)animationPresent,- (void)animationDismiss方法。
-
PDAnimationPresentTransition.h
#import "PDAnimatorBaseTransition.h"@interface PDAnimationPresentTransition : PDAnimatorBaseTransition@end
-
PDAnimationPresentTransition.m
#import "PDAnimationPresentTransition.h"@implementation PDAnimationPresentTransition- (NSTimeInterval)transitionDuration:(nullable id <uiviewcontrollercontexttransitioning> )transitionContext{ return 1.f; } - (void)animateTransition:(id <uiviewcontrollercontexttransitioning> )transitionContext{ [super animateTransition:transitionContext]; } - (void)animationPresent{ NSTimeInterval duration = [self transitionDuration:self.transitionContext]; __weak typeof(self) weakSelf = self; self.toView.frame = [self.transitionContext initialFrameForViewController:self.to]; self.fromView.frame = [self.transitionContext initialFrameForViewController:self.from]; CGAffineTransform transform = CGAffineTransformIdentity; transform = CGAffineTransformScale(transform, 0.001, 0.001); self.toView.layer.affineTransform = transform; [self.containerView addSubview:self.toView]; self.toView.alpha = 0.0; [UIView animateWithDuration:duration delay:0 usingSpringWithDamping:0.6 initialSpringVelocity:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{ self.toView.layer.affineTransform = CGAffineTransformIdentity; self.toView.frame = [self.transitionContext finalFrameForViewController:self.to]; self.toView.alpha = 1.0; } completion:^(BOOL finished){ BOOL wasCancelled = [weakSelf.transitionContext transitionWasCancelled]; [weakSelf.transitionContext completeTransition:!wasCancelled]; }]; } </uiviewcontrollercontexttransitioning> </uiviewcontrollercontexttransitioning>
然后我们在需要present的地方实现UIViewControllerTransitioningDelegate的代理方法。
- (nullable id <uiviewcontrolleranimatedtransitioning> )animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source{ PDAnimationPresentTransition *animationTransition = [[PDAnimationPresentTransition alloc] init]; animationTransition.animationType = animationTypePresent; return animationTransition; } - (nullable id <uiviewcontrolleranimatedtransitioning> )animationControllerForDismissedController:(UIViewController *)dismissed{ PDAnimationPresentTransition *animationTransition = [[PDAnimationPresentTransition alloc] init]; animationTransition.animationType = animationTypePresent; return animationTransition; } </uiviewcontrolleranimatedtransitioning> </uiviewcontrolleranimatedtransitioning>
以上所述就是小编给大家介绍的《iOS转场动画的三种方式》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- iOS-转场动画
- iOS 自定义转场动画
- TransitionAnimation自定义转场动画
- iOS 自定义转场动画
- iOS抖音的转场动画
- LearningAVFoundation之视频合成+转场过渡动画
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
父与子的编程之旅
桑德 (Warren Sande)、桑德 (Carter Sande) / 苏金国、易郑超 / 人民邮电出版社 / 2014-10-1 / CNY 69.00
本书是一本家长与孩子共同学习编程的入门书。作者是一对父子,他们以Python语言为例,详尽细致地介绍了Python如何安装、字符串和操作符等程序设计的基本概念,介绍了条件语句、函数、模块等进阶内容,最后讲解了用Python实现游戏编程。书中的语言生动活泼,叙述简单明了。 为了让学习者觉得编程有趣,本书编排了很多卡通人物及场景对话,让学习者在轻松愉快之中跨入计算机编程的大门。 第 2 版新增内......一起来看看 《父与子的编程之旅》 这本书的介绍吧!