CAShapelayer如何通过动画从圆形变为方形（反之亦然）？

Question

CAShapelayer如何将CABasicAnimation从圆转换为方（或反之亦然）？

Answer 1

在完成一些工作后，我已经结束了这个

首先为方形和圆形路径以及UIBezierPath对象创建CAShapeLayer的全局对象。

@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"];