基于CAShapeLayer和贝塞尔曲线的圆形进度条动画【装载】
初次接触CAShapeLayer和贝塞尔曲线,看了下极客学院的视频。对初学者来说感觉还不错。今天来说一个通过CAShapeLayer和贝塞尔曲线搭配的方法,创建的简单的圆形进度条的教程
先简单的介绍下CAShapeLayer
1,CAShapeLayer继承自CALayer,可使用CALayer的所有属性
2,CAShapeLayer需要和贝塞尔曲线配合使用才有意义。
Shape:形状
贝塞尔曲线可以为其提供形状,而单独使用CAShapeLayer是没有任何意义的。
3,使用CAShapeLayer与贝塞尔曲线可以实现不在view的DrawRect方法中画出一些想要的图形
关于CAShapeLayer和DrawRect的比较
DrawRect:DrawRect属于CoreGraphic框架,占用CPU,消耗性能大
CAShapeLayer:CAShapeLayer属于CoreAnimation框架,通过GPU来渲染图形,节省性能。动画渲染直接提交给手机GPU,不消耗内存
贝塞尔曲线与CAShapeLayer的关系
1,CAShapeLayer中shape代表形状的意思,所以需要形状才能生效
2,贝塞尔曲线可以创建基于矢量的路径
3,贝塞尔曲线给CAShapeLayer提供路径,CAShapeLayer在提供的路径中进行渲染。路径会闭环,所以绘制出了Shape
4,用于CAShapeLayer的贝塞尔曲线作为Path,其path是一个首尾相接的闭环的曲线,即使该贝塞尔曲线不是一个闭环的曲线
说完了简介们来看一下如何创建一个简单的圆形进度条
1
2
|
//创建全局属性的ShapeLayer @property ( nonatomic , strong) CAShapeLayer *shapeLayer; |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
- ( void )viewDidLoad { [ super viewDidLoad]; //创建出CAShapeLayer self .shapeLayer = [CAShapeLayer layer]; self .shapeLayer.frame = CGRectMake(0, 0, 200, 200); //设置shapeLayer的尺寸和位置 self .shapeLayer.position = self .view.center; self .shapeLayer.fillColor = [UIColor clearColor].CGColor; //填充颜色为ClearColor //设置线条的宽度和颜色 self .shapeLayer.lineWidth = 1.0f; self .shapeLayer.strokeColor = [UIColor redColor].CGColor; //创建出圆形贝塞尔曲线 UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)]; //让贝塞尔曲线与CAShapeLayer产生联系 self .shapeLayer.path = circlePath.CGPath; //添加并显示 [ self .view.layer addSublayer: self .shapeLayer]; } |
这时候我们运行下能看到会有一个圆
现在我们要用到CAShapeLayer的两个参数,strokeEnd和strokeStart
Stroke:用笔画的意思
在这里就是起始笔和结束笔的位置
Stroke为1的话就是一整圈,0.5就是半圈,0.25就是1/4圈。以此类推
如果我们把起点设为0,终点设为0.75
1
2
3
|
//设置stroke起始点 self .shapeLayer.strokeStart = 0; self .shapeLayer.strokeEnd = 0.75; |
看下运行效果
起点和终点我们可以自己控制了,接下来我们在价格定时器,就可以完成我们的圆形进度条了
加个全局变量add,这是我们每次的递增量
1
2
3
4
|
@interface ViewController () { double add; } |
再写个定时器
1
2
3
4
5
6
7
|
add = 0.1; //每次递增0.1 //用定时器模拟数值输入的情况 _timer = [ NSTimer scheduledTimerWithTimeInterval:0.1 target: self selector: @selector (circleAnimationTypeOne) userInfo: nil repeats: YES ]; |
定时器每次时间到了执行的函数,这个比较简单就不解释了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
- ( void )circleAnimationTypeOne { if ( self .shapeLayer.strokeEnd > 1 && self .shapeLayer.strokeStart < 1) { self .shapeLayer.strokeStart += add; } else if ( self .shapeLayer.strokeStart == 0){ self .shapeLayer.strokeEnd += add; } if ( self .shapeLayer.strokeEnd == 0) { self .shapeLayer.strokeStart = 0; } if ( self .shapeLayer.strokeStart == self .shapeLayer.strokeEnd) { self .shapeLayer.strokeEnd = 0; } } |
再来运行下我们来看看效果
奉上Demo,供大家参考。
CircleAnimationTest
基于CAShapeLayer和贝塞尔曲线的圆形进度条动画【装载】的更多相关文章
- 基于CAShapeLayer和贝塞尔曲线的圆形进度条动画
通过CAShapeLayer和贝塞尔曲线搭配的方法,创建的简单的圆形进度条的教程先简单的介绍下CAShapeLayer1,CAShapeLayer继承自CALayer,可使用CALayer的所有属性2 ...
- 纯CSS3实现圆形进度条动画
悄悄地,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.今天要介绍的这个 CSS3 进度条,效果和 Flyme OS 4 上的加载动画一样. 首先,来看下最终的效果: 它的 HTML ...
- vue 圆形进度条组件解析
项目简介 本组件是vue下的圆形进度条动画组件 自由可定制,几乎全部参数均可设置 源码简单清晰 面向人群 急于使用vue圆形进度条动画组件的同学.直接下载文件,拷贝代码即可运行. 喜欢看源码,希望了解 ...
- CAShapeLayer实现圆形进度条效果
一.CAShapeLayer简单介绍: .CAShapeLayer继承至CALayer,能够使用CALayer的全部属性值 2.CAShapeLayer须要与贝塞尔曲线配合使用才有意义 3.使用CAS ...
- CAShapeLayer 与贝塞尔曲线
一 CAShapeLayer 简介 1,CAShapeLayer继承至CALayer,可以使用CALayer的所有属性 2,CAShapeLayer需要与贝塞尔曲线配合使用才有意义:单独使用毫无意义 ...
- CAShapeLayer和贝塞尔曲线配合使用
前言 CAShapeLayer继承自CALayer,因此,可使用CALayer的所有属性.但是,CAShapeLayer需要和贝塞尔曲线配合使用才有意义. 关于UIBezierPath,请阅读文章:i ...
- iOS之UI--Quartz2D的入门应用--重绘下载圆形进度条
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- Android 自定义 View 圆形进度条总结
Android 自定义圆形进度条总结 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 微信公众号:牙锅子 源码:CircleProgress 文中如有纰漏,欢迎大家留言指出. 最近 ...
- [iOS]圆形进度条及计时功能
平时用战网安全令的时候很喜欢圆形倒计时的效果,然后简单看了一下Android的圆形进度条,后来又写了一个IOS的.整体界面参照IOS系统的倒计时功能,顺便熟悉了UIPickerView的一些特性的实现 ...
随机推荐
- SQL每个月份的发生额都比101科目多的科目
请用SQL语句实现:从TestDB数据表中查询出所有月份的发生额都比101科目相应月份的发生额高的科目.请注意:TestDB中有很多科目,都有1-12月份的发生额. ...
- .NET中的IO操作之文件流(一)
读操作 //1.创建文件流 FileStream fsRead =new FileStream("1.txt",FileMode.Open); //2.创建缓冲区,正常情况下,是不 ...
- bzoj 1857: [Scoi2010]传送带 三分
题目链接 1857: [Scoi2010]传送带 Time Limit: 1 Sec Memory Limit: 64 MBSubmit: 934 Solved: 501[Submit][Stat ...
- cdoj 1134 男神的约会 状压dp
题目链接 给一个10*10的方格, 每个格子里面有0-9,走到一个格子, 就要在这个格子待一段时间, 时间长度为这个格子的数字. 从左上角走到右下角, 要求0-9必须每种格子都要走到, 输出最短时间. ...
- GPL协议
GPL-General Public License 它是自由软件许可(Free Software Licence),保证最终使用者能够自由的引用,学习,拷贝,甚至修改软件.在理解这之前需要了解什么是 ...
- 转: bower 客户端库管理工具
概述 常用操作 库的安装 库的搜索和查看 库的更新和卸载 列出所有库 配置文件.bowerrc 库信息文件bower.json 相关链接 概述 注:bower下载安装依赖库实际上是使用git进行下载. ...
- 基于Visual C++2013拆解世界五百强面试题--题10-找出N个数种最大的K个数
有一亿个整数,请找出最大的 1000 个,要求时间越短越好, 空间占用越好越好. 如果不考虑时间效率,很容易想到解决方法,我们只需存储前一千个数, 然后依次读入后面的数和这一千个数组比较,替换其中比较 ...
- PhoneGap 3.0 安装
PhoneGap 3.0 已经出来有一段时间了.3.0 提供了使用Node.js 安装,使用命令行创建.编译.运行项目.也就是可以抛弃eclipse,完全使用命令.记事本开发phonegap 项目了 ...
- poj 3356 AGTC(线性dp)
题目链接:http://poj.org/problem?id=3356 思路分析:题目为经典的编辑距离问题,其实质为动态规划问题: 编辑距离问题定义:给定一个字符串source,可以对其进行复制,替换 ...
- Ext JS学习第九天 Ext基础之 扩展原生的javascript对象
此文来记录学习笔记: •Ext对于原生的javascript对象进行了一系列的扩展,我们把他们掌握好,更能深刻的体会Ext的架构,从而对我们的web开发更好的服务, 源码位置,我们可以从开发包的这个位 ...