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

 更新时间:2017年10月26日 10:16:21   作者:Mazy_ma  
这篇文章主要给大家介绍了关于iOS中利用UIBezierPath + CAAnimation实现心跳动画效果的相关资料,文中通过示例代码介绍的非常详细,对大家的日常开发具有一定的参考学习,需要的朋友们下面随着小编来一起学习学习吧。

前言

最近在开发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"];

总结

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

相关文章

  • iOS中TableView如何统一数据源代理详解

    iOS中TableView如何统一数据源代理详解

    这篇文章主要给大家介绍了关于iOS中TableView如何统一数据源代理的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧
    2018-07-07
  • iOS中只让textField使用键盘通知的实例代码

    iOS中只让textField使用键盘通知的实例代码

    本文通过实例代码给大家介绍了OS中只让textField使用键盘通知的操作方法,代码简单易懂,非常不错,具有参考借鉴加载,需要的的朋友参考下吧
    2017-07-07
  • iOS 多选删除功能附tableViewTips及单选删除

    iOS 多选删除功能附tableViewTips及单选删除

    这次分享并记录一下tableView的多选删除,并额外记录一下单选删除及tableView的设置小技巧。代码简单易懂,需要的朋友参考下吧
    2017-05-05
  • iOS中捕获日志与异常示例详解

    iOS中捕获日志与异常示例详解

    在日常的工作中,日志是不可缺少的一个环节,下面这篇文章主要给大家介绍了iOS中捕获日志与异常的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-04-04
  • ios 贝塞尔曲线切割圆角的方法

    ios 贝塞尔曲线切割圆角的方法

    本篇文章主要介绍了ios 贝塞尔曲线切割圆角的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • iOS App开发中UISearchBar搜索栏组件的基本用法整理

    iOS App开发中UISearchBar搜索栏组件的基本用法整理

    iOS开发组件中自带的UISearchBar提供了很多基础和好用的搜索栏UI功能,下面就来总结一下iOS App开发中UISearchBar搜索栏组件的基本用法整理,需要的朋友可以参考下
    2016-05-05
  • 查看iOS Crash logs的方法

    查看iOS Crash logs的方法

    发布了一个应用,用户使用 的时候crash了,现在想调查为何crash,所以想在这里探讨一下如何查看iphone 手机的crash logs
    2015-06-06
  • iOS中常见正则表达式验证方法

    iOS中常见正则表达式验证方法

    本篇文章主要介绍了iOS中常见正则表达式验证方法,主要包括有身份证、手机号、军官证,有兴趣的可以了解一下。
    2017-06-06
  • iOS自带动画效果的实例代码

    iOS自带动画效果的实例代码

    本文给大家分享ios自带动画效果的实现代码,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2016-12-12
  • Xcode 升级导致插件失效的解决办法

    Xcode 升级导致插件失效的解决办法

    这篇文章主要介绍了Xcode 升级导致插件失效的解决办法的相关资料,需要的朋友可以参考下
    2016-10-10

最新评论