使用 CAShapeLayer 动态绘制填充效果

Question

我一直在尝试使用CAShapeLayer绘制路径，就像这篇优秀的文章中所概述的那样：http://oleb.net/blog/2010/12/animating-drawing-of-cgpath-with-cashapelayer，但我想知道是否有一种方法可以动画填充层。

例如，我有一些文本要在屏幕上绘制，但我只能绘制文本的描边而无法填充。另一个例子，我有一个星形，我想将其动画填充。

使用CAShapeLayer或其他对象是否可以实现这一点？

谢谢！

- Colin Humber

---

你想要什么样的动画？笔画移动？从底部到顶部或从左到右填充？颜色交叉淡入淡出？ - Rob Napier

Answer 1

大多数情况下，代码都是相同的，您只需要为CABasicAnimation的fromValue和toValue设置不同的值即可。我创建了一个类别，返回一个CABasicAnimation：

StrokeEnd动画

+ (CABasicAnimation *)animStrokeEndWithDuration:(CGFloat)dur
                                       delegate:(id)target{
    CABasicAnimation *animLine = 
     [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    [animLine setDuration:dur];
    [animLine setFromValue:[NSNumber numberWithFloat:0.0f]];
    [animLine setToValue:[NSNumber numberWithFloat:1.0f]];
    [animLine setRemovedOnCompletion:NO];
    [animLine setFillMode:kCAFillModeBoth];
    [animLine setDelegate:target];
    [animLine setTimingFunction:
     [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];

    return animLine;
}

fillColor 的动画效果

+ (CABasicAnimation *)animFillColorWithDur:(CGFloat)dur
                                  startCol:(UIColor *)start
                                  endColor:(UIColor *)end
                                  delegate:(id)target{

    CABasicAnimation *animFill = 
     [CABasicAnimation animationWithKeyPath:@"fillColor"];
    [animFill setDuration:dur];
    [animFill setFromValue:(id)start.CGColor];
    [animFill setToValue:(id)end.CGColor];
    [animFill setRemovedOnCompletion:NO];
    [animFill setDelegate:target];
    [animFill setFillMode:kCAFillModeBoth];

    return animFill;
}

返回的 CABasicAnimation 只需添加到 CAShapeLayer 中：

[_myShapeLayer addAnimation:returnedAnimation forKey:@"animKey"]

- Alex Cio

Answer 2

是的，这是可能的。

CAShapeLayers具有可动画填充颜色(fillColor)属性。

它的工作方式与您已经使用动画更改strokeEnd / strokeStart相同。

- C4 - Travis