iOS转场动画（ios自定义转场动画）

用过格瓦拉电影，或者其他app可能都知道，一种点击按钮用放大效果实现转场的动画现在很流行，效果大致如下

iOS转场动画（ios自定义转场动画）

自定义转场动画

首先就要声明一个遵守uiviewcontrolleranimatedtransitioning协议的类.

然后实现协议中的两个函数

1 2 3 4 5 // 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；还有一个参数表示转场时间

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 #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中的

1 2 3 4 5 6 7 8 9 - (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委托给视图控制器

1	`self.navigationcontroller.delegate = self;`

再来看看uiviewcontrolleranimatedtransitioning这个协议，返回时间的方法就不介绍了。重点在

1 2 3 4 5 6 7 8 - (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分类关联一个对象，用来记录控件（非拥有关系）。

1 2 3 4 5 6 7 8 9 #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镜像：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 //产生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; }

现在就可以制作移动的动画：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 //起始位置 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可以根据路径来显示区域，那么我们可以以第一个界面的视图先看看效果。

1 2 3 4 5 6 7 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的路径，显示的区域就为两个路径之间的区域。

iOS转场动画（ios自定义转场动画）

然后再把代码中的radius大小设为200

iOS转场动画（ios自定义转场动画）

现在，我们创建一个cabasicanimation对象去完成扩散的动画，起始位置是半径为10的圆，终点位置是半径为200的圆.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 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"];

iOS转场动画（ios自定义转场动画）

现在就可以完成push的转场效果了。注意圆圈白色部分显示的是collectionview底部的self.view的视图。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 //加入收合动画 - (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"]; }