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

图层在其锚点周围缩放，默认情况下是图层框架的中心。这在Core Animation Programming Guide - Specifying a Layer's Geometry中解释。

您的问题是您的圆圈中心与图层的锚点不在同一点。

因此解决问题的一种方法是将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的框架设置为glView的bounds，而不是frame，因为它应该位于其所属视图的坐标系中，而不是超视图。
将shapeLayer的anchorPoint设置为0.5,0.5 - 这是CALayer的默认值（意味着图层的中心），但是根据您的描述，这不是您的形状图层的情况 - 除非框架/边界的事情导致了这个问题。

在圆上设置刻度以保持居中位置

2 个答案: