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

Мне интересно, есть ли способ сделать это, используя 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, но я не смог найти никого.

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

Ответы

Ответ 1

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

Ответ 2

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

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

Действительно хорошая вещь об этих свойствах заключается в том, что они являются анимированными. Анимируя 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"];

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