CAShapeLayer动画（从0到最终大小的弧形）

Question

CAShapeLayer动画（从0到最终大小的弧形）

iosobjective-canimationcore-animationquartz-core

10

我有一个CAShapeLayer，其中使用UIBezierPath添加了一个弧线。我在stackoverflow上看过几篇文章（实际上只有一篇），但没有一篇能够给我答案。正如标题所说，我想要对一个弧线进行动画（是的，它将用于饼图）。

如何实现从“空”弧到完全展开的动画呢？就像曲线进度条一样。这是否真的不可能通过CoreAnimation来完成？

以下是我如何“制作”弧线的方式。哦，请忽略注释和计算，因为我习惯于逆时针单位圆和苹果公司则是顺时针。弧线看起来很好，我只需要动画效果：

    //Apple's unit circle goes in clockwise rotation while im used to counter clockwise that's why my angles are mirrored along x-axis
    workAngle = 6.283185307 - DEGREES_TO_RADIANS(360 * item.value / total);

    //My unit circle, that's why negative currentAngle
    [path moveToPoint:CGPointMake(center.x + cosf(outerPaddingAngle - currentAngle) * (bounds.size.width / 2), center.y - (sinf(outerPaddingAngle - currentAngle) * (bounds.size.height / 2)))];

    //Apple's unit circle, clockwise rotation, we add the angles
    [path addArcWithCenter:center radius:120 startAngle:currentAngle endAngle:currentAngle + workAngle clockwise:NO];

    //My unit circle, counter clockwise rotation, we subtract the angles
    [path addLineToPoint:CGPointMake(center.x + cosf(-currentAngle - workAngle) * ((bounds.size.width / 2) - pieWidth), center.y - sinf(-currentAngle - workAngle) * ((bounds.size.height / 2) - pieWidth))];

    //Apple's unit circle, clockwise rotation, addition of angles
    [path addArcWithCenter:center radius:120 - pieWidth startAngle:currentAngle + workAngle endAngle:currentAngle - innerPaddingAngle clockwise:YES];

    //No need for my custom calculations since I can simply close the path
    [path closePath];

    shape = [CAShapeLayer layer];
    shape.frame = self.bounds;
    shape.path = path.CGPath;
    shape.fillColor = kRGBAColor(255, 255, 255, 0.2f + 0.1f * (i + 1)).CGColor; //kRGBAColor is a #defined

    [self.layer addSublayer:shape];


    //THIS IS THE PART IM INTERESTED IN
    if (_shouldAnimate)
    {
        CABasicAnimation *pieAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
        pieAnimation.duration = 1.0;
        pieAnimation.removedOnCompletion = NO;
        pieAnimation.fillMode = kCAFillModeForwards;
        //from and to are just dummies so I dont get errors
        pieAnimation.fromValue = [NSNumber numberWithInt:0]; //from what
        pieAnimation.toValue = [NSNumber numberWithFloat:1.0f]; //to what

        [shape addAnimation:pieAnimation forKey:@"animatePath"];
    }

- Majster

尝试这个：https://dev59.com/nWUo5IYBdhLWcg3w7jIq#15651718 - Nick Terry

不好，这个动画会使边框绘制自身，然后填充颜色（在整个填充区域内）。我希望它像进度条一样增长。 - Majster

3个回答

3

在创建动画之前，您需要将形状的strokeEnd设置为0。

然后，使用键@"strokeEnd"而不是@"path"... CAAnimations的键通常是您想要动画化的属性的名称。

然后，您可以执行以下操作：

[CATransaction begin]
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.duration = 1.0f;
animation.removedOnCompletion = NO;
animation.fromValue = @0; //shorthand for creating an NSNumber
animation.toValue = @1; //shorthand for creating an NSNumber
[self addAnimation:animation forKey:@"animateStrokeEnd"];
[CATransaction commit];

- C4 - Travis

2

您需要使用正确的键。"path"和"animatePath"对它来说没有意义——您需要使用"strokeEnd"作为您的关键帧/路径。如果您需要调整填充颜色，您可以使用fillColor。完整列表在这里：https://developer.apple.com/library/ios/documentation/GraphicsImaging/Reference/CAShapeLayer_class/Reference/Reference.html

- Daetrin

是的，我知道我必须使用适当的键，但我不知道要使用哪个键，因为我想要一个“曲线进度条”填充动画。 - Majster

@Majster，几乎可以确定会使用strokeEnd。创建一个路径，使其成为所需的曲线，将其设置为以您想要的条形宽度绘制轮廓，然后动画化描边结尾。当该属性为0时，图层将绘制路径的前0％。当为0.5时，图层将绘制路径前50％，依此类推。 - Tommy

不是真的。描边动画化了形状的外线。我想让整个形状都增长 - 包括填充。当你写这篇文章时，你在我的脑海中引发了一个想法 - 我尝试将lineWidth设置为50，并使实际填充区域非常小，以至于几乎看不见，但是外部和内部角落没有对齐。希望你明白我的意思。如果您有解决方案，请发布一个包含一些代码的答案，以便我可以看到我错在哪里。谢谢！ - Majster

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- alecail · Accepted Answer

这是一个基于CAShapeLayer实现的CALayer：

ProgressLayer.h/m

#import <QuartzCore/QuartzCore.h>

@interface ProgressLayer : CAShapeLayer

-(void) computePath:(CGRect)r;
-(void) showProgress;
@end

#import "ProgressLayer.h"

@implementation ProgressLayer
-(id)init {
    self=[super init];
    if (self) {
        self.path = CGPathCreateWithEllipseInRect(CGRectMake(0, 0, 50, 50), 0);
        self.strokeColor = [UIColor greenColor].CGColor;
        self.lineWidth=40;
        self.lineCap = kCALineCapRound;
        self.strokeEnd=0.001;
    }
    return self;
}

-(void) computePath:(CGRect)r {
    self.path = CGPathCreateWithEllipseInRect(r, 0);
}


-(void)showProgress {
    float advance=0.1;
    if (self.strokeEnd>1) self.strokeEnd=0;

    CABasicAnimation * swipe = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    swipe.duration=0.25;
    swipe.fromValue=[NSNumber numberWithDouble:self.strokeEnd];
    swipe.toValue=  [NSNumber numberWithDouble:self.strokeEnd + advance];

    swipe.fillMode = kCAFillModeForwards;
    swipe.timingFunction= [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    swipe.removedOnCompletion=NO;
    self.strokeEnd = self.strokeEnd + advance;
    [self addAnimation:swipe forKey:@"strokeEnd animation"];
}

@end

我将这个层作为一个UIView的背景层使用：

#import "ProgressView.h"
#import "ProgressLayer.h"

@implementation ProgressView


-(id)initWithCoder:(NSCoder *)aDecoder {
    self=[super initWithCoder:aDecoder];
    if (self) {
        [(ProgressLayer *)self.layer computePath:self.bounds];
    }
    return self;
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    ProgressLayer * l =  self.layer;
    [l showProgress];
}


- (void)drawRect:(CGRect)rect {
    [[UIColor redColor] setStroke];
    UIRectFrame(self.bounds);
}


+(Class)layerClass {
    return [ProgressLayer class];
}

@end

initial state

animation in progress/0

animation in progress/1