经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » iOS » 查看文章
iOS-贝塞尔画圆动画（圆圈进度百分比）
来源：cnblogs　　作者：macro小K　　时间：2020/12/21 15:02:44　　对本文有异议

目标效果

          

实现

新建基于UIview的文件

.h

属性

  1. /** 0 < accuracy < 1 */
  2. @property (nonatomic,assign) double  accuracy;

.m

属性

  1. ///画圆Layer
  2. @property (nonatomic,strong) CAShapeLayer *shapeLayer;
  3. ///底层灰色圆Layer
  4. @property (nonatomic,strong) CAShapeLayer *shapeFloorLayer;
  5. ///画圆Path
  6. @property (nonatomic,strong) UIBezierPath *proPath;
  7. @property (nonatomic,strong) UILabel * accuracyLabel;
  8. @property (nonatomic,strong) UICountingLabel * aValueLabel;
  9. ///圆心
  10. @property (nonatomic,assign)  CGPoint roundCenter;
  11. ///圆半径
  12. @property (nonatomic, assign) CGFloat radius;

方法

  1. - (instancetype)initWithFrame:(CGRect)frame
  2. {
  3.     self = [super initWithFrame:frame];
  4.     if (self) {
  5.         [self setup];
  6.     }
  7.     return self;
  8. }
  9. - (instancetype)init
  10. {
  11.     self = [super init];
  12.     if (self) {
  13.         [self setup];
  14.     }
  15.     return self;
  16. }
  17. - (void)setup{
  18.     self.backgroundColor = [UIColor whiteColor];
  19.     
  20.     _roundCenter = CGPointMake(self.mqb_width * 0.5, self.mqb_height * 0.5);
  21.     _radius = (self.mqb_width - 20*mqbScale)/2;
  22.     
  23.     
  24.     [self addSubview:self.aValueLabel];
  25.     self.aValueLabel.sd_layout.
  26.     leftSpaceToView(self, 30*mqbScale).
  27.     rightSpaceToView(self, 30*mqbScale).
  28.     centerYIs(_roundCenter.y - 10*mqbScale).
  29.     heightIs(36*mqbScale);
  30.     
  31.     [self addSubview:self.accuracyLabel];
  32.     self.accuracyLabel.sd_layout.
  33.     leftSpaceToView(self, 30*mqbScale).
  34.     rightSpaceToView(self, 30*mqbScale).
  35.     topSpaceToView(self.aValueLabel, 15*mqbScale).
  36.     heightIs(20*mqbScale);
  37.     
  38.     self.accuracyLabel.text = @"百分比";
  39.     
  40.     [self.layer addSublayer:self.shapeFloorLayer];
  41.     [self.layer addSublayer:self.shapeLayer];
  43. }
  45. - (void)setAccuracy:(double)accuracy{
  46.     if (accuracy < 0) {
  47.         _accuracy = 0;
  48.     }else if (accuracy > 1){
  49.         _accuracy = 1;
  50.     }
  51.     else {
  52.         _accuracy = accuracy;
  53.     }
  54.     [self  startAccuracyAnimation];
  55.     [self.aValueLabel countFrom:0 to:(_accuracy*100) withDuration:0.5];
  56. }
  57. - (void)startAccuracyAnimation{
  58.     [self.proPath addArcWithCenter:_roundCenter
  59.                             radius:_radius
  60.                         startAngle:3 * M_PI/2
  61.                           endAngle:3 * M_PI/2 + 2 * M_PI * _accuracy
  62.                          clockwise:YES];
  63.     self.shapeLayer.path = self.proPath.CGPath;
  64.     
  65.     /**  动画1
  66.      CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
  67.      animation.fromValue = @(0.0f);
  68.      animation.toValue = @(1.0f);
  69.      animation.duration = 0.5f;
  70.      [self.shapeLayer addAnimation:animation forKey:@"animationStrokeEnd"];
  71.      */
  72.     
  73.     /**  动画2
  74.      POPSpringAnimation *popStrokeEnd = [POPSpringAnimation animationWithPropertyNamed:kPOPShapeLayerStrokeEnd];
  75.      popStrokeEnd.fromValue = @(0.0f);
  76.      popStrokeEnd.toValue = @(1.0f);
  77.      popStrokeEnd.springBounciness = 12;
  78.      popStrokeEnd.springSpeed = 12;
  79.      [self.shapeLayer pop_addAnimation:popStrokeEnd forKey:@"popAnimationStrokeEnd"];
  80.      */
  81.     
  82.     /**  动画3
  83.      POPSpringAnimation *popStrokeEnd = [POPSpringAnimation animationWithPropertyNamed:kPOPShapeLayerStrokeEnd];
  84.      popStrokeEnd.fromValue = @(0.5f);
  85.      popStrokeEnd.toValue = @(1.0f);
  86.      popStrokeEnd.springBounciness = 12;
  87.      popStrokeEnd.springSpeed = 12;
  88.      [self.shapeLayer pop_addAnimation:popStrokeEnd forKey:@"popAnimationStrokeEnd"];
  89.      
  90.      POPSpringAnimation *popStrokeStart = [POPSpringAnimation animationWithPropertyNamed:kPOPShapeLayerStrokeStart];
  91.      popStrokeStart.fromValue = @(0.5f);
  92.      popStrokeStart.toValue = @(0.0f);
  93.      popStrokeStart.springBounciness = 12;
  94.      popStrokeStart.springSpeed = 12;
  95.      [self.shapeLayer pop_addAnimation:popStrokeStart forKey:@"popAnimationStartEnd"];
  96.      */
  97. }
  99. #pragma mark ========== 变量 ==========
  100. - (UILabel *)accuracyLabel{
  101.     if (!_accuracyLabel) {
  102.         _accuracyLabel = [[UILabel alloc]init];
  103.         _accuracyLabel.font = mqbFont(15.0);
  104.         _accuracyLabel.textColor = [UIColor mqb_colorBlack];
  105.         _accuracyLabel.textAlignment = NSTextAlignmentCenter;
  106.     }
  107.     return _accuracyLabel;
  108. }
  110. - (UICountingLabel *)aValueLabel{
  111.     if (!_aValueLabel) {
  112.         _aValueLabel = [[UICountingLabel alloc]init];
  113.         _aValueLabel.font = mqbMediumFont(40);
  114.         _aValueLabel.textColor = [UIColor mqb_colorBlack];
  115.         _aValueLabel.textAlignment = NSTextAlignmentCenter;
  116.         _aValueLabel.format = @"%d%%";
  117.     }
  118.     return _aValueLabel;
  119. }
  120. - (CAShapeLayer *)shapeFloorLayer{
  121.     if (!_shapeFloorLayer) {
  122.         ///细线条
  123.         UIColor *colorLine = [UIColor mqb_colorSeparatorColor];
  124.         
  125.         
  126.         UIBezierPath *pathLine = [UIBezierPath
  127.                                   bezierPathWithArcCenter:_roundCenter
  128.                                   radius:_radius
  129.                                   startAngle:0
  130.                                   endAngle:2 * M_PI
  131.                                   clockwise:YES];
  132.         _shapeFloorLayer = [CAShapeLayer layer];
  133.         _shapeFloorLayer.fillColor = [UIColor clearColor].CGColor;
  134.         _shapeFloorLayer.strokeColor = colorLine.CGColor;
  135.         _shapeFloorLayer.lineWidth = 2*mqbScale;
  136.         _shapeFloorLayer.path = pathLine.CGPath;
  137.         
  138.     }
  139.     return _shapeFloorLayer;
  140. }
  141. - (CAShapeLayer *)shapeLayer{
  142.     if (!_shapeLayer) {
  143.         _shapeLayer = [CAShapeLayer layer];
  144.         _shapeLayer.strokeColor = [UIColor mqb_colorGreen].CGColor;
  145.         _shapeLayer.fillColor = [UIColor clearColor].CGColor;
  146.         _shapeLayer.lineWidth = 10*mqbScale;;
  147.         _shapeLayer.fillRule = kCAFillRuleEvenOdd;
  148.         
  149.         _shapeLayer.lineCap = kCALineCapRound;
  150.     }
  151.     return _shapeLayer;
  152. }
  154. - (UIBezierPath *)proPath{
  155.     if (!_proPath) {
  156.         _proPath = [[UIBezierPath alloc]init];
  157.         _proPath.lineWidth = 10*mqbScale;
  158.         _proPath.lineCapStyle = kCGLineCapRound;
  159.         _proPath.lineJoinStyle = kCGLineJoinRound;
  160.     }
  161.     return _proPath;
  162. }

备注

代码中用到了SDAutoLayout约束，pop 动画、UICountingLabel 第三方 label 数字动画，UICountingLabel 的 format 原本不支持的百分比格式，如若需要可在源码中 setTextValue 修改：

修改前

  1. - (void)setTextValue:(CGFloat)value
  2. {
  3.     if (self.attributedFormatBlock != nil) {
  4.         self.attributedText = self.attributedFormatBlock(value);
  5.     }
  6.     else if(self.formatBlock != nil)
  7.     {
  8.         self.text = self.formatBlock(value);
  9.     }
  10.     else
  11.     {
  12.         // check if counting with ints - cast to int
  13.         if([self.format rangeOfString:@"%(.*)d" options:NSRegularExpressionSearch].location != NSNotFound ||
  14.            [self.format rangeOfString:@"%(.*)i"].location != NSNotFound)
  15.         {
  16.             self.text = [NSString stringWithFormat:self.format,(int)value];
  17.         }
  18.         else
  19.         {
  20.             self.text = [NSString stringWithFormat:self.format,value];
  21.         }
  22.     }
  23. }

修改后

  1. - (void)setTextValue:(CGFloat)value
  2. {
  3.     if (self.attributedFormatBlock != nil) {
  4.         self.attributedText = self.attributedFormatBlock(value);
  5.     }
  6.     else if(self.formatBlock != nil)
  7.     {
  8.         self.text = self.formatBlock(value);
  9.     }
  10.     else
  11.     {
  12.         // check if counting with ints - cast to int
  13.         if([self.format rangeOfString:@"%(.*)d%%" options:NSRegularExpressionSearch].location != NSNotFound ||
  14.            [self.format rangeOfString:@"%(.*)i%%"].location != NSNotFound ||
  15.            [self.format rangeOfString:@"%(.*)d" options:NSRegularExpressionSearch].location != NSNotFound ||
  16.            [self.format rangeOfString:@"%(.*)i"].location != NSNotFound)
  17.         {
  18.             self.text = [NSString stringWithFormat:self.format,(int)value];
  19.         }
  20.         else
  21.         {
  22.             self.text = [NSString stringWithFormat:self.format,value];
  23.         }
  24.     }
  25. }

 

原文链接：http://www.cnblogs.com/wangkejia/p/14145138.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

iOS热门文章

  • snapkit更新约束崩溃的问题
  • iOS 14 UDP收不到广播处理
  • iOS开发用如何用类&quot;SKStoreProductViewController&quot;跳转AppStore点赞评分？
  • Charles抓包iPhone注意点以及SSL Proxying enabled for this host
  • 笔记：long、longlong、int、float、NSString相互转换
  • ios开发UI篇—UITextfield
  • 自定义相机碰到的问题，比如常见的拍照录制视频方向，镜像左右颠倒等问题
  • C 和 Object-C中的 #ifdef #ifndef
  • 使用Hbuilder将自己app发布到App Store（一）
  • iOS开发 - 超级签名实现之描述文件

    • iOS推荐文章

  • iOS开发基础135-Core Data
  • uniapp-vue3-oadmin手机后台实例|vite5.x+uniapp多端仿ios管理系统
  • 苹果支付有哪些坑，为什么苹果支付比支付宝和微信容易丢单？
  • 带你走进灵动岛
  • vue3+ts Axios封装—重复请求拦截
  • axios详解以及完整封装方法
  • 关于 axios 是什么？以及怎么用？
  • iOS气泡提示工具BubblePopup的使用
  • 一篇文章带你详细了解axios的封装 - 公众号-web前端进阶
  • [MAUI]模仿iOS多任务切换卡片滑动的交互实现

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号