iOS 动画绘制圆形

536 阅读1分钟
@interface ViewController () {  
    CAShapeLayer *shapeLayer;  
    NSTimer *timer;  
}  

@end  

@implementation ViewController  

- (void)viewDidLoad {  
    [super viewDidLoad];  

    //第一步,通过UIBezierPath设置圆形的矢量路径  
    UIBezierPath *circle = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];  

    //第二步,用CAShapeLayer沿着第一步的路径画一个完整的环(颜色灰色,起始点0,终结点1)  
    CAShapeLayer *bgLayer = [CAShapeLayer layer];  
    bgLayer.frame = CGRectMake(0, 0, 200, 200);//设置Frame  
    bgLayer.position = self.view.center;//居中显示  
    bgLayer.fillColor = [UIColor clearColor].CGColor;//填充颜色=透明色  
    bgLayer.lineWidth = 2.f;//线条大小  
    bgLayer.strokeColor = [UIColor grayColor].CGColor;//线条颜色  
    bgLayer.strokeStart = 0.f;//路径开始位置  
    bgLayer.strokeEnd = 1.f;//路径结束位置  
    bgLayer.path = circle.CGPath;//设置bgLayer的绘制路径为circle的路径  
    [self.view.layer addSublayer:bgLayer];//添加到屏幕上  

    //第三步,用CAShapeLayer沿着第一步的路径画一个红色的环形进度条,但是起始点=终结点=0,所以开始不可见  
    shapeLayer = [CAShapeLayer layer];  
    shapeLayer.frame = CGRectMake(0, 0, 200, 200);  
    shapeLayer.position = self.view.center;  
    shapeLayer.fillColor = [UIColor clearColor].CGColor;  
    shapeLayer.lineWidth = 2.f;  
    shapeLayer.strokeColor = [UIColor redColor].CGColor;  
    shapeLayer.strokeStart = 0;  
    shapeLayer.strokeEnd = 0;  
    shapeLayer.path = circle.CGPath;  
    [self.view.layer addSublayer:shapeLayer];  

    //第四步,用一个定时器进行测试,每一秒,进度加10%  
    timer = [NSTimer scheduledTimerWithTimeInterval:1.f target:self selector:@selector(animate) userInfo:nil repeats:YES];  
}  

- (void)animate {  
    shapeLayer.strokeEnd += 0.1;  
}