前言
最近在开发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