查看: 276|回复: 0

[IOS开发教程] iOS中利用UIBezierPath + CAAnimation实现心跳动画效果

发表于 2017-11-10 08:39:18
太阳http代理AD

前言

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

GIF示例:

核心代码

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

  1. - (void)drawRect:(CGRect)rect {
  2. // 间距
  3. CGFloat padding = 4.0;
  4. // 半径(小圆半径)
  5. CGFloat curveRadius = (rect.size.width - 2 * padding)/4.0;
  6. // 贝塞尔曲线
  7. UIBezierPath *heartPath = [UIBezierPath bezierPath];
  8. // 起点(圆的第一个点)
  9. CGPoint tipLocation = CGPointMake(rect.size.width/2, rect.size.height-padding);
  10. // 从起点开始画
  11. [heartPath moveToPoint:tipLocation];
  12. // (左圆的第二个点)
  13. CGPoint topLeftCurveStart = CGPointMake(padding, rect.size.height/2.4);
  14. // 添加二次曲线
  15. [heartPath addQuadCurveToPoint:topLeftCurveStart controlPoint:CGPointMake(topLeftCurveStart.x, topLeftCurveStart.y + curveRadius)];
  16. // 画圆
  17. [heartPath addArcWithCenter:CGPointMake(topLeftCurveStart.x+curveRadius, topLeftCurveStart.y) radius:curveRadius startAngle:M_PI endAngle:0 clockwise:YES];
  18. // (左圆的第二个点)
  19. CGPoint topRightCurveStart = CGPointMake(topLeftCurveStart.x + 2*curveRadius, topLeftCurveStart.y);
  20. // 画圆
  21. [heartPath addArcWithCenter:CGPointMake(topRightCurveStart.x+curveRadius, topRightCurveStart.y) radius:curveRadius startAngle:M_PI endAngle:0 clockwise:YES];
  22. // 右上角控制点
  23. CGPoint topRightCurveEnd = CGPointMake(topLeftCurveStart.x + 4*curveRadius, topRightCurveStart.y);
  24. // 添加二次曲线
  25. [heartPath addQuadCurveToPoint:tipLocation controlPoint:CGPointMake(topRightCurveEnd.x, topRightCurveEnd.y+curveRadius)];
  26. // 设置填充色
  27. [[UIColor redColor] setFill];
  28. // 填充
  29. [heartPath fill];
  30. // 设置边线
  31. heartPath.lineWidth = 2;
  32. heartPath.lineCapStyle = kCGLineCapRound;
  33. heartPath.lineJoinStyle = kCGLineJoinRound;
  34. // 设置描边色
  35. [[UIColor yellowColor] setStroke];
  36. [heartPath stroke];
  37. }
复制代码

2-添加心形view到主视图

  1. XMHeartView *heartView = [[XMHeartView alloc] init];
  2. heartView.frame = CGRectMake(100, 50, 200, 200);
  3. [self.view addSubview:heartView];
复制代码

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

  1. // 给心视图添加心跳动画
  2. float bigSize = 1.1;
  3. CABasicAnimation *pulseAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
  4. pulseAnimation.duration = 0.5;
  5. pulseAnimation.toValue = [NSNumber numberWithFloat:bigSize];
  6. pulseAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
  7. // 倒转动画
  8. pulseAnimation.autoreverses = YES;
  9. // 设置重复次数为无限大
  10. pulseAnimation.repeatCount = FLT_MAX;
  11. // 添加动画到layer
  12. [heartView.layer addAnimation:pulseAnimation forKey:@"transform.scale"];
复制代码

总结

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



太阳http代理AD
回复

使用道具 举报