Блог

Главная - Вопросы по программированию - Анимировать рисование заливки слоя CAShapeLayer

Анимировать рисование заливки слоя CAShapeLayer

#ios #animation #core-animation #calayer #cashapelayer

#iOS #Анимация #ядро-анимация #calayer #слой cashapelayer

Вопрос:

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

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

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

Спасибо!

Комментарии:

1. Какой вид анимации вы имеете в виду? Движущийся штрих? Заполнение снизу вверх или слева направо? Перекрестный выцветший цвет?

Ответ №1:

Большую часть времени используется один и тот же код, вам просто нужно установить разные значения для fromValue и toValue для вашего CABasicAnimation . Я создал категорию, которая возвращает мне CABasicAnimation :

Анимация для завершения штриха

   (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"]

Ответ №2:

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

CAShapeLayers имеют свойство fillColor, которое можно анимировать.

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