先上完整的效果图：
接下去动画分步实现，首先先实现如下效果：
思路是这样的，在偏移值小于等于100的时候绘制一个矩形，当偏移值大于100的时候，底部直线变成曲线，主要是利用cashapelayer和uibezierpath来实现，代码如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
#pragma mark - uiscrollviewdelegate
-(void)scrollviewdidscroll:(uiscrollview *)scrollview {
cgfloat height = -scrollview.contentoffset.y;
uibezierpath *path = [uibezierpath bezierpath];
[path movetopoint:cgpointmake(0, 0)];
[path addlinetopoint:cgpointmake(self.view.width, 0)];
if (height <= 100) {
//偏移值小于等于100的时候，底部绘制直线
[path addlinetopoint:cgpointmake(self.view.width, height)];
[path addlinetopoint:cgpointmake(0, height)];
}else{
//偏移值大于100的时候，底部绘制曲线
[path addlinetopoint:cgpointmake(self.view.width, 100)];
[path addquadcurvetopoint:cgpointmake(0, 100) controlpoint:cgpointmake(self.view.center.x, height)];
}
[path closepath];
self.shapelayer.path = path.cgpath;
}
|
其次，实现绘制太阳，效果如下:
主要用到的是cashapelayer的path和strokeend属性，首先绘制一个太阳，代码如下:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
#pragma mark - private method
-(void)p_initcircle {
self.circlelayer.frame = cgrectmake(0, 0, self.view.width, 100);
self.circlelayer.fillcolor = nil;
self.circlelayer.strokecolor = [uicolor whitecolor].cgcolor;
self.circlelayer.linewidth = 2.0;
cgpoint center = cgpointmake(self.view.center.x, 50);
uibezierpath *path = [uibezierpath bezierpath];
[path movetopoint:cgpointmake(self.view.center.x, 35)];
[path addarcwithcenter:center radius:15 startangle:-m_pi_2 endangle:m_pi * 1.5 clockwise:yes];
cgfloat r1 = 17.0;
cgfloat r2 = 22.0;
for (int i = 0; i < 8 ; i++) {
cgpoint pointstart = cgpointmake(center.x + sin((m_pi * 2.0 / 8 * i)) * r1, center.y - cos((m_pi * 2.0 / 8 * i)) * r1);
cgpoint pointend = cgpointmake(center.x + sin((m_pi * 2.0 / 8 * i)) * r2, center.y - cos((m_pi * 2.0 / 8 * i)) * r2);
[path movetopoint:pointstart];
[path addlinetopoint:pointend];
}
self.circlelayer.path = path.cgpath;
}
|
其次在拖拽的过程中，利用strokeend属性逐步显示太阳，代码如下:
|
1
2
3
4
5
6
7
8
9
10
11
|
#pragma mark - uiscrollviewdelegate
-(void)scrollviewdidscroll:(uiscrollview *)scrollview {
cgfloat height = -scrollview.contentoffset.y;
if (height <= 100) {
//偏移值小于等于100的时候，绘制对应的路径
self.circlelayer.strokeend = height / 100.0;
}else{
//偏移值大于100的时候，绘制全路径
self.circlelayer.strokeend = 1.0;
}
}
|
其次，让绘制完的太阳随着拽动而旋转，效果图如下：
主要思想是在绘制完毕之后，通过affinetransform属性，让太阳图层旋转，代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
#pragma mark - uiscrollviewdelegate
-(void)scrollviewdidscroll:(uiscrollview *)scrollview {
cgfloat height = -scrollview.contentoffset.y;
[catransaction begin];
[catransaction setdisableactions:yes];
if (height <= 100) {
//偏移值小于等于100的时候，不旋转
self.circlelayer.affinetransform = cgaffinetransformidentity;
}else{
//偏移值小于等于100的时候，旋转
self.circlelayer.affinetransform = cgaffinetransformmakerotation(-(m_pi / 720 * height - 100));
}
[catransaction commit];
}
|
其中要注意的地方是需要禁止隐式动画，不然每次修改affinetransform都会自动带上隐式动画效果。
最后就是释放后，让tableview滚动到固定位置，然后让太阳持续旋转，屏蔽tableview的拖拽事件，主要用到的是cabaseanimation，代码如下
|
1
2
3
4
5
6
7
8
9
|
-(void)p_rise {
self.tableview.scrollenabled = no;
cabasicanimation *anim = [cabasicanimation animationwithkeypath:@"transform.rotation.z"];
anim.duration = 0.15;
anim.tovalue = @(m_pi / 4.0);
anim.repeatcount = maxfloat;
[self.circlelayer addanimation:anim forkey:nil];
}
|
最后在经过一定时间后，移除图层动画，取消屏蔽tableview的拖拽事件，并且让tableview滚动到顶部，代码如下：
|
1
2
3
4
5
|
-(void)p_stop {
self.tableview.scrollenabled = yes;
[self.tableview setcontentoffset:cgpointmake(0, 0) animated:yes];
[self.circlelayer removeallanimations];
}
|
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：http://www.jianshu.com/p/153f6af7871f?utm_source=tuicool&utm_medium=referral#