当前位置： 移动技术网 > 移动技术>移动开发>IOS > iOS中利用UIBezierPath + CAAnimation实现心跳动画效果

iOS中利用UIBezierPath + CAAnimation实现心跳动画效果

2019年07月24日  | 移动技术网移动技术  | 我要评论

前言

最近在开发ios项目空闲之余，决定练习下uibezierpath进行绘图和caanimation动画的使用，制作了一个心跳的动画,很简单的示例，下面话不多说了，来一起看看详细的介绍：

gif示例:

核心代码

1-首先通过 drawrect 绘制心形view

- (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到主视图

 xmheartview *heartview = [[xmheartview alloc] init];
 heartview.frame = cgrectmake(100, 50, 200, 200);
 [self.view addsubview:heartview];

3-给心形view添加心跳动画

// 给心视图添加心跳动画
 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"];

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对移动技术网的支持。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网