1.CATransition
CATransition是CAAnimation的子類,用于過(guò)渡動(dòng)畫(huà)或轉(zhuǎn)場(chǎng)動(dòng)畫(huà)。為視圖層移入移除屏幕提供轉(zhuǎn)場(chǎng)動(dòng)畫(huà)。首先來(lái)看一下簡(jiǎn)單的Demo:
CATransition *animation = [CATransition animation];
animation.type = kCATransitionFade;
animation.subtype = kCATransitionFromRight;
animation.duration = 1.0;
// 在window上執(zhí)行CATransition, 即可在ViewController轉(zhuǎn)場(chǎng)時(shí)執(zhí)行動(dòng)畫(huà)
[self.view.window.layer addAnimation:animation forKey:@"kTransitionAnimation"];
AViewController *vc = [[AViewController alloc] init];
[self presentViewController:vc animated:NO completion:nil];
將該動(dòng)畫(huà)添加到window.layer上,則會(huì)present或push時(shí)使用指定的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)。
其中最主要的兩個(gè)屬性就是type和subtype。
- type:轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的類型。
官方SDK只提供了四種轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的類型,即:
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:動(dòng)畫(huà)類型的方向
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時(shí)使用指定的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)。
既然講到這里了,就看一下把transition加在layer上。
看一下示例代碼:
- (void)viewDidLoad {
[super viewDidLoad];
UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(100, 100, 100, 50)];
[button setTitle:@"進(jìn)入" 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:@"點(diǎn)贊他人1"],[UIImage imageNamed:@"偷師學(xué)藝1"],[UIImage imageNamed:@"學(xué)會(huì)欣賞3"]];
_imageView.image = [UIImage imageNamed:@"成果秀1"];
}
- (void)buttonClicked{
CATransition *animation = [CATransition animation];
animation.type = @"cube";
animation.subtype = kCATransitionFromRight;
animation.duration = 1.0;
//換圖片的時(shí)候使用轉(zhuǎn)場(chǎng)動(dòng)畫(huà)
[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:這個(gè)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)是用在當(dāng)一個(gè)父視圖控制器中有幾個(gè)childViewController,當(dāng)要在這幾個(gè)子視圖控制器之間切換時(shí)就可以用這個(gè)方法。
AViewController *a = self.childViewControllers[0];
BViewController *b = self.childViewControllers[1];
CViewController *c = self.childViewControllers[2];
// Curl 翻頁(yè)效果
// UIViewAnimationOptionTransitionCurlUp, UIViewAnimationOptionTransitionCurlDown
// Flip 翻轉(zhuǎn)效果
// 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的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)中,要指定UINavigationControllerDelegate對(duì)象:
self.navigationController.delegate = self;
[self.navigationController pushViewController:itemVC animated:YES];
UINavigationControllerDelegate主要有以下兩個(gè)協(xié)議方法:
//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);
首先創(chuàng)建一個(gè)基類PDAnimatorBaseTransition實(shí)現(xiàn)UIViewControllerAnimatedTransitioning協(xié)議的方法。
UIViewControllerAnimatedTransitioning協(xié)議的方法有:
//動(dòng)畫(huà)持續(xù)時(shí)間
- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext;
//轉(zhuǎn)場(chǎng)動(dòng)畫(huà)實(shí)現(xiàn)細(xì)節(jié)
- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext;
動(dòng)畫(huà)結(jié)束時(shí)調(diào)用
- (void)animationEnded:(BOOL) transitionCompleted;
- 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
- 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
//動(dòng)畫(huà)結(jié)束時(shí)回調(diào)
- (void)animationEnded:(BOOL) transitionCompleted{
}
- (void)animationPresent{
}
- (void)animationDismiss{
}
- (void)animationPop{
}
- (void)animationPush{
}
然后創(chuàng)建子類PDAnimatorPUshPopTransition繼承自PDAnimatorBaseTransition,實(shí)現(xiàn)- (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
- 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
然后我們?cè)谛枰猵ush的地方實(shí)現(xiàn)UINavigationControllerDelegate的協(xié)議方法:
- (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;
}
2 UIViewControllerTransitioningDelegate+UIViewControllerAnimatedTransitioning
首先需要設(shè)置被present的Controller的transitionDelegate
DemoViewControllerTransitionPresentedViewController *presentedVC = [[DemoViewControllerTransitionPresentedViewController alloc] init];
presentedVC.transitionDelegate = self;
[self presentViewController:presentedVC animated:YES completion:nil];
UIViewControllerTransitioningDelegate的代理的協(xié)議方法有:
// 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;
創(chuàng)建子類PDAnimationPresentTransitio繼承自基類PDAnimatorBaseTransition,實(shí)現(xiàn)- (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];
}];
}
然后我們?cè)谛枰猵resent的地方實(shí)現(xiàn)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;
}