Анимация рисования заливки CAShapeLayer

Question

Я играл с рисованием контура, используя CAShapeLayer, как описано в этой замечательной статье, http://oleb.net/blog/2010/12/animating-drawing-of-cgpath-with-cashapelayer,, но мне интересно, есть ли способ оживить заполнение слоя.

Например, у меня есть текст, который я хочу нарисовать на экране, но я смог нарисовать только обводку текста, а не заливку.Другой пример, у меня есть форма звезды, которую я хотел бы анимировать, чтобы она была заполнена.

Возможно ли это с помощью CAShapeLayer или другого объекта?

Спасибо!

Answer 1

В большинстве случаев это один и тот же код, вам просто нужно установить разные значения для fromValue и toValue вашего CABasicAnimation. Я создал категорию, которая возвращает мне 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"]

Answer 2

Да, это возможно.

CAShapeLayers имеет свойство fillColor, которое является анимируемым.

Это работает так же, как и изменение strokeEnd / strokeStart, как вы уже сделали с вашиманимация.