欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-12-20 11:46:28
前言 最近在开发ios项目空闲之余,决定练习下uibezierpath进行绘图和caanimation动画的使用,制作了一个心跳的动画,很简单的示例,下面话不多说了,来一...

前言

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

gif示例:

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

核心代码

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"];

总结

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

上一篇:

下一篇: