将子层定位在动画 UIView 的中心

Question

我有一个 UIView 形状像一个可以扩展和收缩的圆圈。 我需要在其中心放置一个子图层，使其大小与设置动画时的大小保持一致。下面的代码包含四个示例视图，显示了我尝试过的事情。可以原样复制和粘贴。

第一个 UIView 不是动画。它的子图层位于它的中心，但 它必须相对于 UIView 的原点定位。这是一个问题，当 UIView 的边界和原点在动画期间发生变化时。
第二个 UIView 有两个动画：一个用于 @"bounds"，一个用于 @"cornerRadius"。这种安排导致子层最终出现在屏幕的原点（左上角）。
第三个 UIView 也有两个动画：这次是 @"bounds.size" 和 @"cornerRadius"。子层保持相同大小，这很好，但它不会停留在 UIView 的中心。我尝试使用 [thirdView.layer setNeedsDisplayOnBoundsChange:YES]; 来补偿边界变化，但它没有用。我也试过 thirdView.contentMode = UIViewContentModeRedraw;.
第四个 UIView 有一个 @"transform.scale" 的动画，就展开动画而言，这似乎更有效一些。子层像我想要的那样停留在 UIView 的中心，但它不会保持相同的大小。我需要让子层的大小独立，因为我打算为它设置动画。

这是所有代码。看起来很多，其实都是些很简单的东西。

    - (void)viewDidLoad {
    [super viewDidLoad];
    float screenWidth = [UIScreen mainScreen].bounds.size.width;
    float screenHeight = [UIScreen mainScreen].bounds.size.height;

    UIView * firstView = [[UIView alloc] initWithFrame:CGRectMake((screenWidth/4) - 25, (screenHeight/4) - 25, 50, 50)];
    // [firstView.layer setAnchorPoint:CGPointMake(0.5, 0.5)];
    firstView.backgroundColor = [UIColor blueColor];
    firstView.layer.cornerRadius = 25;
    NSLog(@"firstView anchor point %@", [NSValue valueWithCGPoint:firstView.layer.anchorPoint]);

    CALayer * firstLayer = [CALayer layer];
    firstLayer.backgroundColor = [UIColor redColor].CGColor;
    [firstView.layer addSublayer:firstLayer];
    firstLayer.bounds = CGRectMake(0,0, 30, 30);
    firstLayer.cornerRadius = 15;
    firstLayer.position = CGPointMake(firstView.bounds.size.width/2,        firstView.bounds.size.height/2);
    [self.view addSubview:firstView];


    UIView * secondView = [[UIView alloc] initWithFrame:CGRectMake((screenWidth*3/4) - 25, (screenHeight/4) - 25, 50, 50)];
    secondView.backgroundColor = [UIColor blueColor];
    secondView.layer.cornerRadius = 25;

    CALayer * secondLayer = [CALayer layer];
    secondLayer.backgroundColor = [UIColor redColor].CGColor;
    [secondView.layer addSublayer:secondLayer];
    secondLayer.bounds = CGRectMake(0, 0, 30, 30);
    secondLayer.cornerRadius = 15;
    secondLayer.position = CGPointMake(secondView.bounds.size.width/2, secondView.bounds.size.height/2);

    CABasicAnimation * secondViewBoundsAnimation;
    secondViewBoundsAnimation = [CABasicAnimation animation];
    secondViewBoundsAnimation.keyPath = @"bounds";
    secondViewBoundsAnimation.fromValue = [NSValue valueWithCGRect:CGRectMake((screenWidth*3/4) - 25, (screenHeight/4) - 25, 50, 50)];
    secondViewBoundsAnimation.toValue = [NSValue valueWithCGRect:CGRectMake((screenWidth*3/4) - 50, (screenHeight/4) - 50, 100, 100)];

    CABasicAnimation * secondViewCornerRadiusAnimation;
    secondViewCornerRadiusAnimation = [CABasicAnimation animation];
    secondViewCornerRadiusAnimation.keyPath = @"cornerRadius";
    secondViewCornerRadiusAnimation.fromValue = @25;
    secondViewCornerRadiusAnimation.toValue = @50;

    CAAnimationGroup * secondViewAnimationGroup;
    secondViewAnimationGroup = [CAAnimationGroup animation];
    secondViewAnimationGroup.animations = [NSArray arrayWithObjects:secondViewBoundsAnimation, secondViewCornerRadiusAnimation, nil];
    secondViewAnimationGroup.duration = 1.5;
    secondViewAnimationGroup.repeatCount = HUGE_VALF;
    secondViewAnimationGroup.autoreverses = YES;

    [secondView.layer addAnimation:secondViewAnimationGroup forKey:@"secondViewAnimation"];

    [self.view addSubview:secondView];


    UIView * thirdView;
    // [thirdView.layer setAnchorPoint:CGPointMake(0.5, 0.5)];
    thirdView = [[UIView alloc] initWithFrame:CGRectMake((screenWidth/4) - 25, (screenHeight*3/4) -25, 50, 50)];
    thirdView.backgroundColor = [UIColor blueColor];
    thirdView.layer.cornerRadius = 25;
    NSLog(@"thirdView anchor point %@", [NSValue valueWithCGPoint:thirdView.layer.anchorPoint]);

    CALayer * thirdLayer = [CALayer layer];
    thirdLayer.backgroundColor = [UIColor redColor].CGColor;
    [thirdView.layer addSublayer:thirdLayer];
    thirdLayer.bounds = CGRectMake(0, 0, 30, 30);
    thirdLayer.cornerRadius = 15;
    thirdLayer.position = CGPointMake(thirdView.bounds.size.width/2, thirdView.bounds.size.height/2);

    CABasicAnimation * thirdViewSizeAnimation;
    thirdViewSizeAnimation = [CABasicAnimation animation];
    thirdViewSizeAnimation.keyPath = @"bounds.size";
    thirdViewSizeAnimation.fromValue = [NSValue    valueWithCGSize:CGSizeMake(50, 50)];
    thirdViewSizeAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(100, 100)];

    CABasicAnimation * thirdViewCornerRadiusAnimation;
    thirdViewCornerRadiusAnimation = [CABasicAnimation animation];
    thirdViewCornerRadiusAnimation.keyPath = @"cornerRadius";
    thirdViewCornerRadiusAnimation.fromValue = @25;
    thirdViewCornerRadiusAnimation.toValue = @50;

    CAAnimationGroup * thirdViewAnimationGroup;
    thirdViewAnimationGroup = [CAAnimationGroup animation];
    thirdViewAnimationGroup.animations = [NSArray arrayWithObjects:thirdViewSizeAnimation, thirdViewCornerRadiusAnimation, nil];
    thirdViewAnimationGroup.duration = 1.5;
    thirdViewAnimationGroup.repeatCount = HUGE_VALF;
    thirdViewAnimationGroup.autoreverses = YES;

    //    thirdView.contentMode = UIViewContentModeRedraw;
    //    [thirdView.layer setNeedsDisplayOnBoundsChange:YES];
    [thirdView.layer addAnimation:thirdViewAnimationGroup forKey:@"thirdViewAnimation"];

    [self.view addSubview:thirdView];



    UIView * fourthView = [[UIView alloc] initWithFrame:CGRectMake((screenWidth*3/4) - 25, (screenHeight*3/4) - 25, 50, 50)];
    fourthView.backgroundColor = [UIColor blueColor];
    fourthView.layer.cornerRadius = 25;


    CALayer * fourthLayer = [CALayer layer];
    fourthLayer.backgroundColor = [UIColor redColor].CGColor;
    [fourthView.layer addSublayer:fourthLayer];
    fourthLayer.bounds = CGRectMake(0, 0, 30, 30);
    fourthLayer.cornerRadius = 15;
    fourthLayer.position = CGPointMake(fourthView.bounds.size.width/2, fourthView.bounds.size.height/2);

    CABasicAnimation * fourthViewScaleAnimation;
    fourthViewScaleAnimation = [CABasicAnimation animation];
    fourthViewScaleAnimation.keyPath = @"transform.scale";
    fourthViewScaleAnimation.fromValue = @1;
    fourthViewScaleAnimation.toValue = @2;
    fourthViewScaleAnimation.duration = 1.5;
    fourthViewScaleAnimation.repeatCount = HUGE_VALF;
    fourthViewScaleAnimation.autoreverses = YES;

    [fourthView.layer addAnimation:fourthViewScaleAnimation forKey:@"fourthViewAnimation"];

    [self.view addSubview:fourthView];

由于无法更改 UIView 的来源，我需要找到一种方法来完成以下任一操作：

不断更新子图层的位置以补偿不断变化的原点。
使第四个示例中的子层大小不会随着 UIView 的缩放而改变。

我不能做多个 UIView，因为我打算将整个图层添加到 MKAnnotationView。

谢谢！

Answer 1

我想出了一个解决办法，我觉得我没有立即想到它很愚蠢。我可以使用两层。 UIView 不会改变大小。一层展开和收缩，由于 UIView 没有移动，它上面的另一层保持在相同的位置。

将子层定位在动画 UIView 的中心

Positioning sublayer on center of animated UIView

core-animation

calayer

ios

anchorpoint