Размер анимации кривой Безье

Question

Я хочу создать круговую дугу кривой безье, а затем оживить ее, чтобы уменьшить радиус кривой.

В настоящее время у меня есть следующий код, чтобы нарисовать свою кривую Безье в UIView:

UIView * curveView = [[UIView alloc] initWithFrame:CGRectMake(50, 550, 100, 100)]; 
curveView.backgroundColor = [UIColor orangeColor]; 

UIBezierPath * aPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) 
                radius:75 
               startAngle:0 
                endAngle:2 * M_PI 
                clockwise:YES]; 

CAShapeLayer * shapeLayer = [CAShapeLayer layer]; 
shapeLayer.path = aPath.CGPath; 
shapeLayer.fillColor = [UIColor colorWithRed:.5 green:1 blue:.5 alpha:1].CGColor; 
shapeLayer.strokeColor = [UIColor blackColor].CGColor; 
shapeLayer.lineWidth = 2; 

[curveView.layer addSublayer:shapeLayer]; 

[self.view addSubview:curveView]; 

Это добавляет круговой кривой Безье к представлению, как и ожидалось. Проблема, с которой я сталкиваюсь, - оживить, чтобы кривая сократилась в течение определенного периода времени.

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

Просмотрев много ответов на различные вопросы по Stackoverflow, кажется, что мне, возможно, понадобится использовать CABasicAnimation, но вопросы в основном предназначены для анимации кривой линии, а не длины линии.

Эта проблема сложна, поскольку метод, используемый для рисования линии (начальная точка, серия путей, конечная точка), очень отличается от метода рисования круга. Это означает, что я не знаю, будет ли процесс, который я ищу, будет тем же или другим. Ответ here, похоже, имеет решение для анимации строки, но мой код для создания круга не использует начальные или конечные точки, что означает, что это не очень помогает.

Я подумал об использовании отдельных дуг, чтобы создать круг, а затем изменить их начальные точки и контрольные точки, но эти дуги не кажутся совершенно круговыми и более привычны для пользовательских линий вигглей. Вот пример этого here, но это не для iOS.

Answer 1

path - анимационное свойство на CAShapeLayer. Если вы создаете вторую, меньшую версию вашего кругового пути, вы можете анимировать между этими двумя путями так же, как и любое другое анимационное свойство.

UIBezierPath *smallerPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:25 /* note different radius */ startAngle:0 endAngle:2 * M_PI clockwise:YES]; 

CABasicAnimation *shrinkAnimation = [CABasicAnimation animationWithKeyPath:@"path"]; 
shrinkAnimation.fromValue = (id)aPath.CGPath; 
shrinkAnimation.toValue = (id)smallerPath.CGPath; 
shrinkAnimation.duration = 1; 
[shapeLayer addAnimation:shrinkAnimation forKey:@"shrink"];