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

总结

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

赞 (0)

相关推荐

  • iOS使用UIBezierPath实现ProgressView

    iOS使用UIBezierPath实现ProgressView

    使用UIBezierPath实现ProgressView实现的效果如下: 界面采用UITableView和TabelViewCell的实现,红色的视图采用UIBezierPath绘制.注意红色的部分左上角,左下角是直角哟!!!!不多说<这里才是用UIBezierPath实现的真正愿意啦!!!

  • 快速上手IOS UIBezierPath（贝塞尔曲线）

    快速上手IOS UIBezierPath（贝塞尔曲线）

    UIBezierPath主要用来绘制矢量图形,它是基于Core Graphics对CGPathRef数据类型和path绘图属性的一个封装,所以是需要图形上下文的(CGContextRef),所以一般UIBezierPath在drawRect中使用. 使用方法 UIBezierPath 是对 CGPathRef 的封装.创建矢量图形时,拆解成一或多条线段,拼接起来,每条线段的终点都是下一条线段的起点. 具体地: 1.创建一个 UIBezierPath 对象 2.用 moveToPoint: 设置初

  • IOS 贝塞尔曲线（UIBezierPath）属性、方法整理

    IOS 贝塞尔曲线（UIBezierPath）属性、方法整理

    IOS 贝塞尔曲线详解         开发IOS的朋友都知道IOS 贝塞尔曲线的重要性,由于经常会用到这样的东西,索性抽时间就把相应所有的属性,方法做一个总结. UIBezierPath主要用来绘制矢量图形,它是基于Core Graphics对CGPathRef数据类型和path绘图属性的一个封装,所以是需要图形上下文的(CGContextRef),所以一般UIBezierPath在drawRect中使用. UIBezierPath的属性介绍: 1.CGPath:将UIBezierPath类转

  • iOS利用UIBezierPath + CAAnimation实现路径动画效果

    iOS利用UIBezierPath + CAAnimation实现路径动画效果

    前言 上次给大家介绍了iOS利用UIBezierPath + CAAnimation实现路径动画效果的相关内容,今天实现一个根据心跳路径实现一个路径动画,让某一视图沿着路径进行运动.. 效果图如下: 核心代码 1-首先通过 drawRect 绘制心形路径 - (void)drawRect:(CGRect)rect { // Drawing code // 初始化UIBezierPath UIBezierPath *path = [UIBezierPath bezierPath]; // 首先设置

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

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

    前言 最近在开发ios项目空闲之余,决定练习下UIBezierPath进行绘图和CAAnimation动画的使用,制作了一个心跳的动画,很简单的示例,下面话不多说了,来一起看看详细的介绍: GIF示例: 核心代码 1-首先通过 drawRect 绘制心形view - (void)drawRect:(CGRect)rect { // 间距 CGFloat padding = 4.0; // 半径(小圆半径) CGFloat curveRadius = (rect.size.width - 2 *

  • iOS中利用CoreAnimation实现一个时间的进度条效果

    iOS中利用CoreAnimation实现一个时间的进度条效果

    在iOS中实现进度条通常都是通过不停的设置progress来完成的,这样的进度条适用于网络加载(上传下载文件.图片等).但是对于录制视频这样的需求的话,如果是按照每秒来设置进度的话,显得有点麻烦,于是我就想直接用CoreAnimation来按时间做动画,只要设置最大时间,其他的就不用管了,然后在视频暂停与继续录制时,对动画进行暂停和恢复即可.录制视频的效果如下: 你可以在这里下载demo 那么接下来就是如何用CoreAnimation实现一个进度条控件了. 首先呢,让我们创建一个继承自CASha

  • iOS中利用inputView 弹出 picker

    iOS中利用inputView 弹出 picker

    推荐一个Button 弹起PickerView的源码,也可以作为工具类使用. 利用inputView 做键盘弹起动画.该如何做呢? 1.继承UIView 2.重写属性&方法 @property (readwrite) UIView *inputView; @property (readwrite) UIView *inputAccessoryView; - (BOOL)isUserInteractionEnabled { return YES; } - (BOOL)canBecomeFirstR

  • iOS开发中仿Tumblr点赞心破碎动画效果

    iOS开发中仿Tumblr点赞心破碎动画效果

    最近Tumblr轻博客无论是web端还是移动端,都非常受欢迎,简单调研了一下,其中动画是我感兴趣的,特此写了个仿Tumblr点赞心破碎动画: 1.首先看下效果: 2.模仿Tumblr中的效果应用如下: 原理:使用按钮点击Action增加两个事件,通过改变背景hidden和frame,切换图片,增加动画效果等: setupUI及touch Action: <span style="font-size:14px;">- (void)setupUI { // 点击的btn UIB

  • iOS利用MJRefresh实现自定义刷新动画效果

    本文主要介绍iOS 利用MJRefresh实现自定义动画的上拉刷新下拉加载效果,一般的类型(包括更新时间与loading图案)这里不做介绍. 要想实现此功能,首先得有一套load的图片数组. 接下来就是实现过程: 引入头文件: #import "MJRefresh.h" //自定义一个方法实现 - (void)prepareRefresh { NSMutableArray *headerImages = [NSMutableArray array]; for (int i = 1; i

  • Vue利用相反数实现飘窗动画效果

    Vue利用相反数实现飘窗动画效果

    目录 前言 实现思路与分析 1.画一个矩形元素作为飘窗,并使用固定定位 2.编写初始化函数,设定飘窗初始化规则 3.鼠标悬浮在飘窗时停止移动 4.鼠标离开飘窗时继续移动 5.关闭飘窗 6.监听窗口的大小 完整 demo 示例 前言 飘窗,即一个类似小窗子的在网页上移动的矩形元素,通常被用于一些通知类的应用场景, 飘窗与横幅相比,更显眼更具有强调感和动画感,在视觉上更有冲击性,在体验上互动性也更强. 先看下效果图 实现思路与分析 1.画一个矩形元素作为飘窗,并使用固定定位 css 绘制一个固定宽高

  • 如何利用JS实现时间轴动画效果

    如何利用JS实现时间轴动画效果

    目录 css动画 什么是时间轴动画? 动画对象 动画函数 思考 总结 css动画 在前端开发中,一些简单的动效往往是使用 css3 的 @keyframes 来实现的 ,如: .div1 { width: 100px; height: 100px; background: red; animation: changeColor 2s; } @keyframes changeColor { 0% {background: red;} 50% {background: yellow;} 100% {

  • Android中ViewFlipper的使用及设置动画效果实例详解

    Android中ViewFlipper的使用及设置动画效果实例详解

    本文实例讲述了Android中ViewFlipper的使用及设置动画效果.分享给大家供大家参考,具体如下: 说到左右滑动,其实实现左右滑动的方式很多,有ViewPaer,自定义实现Viewgroup,gallery等都可以达到这种效果.这里做下ViewFliper实现左右滑动的效果. 会用到以下的技术: 1.ViewFlipper 2.GestureDetector 3.Animation 主要是这三个类在起作用. ViewFlipper,不妨把它看做一个容器吧,你可以把许多的View放在这个容

  • Android实现游戏中的渐隐和渐现动画效果

    1实现渐隐的动画 在程序中实现可以通过如下方式 View view = new View(context);//执行动画的View AlphaAnimation aa = new AlphaAnimation(1.0f, 0.0f);//创建一个AlphaAnimation 对象,渐变从1->0 aa.setDuration(1500);//设置持续时间 aa.setFillAfter(true);//设置这个View最后的状态,由于是从1->0,所以最后的是消失状态(最后是看不到见这个Vie

随机推荐