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差不多，这里就不说了。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。