iOS實現(xiàn)類似格瓦拉電影的轉(zhuǎn)場動畫

更新時間：2016年11月01日 08:54:34 作者：簡單即復雜

這篇文章主要給大家介紹了利用iOS如何實現(xiàn)類似格瓦拉電影的轉(zhuǎn)場動畫，文中給出了詳細步驟實現(xiàn)代碼，對大家的學習和理解很有幫助，有需要的朋友們可以參考借鑒，下面來一起看看吧。

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

自定義轉(zhuǎn)場動畫

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

然后實現(xiàn)協(xié)議中的兩個函數(shù)

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

push和pop都在animateTransition:里面實現(xiàn)，所以需要一個參數(shù)表示是push還是pop；還有一個參數(shù)表示轉(zhuǎn)場時間

#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;
 }

}

當然，要調(diào)用這個方法還得先把UINavigationControllerDelegate委托給視圖控制器

self.navigationController.delegate = self;

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

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

如上注釋，我們可以通過參數(shù)transitionContext獲取到起始和目標控制。并在containView這個視圖實現(xiàn)我們想要實現(xiàn)的動畫。

接下來就是轉(zhuǎn)場動畫的實現(xiàn)了,push動畫的流程大概就是:點擊第一個頁面的一個控件，模擬出控件然后移動到第二個界面同一個樣式控件的位置，之后再把第二個界面以控件的位置中心擴散顯示出來。

那么現(xiàn)在我們就在協(xié)議方法中通過fromVC獲取到第一個視圖的控件，并制造一個鏡像視圖移動到toVC的目標控件的位置。在這里，我調(diào)用了UIViewcontroller分類關(guān)聯(lián)一個對象，用來記錄控件（非擁有關(guān)系）。

#import <UIKit/UIKit.h>
#import <Foundation/Foundation.h>

@interface UIViewController (SFTrainsitionExtension)

@property (assign, nonatomic) CGFloat sf_targetHeight;//灰白背景的分割線高度
@property (weak , nonatomic) UIView *sf_targetView;

@end

產(chǎn)生targetView鏡像：

//產(chǎn)生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;
}

現(xiàn)在就可以制作移動的動畫：

//起始位置
 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來實現(xiàn)。UIBezierPath表示路徑，CAShapeLayer可以根據(jù)路徑來顯示區(qū)域，那么我們可以以第一個界面的視圖先看看效果。

 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的路徑，顯示的區(qū)域就為兩個路徑之間的區(qū)域。

然后再把代碼中的radius大小設(shè)為200

現(xiàn)在，我們創(chuàng)建一個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"];

現(xiàn)在就可以完成push的轉(zhuǎn)場效果了。注意圓圈白色部分顯示的是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差不多，這里就不說了。

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

您可能感興趣的文章: