円の尺度をアニメートして中心位置を維持する

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

これらは推測ではなく、現時点で自分を試してみてくださいすることができます：それは、それが属するビューの座標系であるべきなglViewのboundsに

• 設定shapeLayerのフレームではなく、frame、スーパービューではありません。
• shapeLayerのanchorPointを0.5,0.5に設定する - これはCALayer（レイヤーの中央を意味します）のデフォルトですが、フレーム/境界のものが原因ではない限り、これはシェイプレイヤーではありません問題。