CAShapeLayer 学习和实践

2023-11-01 09:20
文章标签 学习 实践 cashapelayer

本文主要是介绍CAShapeLayer 学习和实践,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

介绍

CAShapeLayer是一个通过矢量图形而不是bitmap来绘制的图层子类。你指定诸如颜色和线宽等属性,用CGPath来定义想要绘制的图形,最后CAShapeLayer就自动渲染出来了。当然,你也可以用Core Graphics直接向原始的CALyer的内容中绘制一个路径,相比直下,使用CAShapeLayer有以下一些优点:
* 渲染快速。CAShapeLayer使用了硬件加速,绘制同一图形会比用Core Graphics快很多。
* 高效使用内存。一个CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形,所以无论有多大,都不会占用太多的内存。
* 不会被图层边界剪裁掉。一个CAShapeLayer可以在边界之外绘制。你的图层路径不会像在使用Core Graphics的普通CALayer一样被剪裁掉(如我们在第二章所见)。
* 不会出现像素化。当你给CAShapeLayer做3D变换时,它不像一个有寄宿图的普通图层一样变得像素化。

其实个人理解就是比CALayer更自由,高度自定义化。

实践

现在我们要实现这样一个进度条,先看看效果。
圆形进度条.gif

思路
  1. 创建一个CAShapeLayer作为底部的圆环,暂且命名为:_trackLayer
  2. 创建一个CAShapeLayer作为进度条,暂且命名为:_progressLayer
  3. 创建一个动画来控制_progressLayer变化
@interface CircularProgressViewController ()
{CAShapeLayer *_trackLayer;  CAShapeLayer *_progressLayer;
}
- (void)viewDidAppear:(BOOL)animated
{[super viewDidAppear:animated];CGFloat ViewWith = CGRectGetWidth(self.view.frame);//获取中心点CGPoint position = self.view.center;//设置layer的path。需要注意的是:ArcCenter是针对下面layer你设置位置之后的中心点。//比如说: _trackLayer.bounds 设置的是(00200200)ArcCenter是(00)。那么圆会在_trackLayer的左上角,而不是当前页面的左上角。如果是(100100),那么圆就会出现在layer的中心点。这个很容易搞混//所以说,他的位置是相对于父视图的。UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(ViewWith / 2, ViewWith / 2) radius:ViewWith / 2 - 10 startAngle:- M_PI_2 endAngle:M_PI_2 * 3 clockwise:YES];_trackLayer = [CAShapeLayer layer];_trackLayer.bounds = CGRectMake(0, 0, ViewWith, ViewWith);_trackLayer.position = position;_trackLayer.lineCap = kCALineCapRound;  //线闭合时的样式_trackLayer.strokeColor = [UIColor greenColor].CGColor;  //轨迹颜色_trackLayer.fillColor = [UIColor clearColor].CGColor;  //空心颜色_trackLayer.lineWidth = 10;  //线的粗细_trackLayer.path = path.CGPath; [self.view.layer addSublayer:_trackLayer];_progressLayer = [CAShapeLayer layer];_progressLayer.bounds = CGRectMake(0, 0, ViewWith, ViewWith);_progressLayer.position = CGPointMake(CGRectGetWidth(_trackLayer.bounds) / 2, CGRectGetWidth(_trackLayer.bounds) / 2);_progressLayer.strokeColor = [UIColor redColor].CGColor;_progressLayer.fillColor = [UIColor clearColor].CGColor;_progressLayer.lineCap = kCALineCapRound;_progressLayer.lineWidth = 10;_progressLayer.path = path.CGPath;_progressLayer.strokeEnd = 0;[_trackLayer addSublayer:_progressLayer];
}

那么截止到这里,你应该在屏幕上的正中间看到一个绿色的轨迹了。那么我们设置的红色的进度条呢?对比一下_trackLayer和_progressLayer。_progressLayer我们多设置了一个strokeEnd属性。下面我们要针对这个属性处理动画。

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];  // 展现动画的方式。使动画看起来更加逼真。
animation.duration = 2;  //动画时间
animation.fromValue = 0;  //动画起始值
animation.toValue = @1;  //动画目标值
animation.fillMode = kCAFillModeForwards;  //设置动画结束后依然显示结束后的状态
animation.removedOnCompletion = NO;  
[_progressLayer addAnimation:animation forKey:nil];

那么截止到这里一个完整的圆形进度条就做完了。

拓展一:实现一个彩色的进度条

彩色进度条.gif
将_progressLayer从当前view移除

[_progressLayer addAnimation:animation forKey:nil];

并在动画代码之前加上这段代码,就可以实现彩色的进度条。

CAGradientLayer *colorLayer = [CAGradientLayer layer];
colorLayer.frame = _progressLayer.frame;
[colorLayer setColors:@[(id)[UIColor blueColor].CGColor,(id)[UIColor yellowColor].CGColor,(id)[UIColor greenColor].CGColor]];
colorLayer.mask = _progressLayer;
[_trackLayer addSublayer:colorLayer];

拓展二:实现一个锦上添花的效果。

更为炫酷.gif
要实现上面图片的动画,则需要使用动画组。下面直接上代码。

CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation1.duration = 2;
animation1.fromValue = 0;
animation1.toValue = @1;
animation1.fillMode = kCAFillModeForwards;
animation1.removedOnCompletion = NO;CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
animation2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation2.duration = 2;
animation2.fromValue = 0;
animation2.toValue = @0.25;
animation2.fillMode = kCAFillModeForwards;
animation2.removedOnCompletion = NO;CABasicAnimation *animation3 = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
animation3.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation3.beginTime = 1.5;
animation3.duration = 1;
animation3.fromValue = @0.25;
animation3.toValue = @1;
animation3.fillMode = kCAFillModeForwards;
animation3.removedOnCompletion = NO;CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = @[animation1,animation2,animation3];
group.duration = 2.5;
group.repeatCount = MAXFLOAT;
[_progressLayer addAnimation:group forKey:nil];

这里面有个大坑就是动画效果一定要选择kCAMediaTimingFunctionEaseInEaseOut,划重点,必考。

总结

其实动画很简单,就是分解每一步动作。实现需要耐心和恒心。以上资料,我研究了三天。是难也好,笨也罢。坚持住吧。

源码:https://github.com/lpy834994897/AnimationSimple

这篇关于CAShapeLayer 学习和实践的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/322029

相关文章

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

Spring Boot 整合 SSE的高级实践(Server-Sent Events)

《SpringBoot整合SSE的高级实践(Server-SentEvents)》SSE(Server-SentEvents)是一种基于HTTP协议的单向通信机制,允许服务器向浏览器持续发送实... 目录1、简述2、Spring Boot 中的SSE实现2.1 添加依赖2.2 实现后端接口2.3 配置超时时

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

Java Optional的使用技巧与最佳实践

《JavaOptional的使用技巧与最佳实践》在Java中,Optional是用于优雅处理null的容器类,其核心目标是显式提醒开发者处理空值场景,避免NullPointerExce... 目录一、Optional 的核心用途二、使用技巧与最佳实践三、常见误区与反模式四、替代方案与扩展五、总结在 Java

Spring Boot循环依赖原理、解决方案与最佳实践(全解析)

《SpringBoot循环依赖原理、解决方案与最佳实践(全解析)》循环依赖指两个或多个Bean相互直接或间接引用,形成闭环依赖关系,:本文主要介绍SpringBoot循环依赖原理、解决方案与最... 目录一、循环依赖的本质与危害1.1 什么是循环依赖?1.2 核心危害二、Spring的三级缓存机制2.1 三

Python 中的 with open文件操作的最佳实践

《Python中的withopen文件操作的最佳实践》在Python中,withopen()提供了一个简洁而安全的方式来处理文件操作,它不仅能确保文件在操作完成后自动关闭,还能处理文件操作中的异... 目录什么是 with open()?为什么使用 with open()?使用 with open() 进行

Spring Boot 配置文件之类型、加载顺序与最佳实践记录

《SpringBoot配置文件之类型、加载顺序与最佳实践记录》SpringBoot的配置文件是灵活且强大的工具,通过合理的配置管理,可以让应用开发和部署更加高效,无论是简单的属性配置,还是复杂... 目录Spring Boot 配置文件详解一、Spring Boot 配置文件类型1.1 applicatio

tomcat多实例部署的项目实践

《tomcat多实例部署的项目实践》Tomcat多实例是指在一台设备上运行多个Tomcat服务,这些Tomcat相互独立,本文主要介绍了tomcat多实例部署的项目实践,具有一定的参考价值,感兴趣的可... 目录1.创建项目目录,测试文China编程件2js.创建实例的安装目录3.准备实例的配置文件4.编辑实例的

Python 中的异步与同步深度解析(实践记录)

《Python中的异步与同步深度解析(实践记录)》在Python编程世界里,异步和同步的概念是理解程序执行流程和性能优化的关键,这篇文章将带你深入了解它们的差异,以及阻塞和非阻塞的特性,同时通过实际... 目录python中的异步与同步:深度解析与实践异步与同步的定义异步同步阻塞与非阻塞的概念阻塞非阻塞同步

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash?1.1