转载

发表于 2016年02月09日
浏览 (630)
评论 (0)

iOS之UI--CAShapeLayer

关于CAShapeLayer

CAShapeLayer简介

1、CAShapeLayer继承自CALayer，可以使用CALayer的所有属性值
2、CAShapeLayer需要与贝塞尔曲线配合使用才有意义
3、使用CAShapeLayer与贝塞尔曲线可以实现不在view的drawRect方法中画出有一些想要的图形
4、CAShapeLayer属于CoreAnimation框架，其动画渲染直接提交到手机的GPU当中，相较于view的drawRect方法使用CPU渲染而言，其效率极高，能大大优化内存使用情况。
- 个人经验：可以重写UIView的子类中的drawRect来实现进度条效果，但是UIView的drawRect是用CPU渲染实现的，而使用CAShapeLayer效率更高，因为它用的是GPU渲染。

贝塞尔曲线与CAShapeLayer的关系

1、CAShapeLayer中有Shape这个单词，顾名思义，它需要一个形状才能生效
2、贝塞尔曲线可以创建基于矢量的路径
3、贝塞尔曲线给CAShapeLayer提供路径，CAShapeLayer在提供的路径中进行渲染，路径会闭环，所以路径绘制出了Shape
4、用于CAShapeLayer的贝塞尔曲线做为path，其path实一个首尾相接的闭环的曲线，即使该贝塞尔曲线不是一个闭环的曲线

图2.png

如何建立贝塞尔曲线和CAShapeLayer的联系：
- 类：CAShapeLayer
- 属性：path
  - 值：可以是贝塞尔曲线对象
```
UIBezierPath *circle = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,200,100)]; shape.path = circle.CGPath;
```
- 属性：fillColor 修改贝塞尔曲线的填充颜色
  - 值：CGColor对象
- 属性：maskToBounds
  - 值：YES 会让超出CAShapeLayer的部分不会显示

strokeStart与strokeEnd动画

1、将ShapeLayer的fillColor设置成透明背景
2、设置线条的宽度（lineWidth）的值
3、设置线条的颜色
4、将strokeStart值设定成0，然后让strokeEnd的值变化触发隐式动画
类：CAShapeLayer
- 属性：
  - strokeStart
  - strokeEnd
    - 注意：strokeEnd的值一定要比strokeStart的大
    - 范围：(0~1)
```
处理方法：     shapeLayer.strokeStart = valueOne < valueTwo ? valueOne : valueTwo;     shapeLayer.strokeStart = valueOne > valueTwo ? valueOne : valueTwo;
```
- 属性：
  - lineWidth 线条的宽度
  - strokeColor 线条的颜色
    - 值：CGColor

用CAShapeLayer实现圆形进度条效果

圆形进度条动画.gif

iOS之UI--CAShapeLayer

源码下载地址： CircleProgress 中的 CircleProgress源码

直接更改path的结果，并没有理想中的渐变过程，所以需要使用核心动画：

iOS之UI--CAShapeLayer

综合示例源码请看： https://github.com/HeYang123456789/UIView

原文 http://www.cnblogs.com/goodboy-heyang/p/5185575.html

正文到此结束

所属分类：编程技术

本文标签： tar http ask core https src git value db HTML 源码 GitHub UI 下载
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

热门推荐

openfire数据库安装指南

浏览(13,742) 评论(0)
Caffe 深度学习框架上手教程

浏览(10,456) 评论(0)
ReactiveCocoa入门教程：第一部分

浏览(11,287) 评论(0)
开源HIDS-OSSEC使用实例:监测CC攻击

浏览(11,195) 评论(0)
Decorators in ES7

浏览(15,738) 评论(4)
用Electron（Atom编辑器的兄弟项目）开发桌面应用

浏览(28,762) 评论(0)
Windows下JetBrains CLion中文输出乱码的解决方法

浏览(12,215) 评论(1)
同步-@synchronized, NSLock, pthread, OSSpinLock性能比较

浏览(11,177) 评论(0)
Seaweedfs之Volume读请求重定向

浏览(25,455) 评论(3)
HTML、CSS及JavaScript ：有Promise，不会搞大肚子

浏览(13,315) 评论(0)

相关文章

阿里云首购8折

Loading...

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

[HBLOG]公众号

HBLOG

HBLOG