iOS實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫的3種方法示例
更新時(shí)間：2019年03月06日 11:24:36 作者：雪山飛狐_91ae
這篇文章主要給大家介紹了關(guān)于iOS實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫的3種方法，文中通過(guò)示例代碼以及圖文介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
什么是轉(zhuǎn)場(chǎng)動(dòng)畫
在 NavigationController 里 push 或 pop 一個(gè) View Controller，在 TabBarController 中切換到其他 View Controller，以 Modal 方式顯示另外一個(gè) View Controller，這些都是 View Controller Transition。在 storyboard 里，每個(gè) View Controller 是一個(gè) Scene，View Controller Transition 便是從一個(gè) Scene 轉(zhuǎn)換到另外一個(gè) Scene, 中文稱呼其為「轉(zhuǎn)場(chǎng)」。 顧名思義，轉(zhuǎn)場(chǎng)動(dòng)畫便是 View Controller Transition 過(guò)程中的動(dòng)畫效果。
在 iOS 7 之前，我們只能使用系統(tǒng)提供的轉(zhuǎn)場(chǎng)效果，大部分時(shí)候夠用，但僅僅是夠用而已，總歸會(huì)有各種不如意的小地方，但我們卻無(wú)力改變；iOS 7 開放了相關(guān) API 允許我們對(duì)轉(zhuǎn)場(chǎng)效果進(jìn)行全面定制，這太棒了，自定義轉(zhuǎn)場(chǎng)動(dòng)畫以及對(duì)交互手段的支持帶來(lái)了無(wú)限可能。
本文主要給大家介紹了關(guān)于iOS實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫的3種方法，分享出來(lái)供大家參考學(xué)習(xí)，下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧
1.CATransition
CATransition是CAAnimation的子類，用于過(guò)渡動(dòng)畫或轉(zhuǎn)場(chǎng)動(dòng)畫。為視圖層移入移除屏幕提供轉(zhuǎn)場(chǎng)動(dòng)畫。首先來(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)畫 [self.view.window.layer addAnimation:animation forKey:@"kTransitionAnimation"]; AViewController *vc = [[AViewController alloc] init]; [self presentViewController:vc animated:NO completion:nil];
將該動(dòng)畫添加到window.layer上，則會(huì)present或push時(shí)使用指定的轉(zhuǎn)場(chǎng)動(dòng)畫。
其中最主要的兩個(gè)屬性就是type和subtype。
- type：轉(zhuǎn)場(chǎng)動(dòng)畫的類型。
官方SDK只提供了四種轉(zhuǎn)場(chǎng)動(dòng)畫的類型，即:
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)畫類型的方向
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)畫。
既然講到這里了，就看一下把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)畫
[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)畫是用在當(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)畫中，要指定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)畫持續(xù)時(shí)間 - (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext; //轉(zhuǎn)場(chǎng)動(dòng)畫實(shí)現(xiàn)細(xì)節(jié) - (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext; 動(dòng)畫結(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)畫結(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;
}
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
您可能感興趣的文章:
- iOS實(shí)現(xiàn)抖音點(diǎn)贊動(dòng)畫效果
- iOS實(shí)現(xiàn)點(diǎn)贊動(dòng)畫特效
- iOS仿AirPods彈出動(dòng)畫
- iOS自定義轉(zhuǎn)場(chǎng)動(dòng)畫的幾種情況
- iOS自定義UIButton點(diǎn)擊動(dòng)畫特效
- iOS基于CATransition實(shí)現(xiàn)翻頁(yè)、旋轉(zhuǎn)等動(dòng)畫效果
- iOS實(shí)現(xiàn)數(shù)字倍數(shù)動(dòng)畫效果
- iOS如何優(yōu)雅地實(shí)現(xiàn)序列動(dòng)畫詳解
- iOS仿抖音視頻加載動(dòng)畫效果的實(shí)現(xiàn)方法
- iOS仿微博導(dǎo)航欄動(dòng)畫(CoreGraphics)的實(shí)現(xiàn)方法
- 詳解 iOS 系統(tǒng)中的視圖動(dòng)畫
相關(guān)文章
iOS中震動(dòng)反饋（UIFeedbackGenerator）與系統(tǒng)震動(dòng)詳解
最近要做一個(gè)項(xiàng)目,需要持續(xù)響鈴并振動(dòng)，所以就有了這篇文章，下面這篇文章主要給大家介紹了關(guān)于iOS中震動(dòng)反饋（UIFeedbackGenerator）與系統(tǒng)震動(dòng)的相關(guān)資料，需要的朋友可以參考下2018-08-08
iOS開發(fā)之隨機(jī)生成兩圓之間的標(biāo)準(zhǔn)圓
這篇文章主要給大家介紹了iOS如何實(shí)現(xiàn)在兩圓之間隨機(jī)生成標(biāo)準(zhǔn)圓的方法，實(shí)現(xiàn)的效果類似尋找附近人或者附近商家的動(dòng)態(tài)效果，有需要的朋友可以參考借鑒，下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-01-01
下面小編就為大家?guī)?lái)一篇safari cookie設(shè)置中文失敗的解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
實(shí)例講解iOS應(yīng)用UI開發(fā)之基礎(chǔ)動(dòng)畫的創(chuàng)建
這篇文章主要介紹了iOS應(yīng)用UI開發(fā)之基礎(chǔ)動(dòng)畫的創(chuàng)建,以關(guān)鍵幀動(dòng)畫作為重要知識(shí)點(diǎn)進(jìn)行講解,需要的朋友可以參考下2015-11-11
iOS實(shí)現(xiàn)文件切片儲(chǔ)存并且上傳（仿斷點(diǎn)續(xù)傳機(jī)制）
這篇文章主要給大家介紹了關(guān)于iOS實(shí)現(xiàn)文件切片儲(chǔ)存并上傳仿斷點(diǎn)續(xù)傳機(jī)制的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
這篇文章主要給大家介紹了關(guān)于iOS與Unity交互筆記之參數(shù)傳遞的相關(guān)資料,需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細(xì)介紹了iOS引導(dǎo)頁(yè)的制作方法，可滿足一般設(shè)計(jì)的需求，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
iOS之?dāng)?shù)據(jù)解析之XML解析詳解
本篇文章主要介紹了iOS之?dāng)?shù)據(jù)解析之XML解析詳解，XML解析常見的兩種方式:DOM解析和SAX解析，有興趣的可以了解一下。2016-12-12
本文給大家分享的是一個(gè)IOS開發(fā)中實(shí)現(xiàn)錄音功能的實(shí)例，并簡(jiǎn)單給大家解析一下，有需要的小伙伴可以參考下2016-03-03
這篇文章主要介紹了微信支付開發(fā)IOS案例的相關(guān)資料,需要的朋友可以參考下2016-04-04