Как оживить рисунок CGPath?

Question

Мне интересно, есть ли способ сделать это с помощью Core Animation. В частности, я добавляю подслой в пользовательский NSView со слоем и устанавливаю его делегат в другой пользовательский NSView. Метод drawInRect этого класса рисует один CGPath:

- (void)drawInRect:(CGRect)rect inContext:(CGContextRef)context
{
    CGContextSaveGState(context);
    CGContextSetLineWidth(context, 12);

    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, NULL, 0, 0);
    CGPathAddLineToPoint(path, NULL, rect.size.width, rect.size.height);

    CGContextBeginPath(context);
    CGContextAddPath(context, path);
    CGContextStrokePath(context);
    CGContextRestoreGState(context);
}

Мой желаемый эффект - анимация рисования этой линии. То есть, я бы хотел, чтобы линия на самом деле «растягивалась» анимацией. Кажется, что был бы простой способ сделать это с помощью Core Animation, но я не смог найти ни одного.

Есть ли у вас какие-либо предложения относительно того, как мне достичь этой цели?

Answer 1

Я нашел этот пример анимированных путей и хотел бы поделиться им с кем-то, кто ищет, как это сделать, с некоторыми примерами кода.

Вы будете использовать CAShapeLayer's strokeStart и strokeEnd, для которых требуется SDK 4.2, поэтому, если вы хотите поддерживать более старые iOS SDK, к сожалению, это не то, что вам нужно.

Действительно хорошая особенность этих свойств в том, что они анимируемые. Анимируя значение strokeEnd от 0.0 до 1.0 в течение нескольких секунд, мы можем легко отобразить путь в том виде, в котором он рисуется:

CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 10.0;
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
[self.pathLayer addAnimation:pathAnimation forKey:@"strokeEndAnimation"];

Наконец, добавьте второй слой, содержащий изображение пера, и используйте CAKeyframeAnimation для анимации по пути с той же скоростью чтобы сделать иллюзию совершенной:

CAKeyframeAnimation *penAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
penAnimation.duration = 10.0;
penAnimation.path = self.pathLayer.path;
penAnimation.calculationMode = kCAAnimationPaced;
[self.penLayer addAnimation:penAnimation forKey:@"penAnimation"];

Какой источник можно посмотреть здесь и демонстрационное видео здесь . Прочитайте создателей блог для получения дополнительной информации.

Answer 2

Конечно, не проводите черту самостоятельно. Добавьте подслой высотой 12 пикселей с плоским фоновым цветом, начиная с рамки нулевой ширины и анимируя по ширине вашего вида. Если вам нужно, чтобы концы были закруглены, установите слой cornerRadius равным половине его высоты.