基于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是一个首尾相接的闭环的曲线,即使该贝塞尔曲线不是一个闭环的曲线
说完了简介们来看一下如何创建一个简单的圆形进度条
//创建全局属性的ShapeLayer
@property
(
nonatomic
, strong) CAShapeLayer *shapeLayer;
- (
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; } } |
再来运行下我们来看看效果
基于CAShapeLayer和贝塞尔曲线的圆形进度条动画的更多相关文章
- 基于CAShapeLayer和贝塞尔曲线的圆形进度条动画【装载】
初次接触CAShapeLayer和贝塞尔曲线,看了下极客学院的视频.对初学者来说感觉还不错.今天来说一个通过CAShapeLayer和贝塞尔曲线搭配的方法,创建的简单的圆形进度条的教程先简单的介绍下C ...
- 纯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的一些特性的实现 ...
随机推荐
- bzoj4097 [Usaco2013 dec]Vacation Planning
Description Air Bovinia is planning to connect the N farms (1 <= N <= 200) that the cows live ...
- date命令使用总结【转载】
本文转载自:http://blog.sina.com.cn/s/blog_674b5aae0100o0w9.html 由于跨年.跨月.闰平年等特殊性,在日常编程过程中对日期的处理总是异常麻烦.目前,各 ...
- [LeetCode] 187. Repeated DNA Sequences 解题思路
All DNA is composed of a series of nucleotides abbreviated as A, C, G, and T, for example: "ACG ...
- M - Escape - HDU 3605 - (缩点+最大流SAP)
题目大意:2012世界末日来了,科学家发现了一些星球可以转移人口,不过有的人可以在一些星球上生存有的人不行,而且每个星球都有一定的承载量,现在想知道是否所有的人都可以安全转移呢? 输入:首先输入一个N ...
- php-redis扩展模块安装记录
redis的安装可以参考:centos下部署redis服务环境的操作记录 下面记录下php-redis扩展模块的安装过程:php的安装目录是/Data/app/php5.6.26 下载phpredis ...
- 提交表单时的等待(loading)效果
$(document).ready(function () { $("body").prepend('<div id="overlay" class=&q ...
- 【AngularJS入门】用ng-repeat指令实现循环输出
循环输出列表很多项目在web服务端做,前端做好模版后后端写jsp代码,双方需要紧密合作,分清责任.有些项目由后端提供restful方法,前端用ajax调用自己循环,这种一般是大把的jquery拼字符串 ...
- struts2的配置和使用
一:配置stuts2的运行环境,把以下的包放到WEB-INF/lib目录下 1,structs2-core-2.1.6.jar struts的核心库 2,xwork-2.1.2.jar ...
- 【前端JS】input textarea 默认文字,点击消失
如题.前端页面的 input textarea 有时候须要显示默认文字以提示用户,下面为实现代码,以 input 为例.textarea 能够直接搬用 HTML <input type=&quo ...
- Java基础知识强化93:算一下你来到这个世界多少天的案例
1. 分析: (1)键盘录入你的出生年月日 (2)把该字符串转换为一个日期 (3)通过该日期得到一个毫秒值 (4)获取当前时间的毫秒值 (5)用(4)-(3)得到一个毫秒值 (6)把E的毫秒值转换为天 ...