UIBezierPath和CAShapeLayer結合繪制任意弧度的圓形（包含旋轉動畫）

jopen 10年前發布 | 38K 次閱讀 iOS開發移動開發

首先來看一張要繪制弧度圓的圖片，從圖中可知中心點的坐標為（150，150），弧度的半徑為75（radius），起始點為0°開始到135°，代碼中的pi為3.14159265359,如下圖所示：

來看一下具體是如何實現的，代碼部分如下：

#import "ViewController.h"

#define pi 3.14159265359
#define DEGREES_TO_RADIANS(degress) ((pi * degress)/180)

@interface ViewController ()

@property (nonatomic,strong) CAShapeLayer *shapeLayer;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    CALayer *testLayer = [CALayer layer];
    testLayer.backgroundColor = [UIColor clearColor].CGColor;
    testLayer.frame = CGRectMake(100, 100, 100, 100);
    [self.view.layer addSublayer:testLayer];

    _shapeLayer = [CAShapeLayer layer];
    _shapeLayer.fillColor = [UIColor clearColor].CGColor;
    _shapeLayer.strokeColor = [UIColor orangeColor].CGColor;
    _shapeLayer.lineCap = kCALineCapRound;
    _shapeLayer.lineWidth = 7;

    UIBezierPath *thePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(50, 50) radius:50-3.5 startAngle:0 endAngle:DEGREES_TO_RADIANS(135) clockwise:YES];
    _shapeLayer.path = thePath.CGPath;
    [testLayer addSublayer:_shapeLayer];

}

查看一下運行效果：

根據要求，可以看到繪制出了一個135°角的弧度圓，接下來讓這個弧度圓做一個簡單的繞z軸旋轉360°的動畫。在最后面添加這句話，代碼如下：

CABasicAnimation *animation = [CABasicAnimation animation];
    animation.keyPath = @"transform.rotation.z";
    animation.duration = 4.f;
    animation.fromValue = @(0);
    animation.toValue = @(2*M_PI);
    animation.repeatCount = INFINITY;

    [testLayer addAnimation:animation forKey:nil];

看一下運行效果：

希望對你有幫助