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

相关文章

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

springboot集成Deepseek4j的项目实践

《springboot集成Deepseek4j的项目实践》本文主要介绍了springboot集成Deepseek4j的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录Deepseek4j快速开始Maven 依js赖基础配置基础使用示例1. 流式返回示例2. 进阶

Android App安装列表获取方法(实践方案)

《AndroidApp安装列表获取方法(实践方案)》文章介绍了Android11及以上版本获取应用列表的方案调整,包括权限配置、白名单配置和action配置三种方式,并提供了相应的Java和Kotl... 目录前言实现方案         方案概述一、 androidManifest 三种配置方式

Spring Boot中定时任务Cron表达式的终极指南最佳实践记录

《SpringBoot中定时任务Cron表达式的终极指南最佳实践记录》本文详细介绍了SpringBoot中定时任务的实现方法,特别是Cron表达式的使用技巧和高级用法,从基础语法到复杂场景,从快速启... 目录一、Cron表达式基础1.1 Cron表达式结构1.2 核心语法规则二、Spring Boot中定

Ubuntu中Nginx虚拟主机设置的项目实践

《Ubuntu中Nginx虚拟主机设置的项目实践》通过配置虚拟主机,可以在同一台服务器上运行多个独立的网站,本文主要介绍了Ubuntu中Nginx虚拟主机设置的项目实践,具有一定的参考价值,感兴趣的可... 目录简介安装 Nginx创建虚拟主机1. 创建网站目录2. 创建默认索引文件3. 配置 Nginx4

Java进阶学习之如何开启远程调式

《Java进阶学习之如何开启远程调式》Java开发中的远程调试是一项至关重要的技能,特别是在处理生产环境的问题或者协作开发时,:本文主要介绍Java进阶学习之如何开启远程调式的相关资料,需要的朋友... 目录概述Java远程调试的开启与底层原理开启Java远程调试底层原理JVM参数总结&nbsMbKKXJx

Nginx实现高并发的项目实践

《Nginx实现高并发的项目实践》本文主要介绍了Nginx实现高并发的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录使用最新稳定版本的Nginx合理配置工作进程(workers)配置工作进程连接数(worker_co