前言
最近在开发ios项目空闲之余，决定练习下uibezierpath进行绘图和caanimation动画的使用，制作了一个心跳的动画,很简单的示例，下面话不多说了，来一起看看详细的介绍：
gif示例:
核心代码
1-首先通过 drawrect 绘制心形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
26
27
28
29
30
31
32
33
34
35
36
37
38
|
- (void)drawrect:(cgrect)rect { // 间距 cgfloat padding = 4.0; // 半径(小圆半径) cgfloat curveradius = (rect.size.width - 2 * padding)/4.0; // 贝塞尔曲线 uibezierpath *heartpath = [uibezierpath bezierpath]; // 起点(圆的第一个点) cgpoint tiplocation = cgpointmake(rect.size.width/2, rect.size.height-padding); // 从起点开始画 [heartpath movetopoint:tiplocation]; // (左圆的第二个点) cgpoint topleftcurvestart = cgpointmake(padding, rect.size.height/2.4); // 添加二次曲线 [heartpath addquadcurvetopoint:topleftcurvestart controlpoint:cgpointmake(topleftcurvestart.x, topleftcurvestart.y + curveradius)]; // 画圆 [heartpath addarcwithcenter:cgpointmake(topleftcurvestart.x+curveradius, topleftcurvestart.y) radius:curveradius startangle:m_pi endangle:0 clockwise:yes]; // (左圆的第二个点) cgpoint toprightcurvestart = cgpointmake(topleftcurvestart.x + 2*curveradius, topleftcurvestart.y); // 画圆 [heartpath addarcwithcenter:cgpointmake(toprightcurvestart.x+curveradius, toprightcurvestart.y) radius:curveradius startangle:m_pi endangle:0 clockwise:yes]; // 右上角控制点 cgpoint toprightcurveend = cgpointmake(topleftcurvestart.x + 4*curveradius, toprightcurvestart.y); // 添加二次曲线 [heartpath addquadcurvetopoint:tiplocation controlpoint:cgpointmake(toprightcurveend.x, toprightcurveend.y+curveradius)]; // 设置填充色 [[uicolor redcolor] setfill]; // 填充 [heartpath fill]; // 设置边线 heartpath.linewidth = 2; heartpath.linecapstyle = kcglinecapround; heartpath.linejoinstyle = kcglinejoinround; // 设置描边色 [[uicolor yellowcolor] setstroke]; [heartpath stroke];} |
2-添加心形view到主视图
|
1
2
3
|
xmheartview *heartview = [[xmheartview alloc] init];heartview.frame = cgrectmake(100, 50, 200, 200);[self.view addsubview:heartview]; |
3-给心形view添加心跳动画
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// 给心视图添加心跳动画 float bigsize = 1.1; cabasicanimation *pulseanimation = [cabasicanimation animationwithkeypath:@"transform.scale"]; pulseanimation.duration = 0.5; pulseanimation.tovalue = [nsnumber numberwithfloat:bigsize]; pulseanimation.timingfunction = [camediatimingfunction functionwithname:kcamediatimingfunctioneaseineaseout]; // 倒转动画 pulseanimation.autoreverses = yes; // 设置重复次数为无限大 pulseanimation.repeatcount = flt_max; // 添加动画到layer [heartview.layer addanimation:pulseanimation forkey:@"transform.scale"]; |
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对服务器之家的支持。
原文链接：http://blog.csdn.net/mazy_ma/article/details/55213346
