iOS中怎么實現(xiàn)一個轉(zhuǎn)場動畫-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)iOS中怎么實現(xiàn)一個轉(zhuǎn)場動畫，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

成都創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的孟村網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

1.CATransition

CATransition是CAAnimation的子類，用于過渡動畫或轉(zhuǎn)場動畫。為視圖層移入移除屏幕提供轉(zhuǎn)場動畫。首先來看一下簡單的Demo：

CATransition *animation = [CATransition animation]; animation.type = kCATransitionFade; animation.subtype = kCATransitionFromRight; animation.duration = 1.0; // 在window上執(zhí)行CATransition, 即可在ViewController轉(zhuǎn)場時執(zhí)行動畫 [self.view.window.layer addAnimation:animation forKey:@"kTransitionAnimation"]; AViewController *vc = [[AViewController alloc] init]; [self presentViewController:vc animated:NO completion:nil];

將該動畫添加到window.layer上，則會present或push時使用指定的轉(zhuǎn)場動畫。

其中最主要的兩個屬性就是type和subtype。

type：轉(zhuǎn)場動畫的類型。

官方SDK只提供了四種轉(zhuǎn)場動畫的類型，即:

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時使用指定的轉(zhuǎn)場動畫。

既然講到這里了，就看一下把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:@"偷師學(xué)藝1"],[UIImage imageNamed:@"學(xué)會欣賞3"]]; _imageView.image = [UIImage imageNamed:@"成果秀1"];}- (void)buttonClicked{ CATransition *animation = [CATransition animation]; animation.type = @"cube"; animation.subtype = kCATransitionFromRight; animation.duration = 1.0; //換圖片的時候使用轉(zhuǎn)場動畫 [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:這個轉(zhuǎn)場動畫是用在當(dāng)一個父視圖控制器中有幾個childViewController，當(dāng)要在這幾個子視圖控制器之間切換時就可以用這個方法。

AViewController *a = self.childViewControllers[0];BViewController *b = self.childViewControllers[1];CViewController *c = self.childViewControllers[2];// Curl 翻頁效果// 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)場動畫中，要指定UINavigationControllerDelegate對象：

self.navigationController.delegate = self;[self.navigationController pushViewController:itemVC animated:YES];

UINavigationControllerDelegate主要有以下兩個協(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)建一個基類PDAnimatorBaseTransition實現(xiàn)UIViewControllerAnimatedTransitioning協(xié)議的方法。

UIViewControllerAnimatedTransitioning協(xié)議的方法有：

//動畫持續(xù)時間- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext;//轉(zhuǎn)場動畫實現(xiàn)細(xì)節(jié)- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext;動畫結(jié)束時調(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//動畫結(jié)束時回調(diào)- (void)animationEnded:(BOOL) transitionCompleted{}- (void)animationPresent{}- (void)animationDismiss{}- (void)animationPop{}- (void)animationPush{}

然后創(chuàng)建子類PDAnimatorPUshPopTransition繼承自PDAnimatorBaseTransition，實現(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

然后我們在需要push的地方實現(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，實現(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]; }];}

然后我們在需要present的地方實現(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;}

關(guān)于iOS中怎么實現(xiàn)一個轉(zhuǎn)場動畫就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

本文題目：iOS中怎么實現(xiàn)一個轉(zhuǎn)場動畫-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://muchs.cn/article46/ddhchg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、網(wǎng)站導(dǎo)航、App設(shè)計、網(wǎng)站收錄、定制網(wǎng)站、自適應(yīng)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容