CAShapelayer如何通過動畫從圓形變爲方形（反之亦然）？

Question

如何將CAShapelayer從圓形變爲方形（或相反）CABasicAnimation？

Answer 1

各地做了一些工作之後，我已經結束與此

首先爲方形和圓形路徑以及CAShapeLayer對象創建全局對象UIBezierPath。現在

@implementation Demo{ 
     CAShapeLayer *shapeLayer; 
     UIBezierPath *sqPath; 
     UIBezierPath *crclePath; 
    } 

，自定義shapeLayer並添加viewDidLoad到層像下面。

- (void)viewDidLoad { 
    [super viewDidLoad]; 
    // Do any additional setup after loading the view. 
    shapeLayer = [CAShapeLayer layer]; 
    shapeLayer.strokeColor = [[UIColor redColor] CGColor]; 
    shapeLayer.lineWidth = 2; 
    shapeLayer.lineJoin = kCALineCapRound; 
    sqPath = [self makeSquare:self.view.center squareWidth:200]; 
    shapeLayer.path = [sqPath CGPath]; 
    crclePath = [self makeCircle:self.view.center radius:100]; 
    [self.view.layer addSublayer:shapeLayer]; 
} 

下面是方法，這將使完美的廣場

-(UIBezierPath*)makeSquare:(CGPoint)centrePoint squareWidth:(float)gain{ 
    float x=centrePoint.x-(gain/2); 
    float y=centrePoint.y-(gain/2); 
    UIBezierPath *apath = [UIBezierPath bezierPath]; 
    [apath moveToPoint:CGPointMake(x,y)]; 
    [apath addLineToPoint:apath.currentPoint]; 
    [apath addLineToPoint:CGPointMake(x+gain,y)]; 
    [apath addLineToPoint:apath.currentPoint]; 
    [apath addLineToPoint:CGPointMake(x+gain,y+gain)]; 
    [apath addLineToPoint:apath.currentPoint]; 
    [apath addLineToPoint:CGPointMake(x,y+gain)]; 
    [apath addLineToPoint:apath.currentPoint]; 
    [apath closePath]; 
    return apath; 
} 

下面是方法有助於使圓

- (UIBezierPath *)makeCircle:(CGPoint)center radius:(CGFloat)radius 
{ 
    UIBezierPath *circlePath = [UIBezierPath bezierPath]; 
    [circlePath addArcWithCenter:center radius:radius startAngle:-M_PI endAngle:-M_PI/2 clockwise:YES]; 
    [circlePath addArcWithCenter:center radius:radius startAngle:-M_PI/2 endAngle:0 clockwise:YES]; 
    [circlePath addArcWithCenter:center radius:radius startAngle:0 endAngle:M_PI/2 clockwise:YES]; 
    [circlePath addArcWithCenter:center radius:radius startAngle:M_PI/2 endAngle:M_PI clockwise:YES]; 
    [circlePath addArcWithCenter:center radius:radius startAngle:M_PI endAngle:-M_PI clockwise:YES]; 
    [circlePath closePath]; 
    return circlePath; 
} 

最後，動畫的btnDone其中使用CABasicAnimation動畫轉換操作完成從正方形到圓形或反之亦然。

- (IBAction)btnDone:(id)sender { 
    btnDowrk.selected=!btnDowrk.selected; 
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"]; 
    animation.duration = 1; 
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 
    if (btnDowrk.selected) { 
     animation.fromValue = (__bridge id)(sqPath.CGPath); 
     animation.toValue = (__bridge id)(crclePath.CGPath); 
     shapeLayer.path = crclePath.CGPath; 
    } 
    else{ 
     animation.fromValue = (__bridge id)(crclePath.CGPath); 
     animation.toValue = (__bridge id)(sqPath.CGPath); 
     shapeLayer.path = sqPath.CGPath; 
    } 
    [shapeLayer addAnimation:animation forKey:@"animatePath"]; 
} 

Answer 2

你可以和cornerRadius一起玩。例如，

UIView *testView = [[UIView alloc]initWithFrame:CGRectMake(50, 50, 50, 50)]; 

CAShapeLayer *layer = [[CAShapeLayer alloc]initWithLayer:testView.layer]; // this is square layer 

layer.cornerRadius = 25.0; // this is round layer 

layer.cornerRadius = 0.0; // this is again square layer 

您可以直接從輪切換查看平方和圓像上面的方法！

Answer 3

下面是創建循環路徑：

- (UIBezierPath *)circlePathWithCenter:(CGPoint)center radius:(CGFloat)radius 
{  
UIBezierPath *circlePath = [UIBezierPath bezierPath]; 
[circlePath addArcWithCenter:center radius:radius startAngle:0 endAngle:M_PI/2 clockwise:YES]; 
[circlePath addArcWithCenter:center radius:radius startAngle:M_PI/2 endAngle:M_PI clockwise:YES]; 
[circlePath addArcWithCenter:center radius:radius startAngle:M_PI endAngle:3*M_PI/2 clockwise:YES]; 
[circlePath addArcWithCenter:center radius:radius startAngle:3*M_PI/2 endAngle:M_PI clockwise:YES]; 
[circlePath closePath]; 
return circlePath; 
} 

下面是方形路徑：

- (UIBezierPath *)squarePathWithCenter:(CGPoint)center size:(CGFloat)size 
{ 
CGFloat startX = center.x-size/2; 
CGFloat startY = center.y-size/2; 

UIBezierPath *squarePath = [UIBezierPath bezierPath]; 
[squarePath moveToPoint:CGPointMake(startX, startY)]; 
[squarePath addLineToPoint:CGPointMake(startX+size, startY)]; 
[squarePath addLineToPoint:CGPointMake(startX+size, startY+size)]; 
[squarePath addLineToPoint:CGPointMake(startX, startY+size)]; 
[squarePath closePath]; 
return squarePath; 
} 

動畫部件

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"]; 
animation.duration = 1; 
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 

animation.fromValue = (__bridge id)(self.stateLayer.path); 
    animation.toValue = (__bridge id)(self.stopPath.CGPath); 
self.stateLayer.path = self.stopPath.CGPath; 

[self.stateLayer addAnimation:animation forKey:@"animatePath"];