用过格瓦拉电影，或者其他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差不多，这里就不说了。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。