IOS开发基础篇--CAShapeLayer的strokeStart和strokeEnd属性

原创 2016年02月14日 13:22:59

一、案例演示

最近有一个小需求,就是要做一个圆形进度条,大概样子如下:
演示图片
在不知道有CAShapeLayer的strokeStart和strokeEnd属性的时候,我采取的方法就是实时的 移除旧的CAShapeLayer 然后重绘这个圆形的CAShapeLayer。显然这种方式的效率是不高的。后来在一次看别人Demo的时候,发现别人使用了CAShapeLayer的strokeStart和strokeEnd属性,实现这一个效果十分的简单方便。下面就和大家来讲一讲这两个属性的使用。

二、属性详解

苹果官方给出这两个属性的解释为:
/* These values define the subregion of the path used to draw the
* stroked outline. The values must be in the range [0,1] with zero
* representing the start of the path and one the end. Values in
* between zero and one are interpolated linearly along the path
* length. strokeStart defaults to zero and strokeEnd to one. Both are
* animatable. */

大概意思就是:我们可以对绘制的Path进行分区。这两个属性的值在0~1之间,0代表Path的开始位置,1代表Path的结束位置。是一种线性递增关系。strokeStart默认值为0,strokeEnd默认值为1。这两个属性都支持动画。

    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.frame = _demoView.bounds;
    shapeLayer.strokeEnd = 0.7f;
    shapeLayer.strokeStart = 0.1f;

    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:_demoView.bounds];

    shapeLayer.path = path.CGPath;

    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.lineWidth = 2.0f;
    shapeLayer.strokeColor = [UIColor redColor].CGColor;

    [_demoView.layer addSublayer:shapeLayer];

我们通过以上代码设置:strokeStart=0.1f; strokeEnd=0.7f则显示如下图所示。
演示图片

三、圆形进度条实现代码

综上所述我们知道,strokeStart和strokeEnd可以设置一条Path的起始和终止的位置,通过利用strokeStart和strokeEnd这两个属性支持动画的特点,我们通过以下代码就可以实现圆形进度条的效果。

    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.frame = _demoView.bounds;

    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:_demoView.bounds];

    shapeLayer.path = path.CGPath;

    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.lineWidth = 2.0f;
    shapeLayer.strokeColor = [UIColor redColor].CGColor;

    [_demoView.layer addSublayer:shapeLayer];

    CABasicAnimation *pathAnima = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnima.duration = 3.0f;
    pathAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    pathAnima.fromValue = [NSNumber numberWithFloat:0.0f];
    pathAnima.toValue = [NSNumber numberWithFloat:1.0f];
    pathAnima.fillMode = kCAFillModeForwards;
    pathAnima.removedOnCompletion = NO;
    [shapeLayer addAnimation:pathAnima forKey:@"strokeEndAnimation"];

四、联系方式

微博:新浪微博
博客:http://blog.csdn.net/yixiangboy
github:https://github.com/yixiangboy

版权声明:本文为博主原创文章,未经博主允许不得转载。

CAShapeLayer 与CABasicAnimation结合使用时strokeStart、strokeEnd 与fromValue、toValue的用法

因为本人在将CASharpLayer和CABasicAnimation结合使用的时候,遇到了对属性的组合产生的效果弄不清的情况,特意对它们的用法进行了总结。  1 keyPath = strokeS...
  • u014745414
  • u014745414
  • 2015年03月31日 20:58
  • 1817

CAShapeLayer的strokeStart和strokeEnd属性

1 keyPath = strokeStart  动画的fromValue = 0,toValue = 1      表示从路径的0位置画到1 怎么画是按照清除开始的位置也就是清除0 一直清除到1 ...
  • Hibiscus_blog
  • Hibiscus_blog
  • 2017年05月09日 14:37
  • 223

贝塞尔曲线 & CAShapeLayer & Stroke 动画 浅谈

转载自:http://46aae4d1e2371e4aa769798941cef698.devproxy.yunshipei.com/qiaoqiaoqiao2014/article/details/...
  • SandyLoo
  • SandyLoo
  • 2016年04月05日 12:19
  • 1644

CAShapeLayer 属性(strokeStart和strokeEnd)

1 keyPath = strokeStart  动画的fromValue = 0,toValue = 1      表示从路径的0位置画到1 怎么画是按照清除开始的位置也就是清除0 一直清除到1 ...
  • zlhuan0629
  • zlhuan0629
  • 2016年08月06日 10:36
  • 87

CAShapeLayer

CAShapeLayer 分类: iOS2014-04-22 10:15 62人阅读 评论(0) 收藏 举报 之前讲过CALayer动画相关知识,再来看看更加复杂的CAShapeL...
  • yongyinmg
  • yongyinmg
  • 2014年08月22日 13:48
  • 37328

iOS 使用UIBezierPath与CABasicAnimation绘制图形

由于项目需要,最近接触了一些绘图的知识,现在记录下来学习过程。 首先看一下效果图:  UIBezierPath对象是CGPathRef数据类型的封装。path如果是基于矢量形状的,都用直线和曲...
  • TyroneWing
  • TyroneWing
  • 2016年01月08日 16:25
  • 1274

CAShapeLayer

CAShapeLayer是CALayer的子类。CAShapeLayer有y'g'i
  • u014084081
  • u014084081
  • 2014年07月08日 11:41
  • 1833

iOS CoreAnimation之CABasicAnimation:文字路径动画

前言:主要用到以下内容: 1.CABasicAnimation -- animationWithKeyPath:@"strokeEnd"//开始绘制 2.CAKeyframeAnimation --...
  • Xoxo_x
  • Xoxo_x
  • 2017年05月09日 23:16
  • 894

放肆的使用UIBezierPath和CAShapeLayer画各种图形

放肆的使用UIBezierPath和CAShapeLayer画各种图形
  • qq_33777090
  • qq_33777090
  • 2016年04月06日 17:40
  • 424

CABasicAnimation使用总结

转载自:http://www.jianshu.com/p/02c341c748f9# 实例化 使用方法animationWithKeyPath:对 CABasicAnimation...
  • liangliang2727
  • liangliang2727
  • 2016年10月26日 11:08
  • 403
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:IOS开发基础篇--CAShapeLayer的strokeStart和strokeEnd属性
举报原因:
原因补充:

(最多只允许输入30个字)