iOS實作類別似格瓦拉電影的轉場動畫_IOS

用過格瓦拉電影，或者其他app可能都知道，一種點擊按鈕用放大效果實現轉場的動畫現在很流行，效果大致如下

自訂轉場動畫

首先就要聲明一個遵守UIViewControllerAnimatedTransitioning協議的類.

然後實現協議中的兩個函數

// This is used for percent driven interactive transitions, as well as for container controllers that have companion animations that might need to// 返迴轉場時間- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext;// 轉場的動作- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext;

push和pop都在animateTransition:裡面實現，所以需要一個參數表示是push還是pop；還有一個參數表示轉場時間

#import <UIKit/UIKit.h>#import <Foundation/Foundation.h>typedef enum : NSUInteger { animate_push = 0, animate_pop = 1,} Animate_Type;@interface SFTrainsitionAnimate : NSObject<UIViewControllerAnimatedTransitioning>- (instancetype)initWithAnimateType:(Animate_Type)type andDuration:(CGFloat)dura;@property (assign, nonatomic) CGFloat duration;@property (assign, nonatomic) Animate_Type type;@end

那麼要如何使用建立的對象呢？可以通過UINavigationControllerDelegate中的

- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC{ if (operation == UINavigationControllerOperationPush) { self.animate = [[SFTrainsitionAnimate alloc] init]; return self.animate; }else{ return nil; }}

當然，要調用這個方法還得先把UINavigationControllerDelegate委託給視圖控制器

self.navigationController.delegate = self;

再來看看UIViewControllerAnimatedTransitioning這個協議，返回時間的方法就不介紹了。重點在

- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext{ //起始視圖控制器 UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey]; //目標視圖控制器 UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey]; //在這個視圖上實現跳轉動畫 UIView *containView = [transitionContext containerView];}

如上注釋，我們可以通過參數transitionContext擷取到起始和目標控制。並在containView這個視圖實現我們想要實現的動畫。

接下來就是轉場動畫的實現了,push動畫的流程大概就是:點擊第一個頁面的一個控制項，類比出控制項然後移動到第二個介面同一個樣式控制項的位置，之後再把第二個介面以控制項的位置中心擴散顯示出來。

那麼現在我們就在協議方法中通過fromVC擷取到第一個視圖的控制項，並製造一個鏡像視圖移動到toVC的目標控制項的位置。在這裡，我調用了UIViewcontroller分類關聯一個對象，用來記錄控制項（非擁有關係）。

#import <UIKit/UIKit.h>#import <Foundation/Foundation.h>@interface UIViewController (SFTrainsitionExtension)@property (assign, nonatomic) CGFloat sf_targetHeight;//灰白背景的分割線高度@property (weak , nonatomic) UIView *sf_targetView;@end

產生targetView鏡像：

//產生targetView鏡像- (UIView *)customSnapshoFromView:(UIView *)inputView { // Make an image from the input view. UIGraphicsBeginImageContextWithOptions(inputView.bounds.size, NO, 0); [inputView.layer renderInContext:UIGraphicsGetCurrentContext()]; UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); // Create an image view. UIView *snapshot = [[UIImageView alloc] initWithImage:image]; snapshot.layer.masksToBounds = NO; snapshot.layer.cornerRadius = 0.0; snapshot.layer.shadowOffset = CGSizeMake(0.0, 0.0); snapshot.layer.shadowRadius = 5.0; snapshot.layer.shadowOpacity = 0.4; return snapshot;}

現在就可以製作移動的動畫：

//起始位置 CGRect originFrame = [fromVC.sf_targetView convertRect:fromVC.sf_targetView.bounds toView:fromVC.view]; //動畫移動的視圖鏡像 UIView *customView = [self customSnapshoFromView:fromVC.sf_targetView]; customView.frame = originFrame; //移動的目標位置 CGRect finishFrame = [toVC.sf_targetView convertRect:toVC.sf_targetView.bounds toView:toVC.view]; UIView *containView = [transitionContext containerView]; //背景視圖 灰色高度 CGFloat height = CGRectGetMidY(finishFrame); toVC.sf_targetHeight = height; //背景視圖 灰色 UIView *backgray = [[UIView alloc] initWithFrame:CGRectMake(0, 0, k_SF_SCREEN_WIDTH, k_SF_SCREEN_HIGHT)]; backgray.backgroundColor = [UIColor lightGrayColor]; //背景視圖 白色 UIView *backwhite = [[UIView alloc] initWithFrame:CGRectMake(0, height, k_SF_SCREEN_HIGHT, k_SF_SCREEN_HIGHT-height)]; backwhite.backgroundColor = [UIColor whiteColor]; toVC.view.frame = [transitionContext finalFrameForViewController:toVC]; //注意添加順序 [containView addSubview:toVC.view]; [containView addSubview:backgray]; [backgray addSubview:backwhite]; [containView addSubview:customView]; //動畫 [UIView animateWithDuration:_duration/3 animations:^{ customView.frame = finishFrame; customView.transform = CGAffineTransformMakeScale(1.1, 1.1); } completion:^(BOOL finished) { if (finished) {  [UIView animateWithDuration:_duration/3 animations:^{  customView.transform = CGAffineTransformIdentity;  } completion:^(BOOL finished) {  if (finished) {   [UIView animateWithDuration:_duration/3 animations:^{   customView.alpha = 0.0;   } completion:^(BOOL finished) {   if (finished) {    [backgray removeFromSuperview];    [customView removeFromSuperview];    [transitionContext completeTransition:YES];   }   }];   [self addPathAnimateWithView:backgray fromPoint:customView.center];  }  }];

移動完之後，要以圓形擴散顯示出push之後的介面。就可以通過UIBezierPath和CAShapeLayer來實現。UIBezierPath表示路徑，CAShapeLayer可以根據路徑來顯示地區，那麼我們可以以第一個介面的視圖先看看效果。

 UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.collectionView.bounds]; [path appendPath:[UIBezierPath bezierPathWithArcCenter:self.collectionView.center radius:50 startAngle:0 endAngle:2*M_PI clockwise:NO]]; CAShapeLayer *layer = [CAShapeLayer layer]; layer.path = path.CGPath; self.collectionView.layer.mask = layer;

初始化path路徑以collectionView的四邊畫一個路徑，然後加入一個以collectionView的中心為圓點，半徑為50的路徑，顯示的地區就為兩個路徑之間的地區。

然後再把代碼中的radius大小設為200

現在，我們建立一個CABasicAnimation對象去完成擴散的動畫，起始位置是半徑為10的圓，終點位置是半徑為200的圓.

 UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.collectionView.bounds]; [path appendPath:[UIBezierPath bezierPathWithArcCenter:self.collectionView.center radius:10 startAngle:0 endAngle:2*M_PI clockwise:NO]]; UIBezierPath *path2 = [UIBezierPath bezierPathWithRect:self.collectionView.bounds]; [path2 appendPath:[UIBezierPath bezierPathWithArcCenter:self.collectionView.center radius:200 startAngle:0 endAngle:2*M_PI clockwise:NO]]; CAShapeLayer *layer = [CAShapeLayer layer]; self.collectionView.layer.mask = layer; CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"]; pathAnimation.fromValue = (__bridge id)path.CGPath; pathAnimation.toValue = (__bridge id)path2.CGPath; pathAnimation.duration = 1.0; pathAnimation.repeatCount = 1; pathAnimation.removedOnCompletion = NO; pathAnimation.fillMode = kCAFillModeForwards; pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]; [layer addAnimation:pathAnimation forKey:@"pathAnimate"];

現在就可以完成push的 轉場效果了。注意圓圈白色部分顯示的是collectionView底部的self.view的視圖。

//加入收合動畫- (void)addPathAnimateWithView:(UIView *)toView fromPoint:(CGPoint)point{ //create path UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, k_SF_SCREEN_WIDTH, k_SF_SCREEN_HIGHT)]; //create path [path appendPath:[UIBezierPath bezierPathWithArcCenter:point radius:0.1 startAngle:0 endAngle:2*M_PI clockwise:NO]]; CGFloat radius = point.y > 0?k_SF_SCREEN_HIGHT*3/4: k_SF_SCREEN_HIGHT*3/4-point.y; UIBezierPath *path2 = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, k_SF_SCREEN_WIDTH, k_SF_SCREEN_HIGHT)]; [path2 appendPath:[UIBezierPath bezierPathWithArcCenter:point radius:radius startAngle:0 endAngle:2*M_PI clockwise:NO]]; CAShapeLayer *shapeLayer = [CAShapeLayer layer]; //shapeLayer.path = path.CGPath; toView.layer.mask = shapeLayer; CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"]; pathAnimation.fromValue = _type == animate_push? (__bridge id)path.CGPath:(__bridge id)path2.CGPath; pathAnimation.toValue = _type == animate_push? (__bridge id)path2.CGPath:(__bridge id)path.CGPath; pathAnimation.duration = _duration/3; pathAnimation.repeatCount = 1; pathAnimation.removedOnCompletion = NO; pathAnimation.fillMode = kCAFillModeForwards; pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]; [shapeLayer addAnimation:pathAnimation forKey:@"pathAnimate"];}

pop動畫其實和push差不多，這裡就不說了。

好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的協助，如果有疑問大家可以留言交流。