iOS 贝赛尔 圆形进度条

    UIBezierPath *aPth = [UIBezierPath bezierPathWithArcCenter:CGPointMake(55, 65.f) radius:50.f startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:YES];
    aPth.lineWidth = 5.0f;
    aPth.lineCapStyle = kCGLineCapRound;
    aPth.lineJoinStyle = kCGLineJoinRound;
    [[UIColor redColor] setStroke];
    [[UIColor orangeColor] setFill];
    [aPth stroke];

  

进度条动画


// 第一、 UIBezierPath 绘制线段

UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(55, 65.f) radius:50.f startAngle:-M_PI_2 endAngle:M_PI_2*3 clockwise:YES];

// 第二、 UIBezierPath 和 CAShapeLayer 关联

  CAShapeLayer *progressLayer = [ CAShapeLayer layer];

  progressLayer.path          = circlePath. CGPath ;

progressLayer.fillColor     = [UIColor clearColor].CGColor;

  progressLayer.strokeColor   = [ UIColor redColor]. CGColor ;

  progressLayer.lineWidth     = 5.0f;

progressLayer.lineCap      = kCALineCapRound;

 

//第三,动画

CABasicAnimation *ani = [ CABasicAnimation animationWithKeyPath : NSStringFromSelector ( @selector (strokeEnd))];

ani. fromValue = @0 ;

  ani. toValue = @1 ;

  ani. duration = 5 ;
  [progressLayer addAnimation :ani forKey : NSStringFromSelector ( @selector (strokeEnd))];

 [view. layer addSublayer :progressLayer];
				
时间: 2024-10-13 12:25:33

iOS 贝赛尔 圆形进度条的相关文章

xamarin.ios 实现圆形进度条

using System; using UIKit; using System.Drawing; using CoreAnimation; namespace PMM { public class ProgressCircleView : UIView { protected CAShapeLayer _progressCircle; protected CAShapeLayer PageGrayCircle; public override CoreGraphics.CGRect Bounds

IOS 自定义圆形进度条UISlider

#import <UIKit/UIKit.h> /** @name Constants */ /** * The styles permitted for the circular progress view. * * You can set and retrieve the current style of progress view through the progressViewStyle property. */ typedef enum { UICircularSliderStyle

IOS 圆形进度条

// // CCProgressView.h // Demo // // Created by leao on 2017/8/7. // Copyright ? 2017年 zaodao. All rights reserved. // #import <UIKit/UIKit.h> typedef NS_ENUM(NSInteger, CCProgressViewStyle) { CCProgressViewStyleCircle, // 圆形进度条 CCProgressViewStyleB

iOS 图片加载 圆形进度条

项目中有加载网络图片的需求,加一个加载的进度条会提高用户体验,网络不好的时候会清晰的看到图片加载的进度,比让用户看着满屏幕空白好.下面是我们项目自己封装的圆形进度条,分享给大家. 其实实现原理很简单,只是根据图片加载的进度来绘制一个圆. 先来看.h文件,需要一个进度的属性和进度条展示位置的方法: @property (nonatomic, assign) CGFloat progress; +(HMProgressView *)showHMProgressView:(UIView *)paren

iOS开发笔记-根据frame大小动态调整fontSize的自适应文本及圆形进度条控件的实现

最近同样是新App,设计稿里出现一种圆形进度条的设计,如下: 想了想,圆形进度条实现起来不难,但是其中显示百分比的文本确需要自适应,虽然可以使用时自己设定文本字体的大小,但是这样显得很麻烦,也很low. 查了一圈,目前实现的自适应UILabel,都是根据font大小动态调整frame的size,并不能满足我们的需求.  那么问题来了 如何实现一种能够根据frame大小自适应调整文本font size的圆形进度条呢? 我的实现思路很简单,首先计算出能够给予UILabel的frame最大尺寸,然后根

利用css3动画和border来实现圆形进度条

最近在学习前端的一些知识,发现border的功能十分强大啊! 首先来看看demo 就是这么一个圆形的进度条,在文本框中输入0-100的数值下面的进度条相应的转到多少 这个主要是利用border,旋转和css动画来实现的,主要思想是利用两个div来互相遮挡border形成的一个只有半圈有颜色的圆形,再利用旋转div的角度来调整显示 上代码: html+css+js(这里引入了jquery) <!DOCTYPE html> <html lang="en"> <

自定义圆形进度条

关于控件呢,我想大家应该都很熟悉了吧,android应用开发MVC架构中,控件担任着至关重要的作用,感觉可以说是基于控件的事件模型人机交互的基础吧.这种特性感觉在wpf开发中体现得更为直接,感兴趣的同学可以去了解一下.而android框架自身就已经给我们提供了很多控件.那么问题来了?为什么有那么多控件可以用,你还要去屑自定义控件呢?是因为大家闲的蛋疼吗?显然不是.个人认为只要有两方面吧,要么是觉得有些原生控件是在是丑得难以忍受(即使是在你已经自定义了他的shape,圆角,selector等一系列

Android自定义View——圆形进度条式按钮

介绍 今天上班的时候有个哥们问我怎么去实现一个按钮式的进度条,先来看看他需要实现的效果图. 和普通的圆形进度条类似,只是中间的地方有两个状态表示,未开始,暂停状态.而且他说圆形进度的功能已经实现了.那么我们只需要对中间的两个状态做处理就行了. 先来看看实现的效果图: 上面说了我们只需要处理中间状态的变化就可以了,对于进度的处理直接使用了弘洋文章中实现: http://blog.csdn.net/lmj623565791/article/details/43371299 下面开始具体实现. 具体实

Html5基于SVG的扁平风格圆形进度条javascript插件教程

一.使用方法 使用该圆形进度条需要引入circleDonutChart.js文件. <script type="text/javascript" src="circleDonutChart.js"></script> 二.Html结构 你可以使用一个空的<div>元素来制作圆形进度条. <div id="example1"></div> 三.初始化插件 要制作圆形进度条,可以使用下面的方