Я пытаюсь изменить круг на квадрат и наоборот, и я почти на месте. Однако это не оживляет, как ожидалось. Мне бы хотелось, чтобы все углы квадрата были анимированы/трансформированы одновременно, но я получаю следующее:
Я использую CAShapeLayer и CABasicAnimation, чтобы анимировать свойство формы.
Вот как я создаю круговую дорожку:
- (UIBezierPath *)circlePathWithCenter:(CGPoint)center radius:(CGFloat)radius
{
UIBezierPath *circlePath = [UIBezierPath bezierPath];
[circlePath addArcWithCenter:center radius:radius startAngle:0 endAngle:M_PI/2 clockwise:YES];
[circlePath addArcWithCenter:center radius:radius startAngle:M_PI/2 endAngle:M_PI clockwise:YES];
[circlePath addArcWithCenter:center radius:radius startAngle:M_PI endAngle:3*M_PI/2 clockwise:YES];
[circlePath addArcWithCenter:center radius:radius startAngle:3*M_PI/2 endAngle:M_PI clockwise:YES];
[circlePath closePath];
return circlePath;
}
Вот квадратный путь:
- (UIBezierPath *)squarePathWithCenter:(CGPoint)center size:(CGFloat)size
{
CGFloat startX = center.x-size/2;
CGFloat startY = center.y-size/2;
UIBezierPath *squarePath = [UIBezierPath bezierPath];
[squarePath moveToPoint:CGPointMake(startX, startY)];
[squarePath addLineToPoint:CGPointMake(startX+size, startY)];
[squarePath addLineToPoint:CGPointMake(startX+size, startY+size)];
[squarePath addLineToPoint:CGPointMake(startX, startY+size)];
[squarePath closePath];
return squarePath;
}
Я применяю круговую траекторию к одному из моих слоев просмотра, устанавливаю заливку и т.д. Он отлично отрисовывается. Затем в моем селекторе жеста Recognizer я создаю и запускаю следующую анимацию:
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
animation.duration = 1;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.fromValue = (__bridge id)(self.stateLayer.path);
animation.toValue = (__bridge id)(self.stopPath.CGPath);
self.stateLayer.path = self.stopPath.CGPath;
[self.stateLayer addAnimation:animation forKey:@"animatePath"];
Как вы можете заметить в circlePathWithCenter:radius: и squarePathWithCenter:size:, я следую предложению отсюда (чтобы иметь одинаковое количество сегментов и контрольных точек):
Плавная анимация смещения формы
Анимация выглядит лучше, чем в сообщении сверху, но она все еще не та, которую я хочу достичь :(
Я знаю, что могу сделать это с помощью простого CALayer, а затем установить соответствующий уровень cornerRadius, чтобы сделать круг из квадрата/прямоangularьника, и после этого свойства анимировать cornerRadius, чтобы изменить его с круга на квадрат, но я по-прежнему крайне любопытно, возможно ли это сделать с помощью анимации CAShapeLayer и path.
Заранее спасибо за помощь!
