Using uibezierpath + caanimation to achieve heartbeat animation effect in IOS



Recently, in the spare time of developing IOS project, I decided to practice the use of uibezierpath for drawing and caanimation animation, and made a heartbeat animation. This is a very simple example. Let’s take a look at the detailed introduction:

Gif example:

Core code

1 – first draw the heart view through drawRect

- (void)drawRect:(CGRect)rect { 
 CGFloat padding = 4.0;
 //Radius (small circle radius)
 CGFloat curveRadius = (rect.size.width - 2 * padding)/4.0;
 //Bessel curve
 UIBezierPath *heartPath = [UIBezierPath bezierPath];
 //Starting point (the first point of a circle)
 CGPoint tipLocation = CGPointMake(rect.size.width/2, rect.size.height-padding);
 //Start from the beginning
 [heartPath moveToPoint:tipLocation];
 //(second point of left circle)
 CGPoint topLeftCurveStart = CGPointMake(padding, rect.size.height/2.4);
 //Add conic
 [heartPath addQuadCurveToPoint:topLeftCurveStart controlPoint:CGPointMake(topLeftCurveStart.x, topLeftCurveStart.y + curveRadius)];
 //Draw a circle
 [heartPath addArcWithCenter:CGPointMake(topLeftCurveStart.x+curveRadius, topLeftCurveStart.y) radius:curveRadius startAngle:M_PI endAngle:0 clockwise:YES];
 //(second point of left circle)
 CGPoint topRightCurveStart = CGPointMake(topLeftCurveStart.x + 2*curveRadius, topLeftCurveStart.y);
 //Draw a circle
 [heartPath addArcWithCenter:CGPointMake(topRightCurveStart.x+curveRadius, topRightCurveStart.y) radius:curveRadius startAngle:M_PI endAngle:0 clockwise:YES];
 //Top right control point
 CGPoint topRightCurveEnd = CGPointMake(topLeftCurveStart.x + 4*curveRadius, topRightCurveStart.y);
 //Add conic
 [heartPath addQuadCurveToPoint:tipLocation controlPoint:CGPointMake(topRightCurveEnd.x, topRightCurveEnd.y+curveRadius)];
 //Set fill color
 [[UIColor redColor] setFill];
 [heartPath fill];
 //Set sidelines
 heartPath.lineWidth = 2;
 heartPath.lineCapStyle = kCGLineCapRound;
 heartPath.lineJoinStyle = kCGLineJoinRound;
 //Set stroke color
 [[UIColor yellowColor] setStroke];
 [heartPath stroke];


2 – add heart view to main view

 XMHeartView *heartView = [[XMHeartView alloc] init];
 heartView.frame = CGRectMake(100, 50, 200, 200);
 [self.view addSubview:heartView];

3 – add heartbeat animation to heart view

//Add heartbeat animation to heart 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];
 //Reverse animation
 pulseAnimation.autoreverses = YES;
 //Set the number of repetitions to infinite
 pulseAnimation.repeatCount = FLT_MAX;
 //Add animation to layer
 [heartView.layer addAnimation:pulseAnimation forKey:@"transform.scale"];


The above is the whole content of this article, I hope the content of this article has a certain reference value for your study or work, if you have any questions, you can leave a message to exchange, thank you for your support for developer.