1.添加橙色圆环

- (CAShapeLayer *)shapeLayer {
if (!_shapeLayer) {
_shapeLayer = [CAShapeLayer layer];
CGRect rect = {,,,};
//bezierPathWithOvalInRect圆形路径 bezierPathWithRect 方形路径
UIBezierPath * path = [UIBezierPath bezierPathWithOvalInRect: rect];
_shapeLayer.strokeColor = [UIColor orangeColor].CGColor;
_shapeLayer.lineWidth = ;
_shapeLayer.fillColor = [UIColor clearColor].CGColor;
_shapeLayer.lineCap = kCALineCapRound;
_shapeLayer.path = path.CGPath;
}
return _shapeLayer;
}

2.添加进度条

- (CAShapeLayer *)progressLayer {
if (!_progressLayer) {
_progressLayer = [CAShapeLayer layer];
_progressLayer.frame = self.shapeLayer.bounds;
_progressLayer.fillColor = [UIColor clearColor].CGColor;
_progressLayer.strokeColor = [UIColor whiteColor].CGColor;
_progressLayer.lineWidth = ;
_progressLayer.lineCap = kCALineCapRound;
CGRect rect = {,,,};
UIBezierPath * path = [UIBezierPath bezierPathWithOvalInRect: rect];
_progressLayer.path = path.CGPath;
}
return _progressLayer;
}

3.添加渐变颜色

[self.view.layer addSublayer: self.shapeLayer];
[self.view.layer addSublayer: self.progressLayer]; CAGradientLayer * gradientLayer1 = [CAGradientLayer layer];
gradientLayer1.frame = self.view.bounds; CGColorRef red = [UIColor redColor].CGColor;
CGColorRef purple = [UIColor purpleColor].CGColor;
CGColorRef yellow = [UIColor yellowColor].CGColor;
CGColorRef orange = [UIColor orangeColor].CGColor; gradientLayer1.colors = @[(__bridge id)red,(__bridge id)purple,(__bridge id)yellow,(__bridge id)orange];
gradientLayer1.locations = @[@0.3, @0.6,@0.8,@1.0];
gradientLayer1.startPoint = CGPointMake(0.5, );
gradientLayer1.endPoint = CGPointMake(0.5, ); //一定要设置gradientLayer.mask = self.progressLayer;这样才能显示中间的内容,如果不设置mask,那么就只有渐变图层了
gradientLayer1.mask = self.progressLayer;
[self.view.layer addSublayer: gradientLayer1]; //添加渐变

4.执行动画

- (IBAction)change:(UISlider * )sender {
CGFloat cV = sender.value * ;
[self updateProgressWithNumber: cV]; } - (void)updateProgressWithNumber:(NSUInteger)number {
[CATransaction begin];
[CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
[CATransaction setAnimationDuration:0.5];
self.progressLayer.strokeEnd = number / 100.0;
NSLog(@"%@",[NSString stringWithFormat:@"%@%%", @(number)]);
[CATransaction commit];
}

CAShapLayer的使用1的更多相关文章

  1. 使用uibesizerpath + Cashaplayer画椭圆

    使用uibesizerpath Cashaplayer画椭圆: + (void)drawOvalAnimSourceView:(UIView *)sourceView { //view是曲线的背景vi ...

  2. IOS-使用CAShapLayer绘制扇形

    IOS-使用CAShapLayer绘制扇形 为了增加应用体验感,我们动态绘制扇形或者饼状图效果. 这里我们使用CAShapeLayer,这样就不必再-(void)draw函数内绘制图形 参考代码 -( ...

  3. iOS-Core-Animation-Advanced-Techniques/13-高效绘图 【没理解】

    #import "DrawingView.h" #import <QuartzCore/QuartzCore.h> @interface DrawingView () ...

随机推荐

  1. python计算素数和

    计算输入两个正整数x,y(x<=y,包括x,y)素数和.函数isPrime用以判断一个数是否素数,primeSum函数返回素数和 以下为源码 def isPrime(n) :    for i ...

  2. SpringBoot注册Windows服务和启动报错的原因

    SpringBoot注册Windows服务和启动报错的原因 Windows系统启动Java程序会弹出黑窗口.黑窗口有几点不好.首先它不美观:其次容易误点导致程序关闭:但最让我匪夷所思的是:将鼠标光标选 ...

  3. 神经网络1_neuron network原理_python sklearn建模乳腺癌细胞分类器(推荐AAA)

    sklearn实战-乳腺癌细胞数据挖掘(博客主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005269003&a ...

  4. DirectX11--HR宏关于dxerr库的替代方案

    DirectX11 With Windows SDK完整目录 欢迎加入QQ群: 727623616 可以一起探讨DX11,以及有什么问题也可以在这里汇报. 综述 参考文章:https://blogs. ...

  5. showdoc 文档管理系统

    ==========================showdoc 简介==========================在线文档管理系统很多, 比如阿里的语雀.腾讯的 TAPD 平台也包括文档管理 ...

  6. JavaScript 修改 CSS 伪类属性

    背景 有时候我们希望通过JS代码控制伪类属性, 确苦于对策 实际上可通过向document.head中添加style子元素来实现 演示 function css(style_text) { var s ...

  7. WebGL教程

    https://www.w3cschool.cn/webgl/rleo1oh7.html

  8. 分页之 skip(pageindex*(index-1).take(size).Tolist();

    grdView.DataSource = Select().Skip(pageSize * (start - 1)).Take(rows).ToList();这个分页性能上并不高下面是我的分页 1 2 ...

  9. ARIMA模型原理

    一.时间序列分析 北京每年每个月旅客的人数,上海飞往北京每年的游客人数等类似这种顾客数.访问量.股价等都是时间序列数据.这些数据会随着时间变化而变化.时间序列数据的特点是数据会随时间的变化而变化. 随 ...

  10. react-native不是内部或 外部命令,也不是可运行的程序或批处理文件

    1.执行node命令时提示:node不是内部或外部命令,也不是可运行的程序或批处理文件. 原因环境变量没有指向node安装目录 path:C:\Program Files\nodejs\ 2.reac ...