Анимируйте шкалу по кругу, чтобы сохранить центральное положение

Question

Как я могу сделать масштабирование анимации круга, но сохранить центральное положение круга в той же точке. Этот код заставляет центр круга двигаться вниз и вправо, похоже, что он ограничен рамкой в ​​верхнем и левом углу.

Этот слой, как вы можете видеть маску на другом слое.

CGMutablePathRef path = CGPathCreateMutable();
CGPathAddEllipseInRect(path, nil, CGRectMake(400, 400, 1000, 1000));

CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
[shapeLayer setPath:path];
[shapeLayer setFrame:[glView frame]];
[shapeLayer setFillColor:[[UIColor blackColor] CGColor]];

[[glView layer] setMask:shapeLayer];

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.0, 0.0, 0)];
animation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 1.0)];
animation.repeatCount = 1;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
animation.duration = 3;
[shapeLayer addAnimation:animation forKey:@"transform.scale"];

Answer 1

Слой масштабируется вокруг узловой точки , который по умолчанию является центром кадра слоя. Это объясняется в Руководство по программированию базовой анимации - Задание геометрии слоя .

Ваша проблема в том, что центр вашего круга не совпадает с точкой привязки вашего слоя.

Таким образом, один из способов решения вашей проблемы - переместить shapeLayer.anchorPoint в центр круга, например:

CGRect circleFrame = CGRectMake(400, 400, 1000, 1000);
CGPoint circleAnchor = CGPointMake(CGRectGetMidX(circleFrame) / CGRectGetMaxX(circleFrame),
    CGRectGetMidY(circleFrame) / CGRectGetMaxY(circleFrame));
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:circleFrame];

CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = path.CGPath;
shapeLayer.anchorPoint = circleAnchor;
shapeLayer.frame = glView.frame;
shapeLayer.fillColor = [UIColor blackColor].CGColor;

glView.layer.mask = shapeLayer;
// and then your animation code

Вы хотите установить точку привязки до того, как вы установите кадр, потому что установка точки привязки после установки кадра изменит кадр.

Answer 2

Это догадки, не могу попробовать себя в данный момент:

• Установите для рамки shapeLayer значение bounds glView, а не frame, как должно быть в системе координат представления, которому он принадлежит, а не суперпредставление.
• Установите shapeLayer's anchorPoint равным 0,5,0,5 - это значение по умолчанию для CALayer (имеется в виду центр слоя), но из того, что вы описываете, это не относится к слою формы - если только элемент frame / bounds вызывает проблему.