用过格瓦拉电影，或者其他app可能都知道，一种点击按钮用放大效果实现转场的动画现在很流行，效果大致如下
自定义转场动画
首先就要声明一个遵守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的路径，显示的区域就为两个路径之间的区域。
然后再把代码中的radius大小设为200
现在，我们创建一个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"]; |
现在就可以完成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"];} |
pop动画其实和push差不多，这里就不说了。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
