iOS- CAShapeLayer与贝塞尔曲线初识

来源：互联网发布：织梦cms模板编辑：程序博客网时间：2024/06/06 16:32

当我们要自己画一个圆或者说是按百分比显示圆的动画时，CAShapeLayer是非常有用的，因为这是一个基于CoreAnimation框架的类，动画渲染是直接由CPU渲染的。一般来说，他与贝塞尔曲线的结合使用比较常见。废话不多说，直接代码，浅讲一下他的用法。

////  CircleView.h//  圆形进度条Demo////  Created by 程磊 on 15/4/28.//  Copyright (c) 2015年 程磊. All rights reserved.//#import <UIKit/UIKit.h>@interface CircleView : UIView/** *  起始值 */@property (nonatomic, assign) CGFloat startValue;//起始值(0~1)/** *  线宽 */@property (nonatomic, assign) CGFloat lineWidth;//线宽(>0)/** *  线条颜色 */@property (nonatomic, strong) UIColor *lineColor;//线条颜色/** *  变化值 */@property (nonatomic, assign) CGFloat value;//变化值@end

////  CircleView.m//  圆形进度条Demo////  Created by 程磊 on 15/4/28.//  Copyright (c) 2015年 程磊. All rights reserved.//#import "CircleView.h"@interface CircleView ()@property (nonatomic, strong) CAShapeLayer *shapeLayer;@end@implementation CircleView- (instancetype)initWithFrame:(CGRect)frame{    if (self = [super initWithFrame:frame]) {        _shapeLayer = [CAShapeLayer layer];//初始化一个CAShapeLayer        _shapeLayer.frame = self.bounds;//其frame                //贝塞尔曲线        UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:self.bounds];//初始化一个用WithOvalInrect，这个frame与上边的frame无关        _shapeLayer.path = path.CGPath;//将贝塞尔曲线与其相关联起来        _shapeLayer.fillColor = [UIColor clearColor].CGColor;//所围成的图形填充颜色        _shapeLayer.lineWidth = 1;//边界线宽度        _shapeLayer.strokeStart = 0.f;//起始点        _shapeLayer.strokeColor = [UIColor redColor].CGColor;//边界线颜色                _shapeLayer.strokeEnd = 0.f;//终结点                        [self.layer addSublayer:_shapeLayer];    }    return self;}@synthesize startValue = _startValue;- (void)setStartValue:(CGFloat)startValue {    _startValue = startValue;    _shapeLayer.strokeStart = startValue;}- (CGFloat)startValue{    return _startValue;}@synthesize lineWidth = _lineWidth;- (void)setLineWidth:(CGFloat)lineWidth{    _lineWidth = lineWidth;    _shapeLayer.lineWidth = lineWidth;}- (CGFloat)lineWidth{    return _lineWidth;}@synthesize lineColor = _lineColor;- (void)setLineColor:(UIColor *)lineColor{    _lineColor = lineColor;    _shapeLayer.strokeColor = lineColor.CGColor;}- (UIColor *)lineColor{    return _lineColor;}@synthesize value = _value;- (void)setValue:(CGFloat)value{    _value = value;    _shapeLayer.strokeEnd = value;}- (CGFloat)value{    return _value;}@end

////  ViewController.m//  圆形进度条Demo////  Created by 程磊 on 15/4/28.//  Copyright (c) 2015年 程磊. All rights reserved.//#import "ViewController.h"#import "CircleView.h"@interface ViewController ()@property (nonatomic, assign) double percent;@property (nonatomic, strong) NSTimer *timer;@property (nonatomic, strong) CircleView *circle;@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    _percent = 0;    _circle = [[CircleView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];    _circle.center = self.view.center;    _circle.startValue = 0.f;    _circle.lineWidth = 5;    _circle.lineColor = [UIColor greenColor];    [self.view addSubview:_circle];    _timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(circleAnimation) userInfo:nil repeats:YES];}- (void)circleAnimation{    _percent += 0.01;    _circle.value = _percent;    if (_percent >= 1.0) {        _percent = 0;    }}@end

0 0