iOS實(shí)現(xiàn)類似格瓦拉電影的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)

更新時(shí)間：2016年11月01日 08:54:34 作者：簡(jiǎn)單即復(fù)雜

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

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

自定義轉(zhuǎn)場(chǎng)動(dòng)畫(huà)

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

然后實(shí)現(xiàn)協(xié)議中的兩個(gè)函數(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)場(chǎng)時(shí)間
- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext;
// 轉(zhuǎn)場(chǎng)的動(dòng)作
- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext;

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

#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

那么要如何使用新建的對(duì)象呢？可以通過(guò)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;
 }

}

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

self.navigationController.delegate = self;

再來(lái)看看UIViewControllerAnimatedTransitioning這個(gè)協(xié)議，返回時(shí)間的方法就不介紹了。重點(diǎn)在

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

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

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

那么現(xiàn)在我們就在協(xié)議方法中通過(guò)fromVC獲取到第一個(gè)視圖的控件，并制造一個(gè)鏡像視圖移動(dòng)到toVC的目標(biāo)控件的位置。在這里，我調(diào)用了UIViewcontroller分類關(guān)聯(lián)一個(gè)對(duì)象，用來(lái)記錄控件（非擁有關(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)在就可以制作移動(dòng)的動(dòng)畫(huà)：

//起始位置
 CGRect originFrame = [fromVC.sf_targetView convertRect:fromVC.sf_targetView.bounds toView:fromVC.view];
 //動(dòng)畫(huà)移動(dòng)的視圖鏡像
 UIView *customView = [self customSnapshoFromView:fromVC.sf_targetView];
 customView.frame = originFrame;

 //移動(dòng)的目標(biāo)位置
 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];

 //動(dòng)畫(huà)
 [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];

  }
  }];

移動(dòng)完之后，要以圓形擴(kuò)散顯示出push之后的界面。就可以通過(guò)UIBezierPath和CAShapeLayer來(lái)實(shí)現(xiàn)。UIBezierPath表示路徑，CAShapeLayer可以根據(jù)路徑來(lái)顯示區(qū)域，那么我們可以以第一個(gè)界面的視圖先看看效果。

 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的四邊畫(huà)一個(gè)路徑，然后加入一個(gè)以collectionView的中心為圓點(diǎn)，半徑為50的路徑，顯示的區(qū)域就為兩個(gè)路徑之間的區(qū)域。

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

現(xiàn)在，我們創(chuàng)建一個(gè)CABasicAnimation對(duì)象去完成擴(kuò)散的動(dòng)畫(huà)，起始位置是半徑為10的圓，終點(diǎn)位置是半徑為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)場(chǎng)效果了。注意圓圈白色部分顯示的是collectionView底部的self.view的視圖。

//加入收合動(dòng)畫(huà)
- (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動(dòng)畫(huà)其實(shí)和push差不多，這里就不說(shuō)了。

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

您可能感興趣的文章: