1

ここに画像の説明を入力してください

上記のような画像のUIImageViewがあるので、画像の形状を徐々に小さくしたり大きくしたりする必要があります。

上記のタスクを実行するには、明らかにマスクを適用する必要があるため、丸みを帯びたCAShapeLayerを作成し、UIImageViewレイヤーに追加しました。半径を変更すると、その量の画像と半径のみが表示されます。

私の問題は、アニメーションを適用してアニメーション形式で表示する方法です。キーフレームアニメーションでは達成できないことを教えてください。

以下は、wrtradiusをマスキングするためのコードです。

// Set up the shape of the circle
int rChange = 0; // Its doing proper masking while changing this value
int radius = 123.5-rChange;

CAShapeLayer *circle = [CAShapeLayer layer];
// Make a circular shape
circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0+rChange, 0+rChange, 2.0*radius, 2.0*radius)
                                         cornerRadius:radius].CGPath;

// Configure the apperence of the circle
[circle setFillColor:[[UIColor blackColor] CGColor]];    
[[self.originalImageView layer] setMask:circle];
self.originalImageView.layer.masksToBounds = YES;

ここで、123.5は画像の最大半径で、originalImageViewはmyUIImageViewです。

4

1 に答える 1

4

半径が変化するアニメーションの茶色の円を表示するだけの場合は、次の2つの変更をお勧めします。

  1. 画像を気にしないでください。を使用して、茶色CAShapeLayerに設定するだけです。fillColor

  2. レイヤーのパスを、幅と高さが1ポイントの円に1回設定します。次に、CAShapeLayer'transformを使用してサイズを変更します。をアニメートできますtransform。

たとえば、次のようにレイヤーを作成します。

CGRect bounds = self.view.bounds;

circleLayer = [CAShapeLayer layer];
circleLayer.fillColor = [UIColor brownColor].CGColor;

    circleLayer.position = CGPointMake（CGRectGetMidX（bounds）、CGRectGetMidY（bounds））;

// Create a circle with 1-point width/height.
circleLayer.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 1, 1)].CGPath;

// Use the layer transform to scale the circle up to the size of the view.
[circleLayer setValue:@(bounds.size.width) forKeyPath:@"transform.scale"];

次に、次のようにサイズを変更できます。

[circleLayer setValue:@(newSize) forKeyPath:@"transform.scale"];

これにより、デフォルトのパラメータを使用して、サイズの変更が暗黙的に（自動的に）アニメーション化されます。異なるアニメーションパラメータを使用する場合は、変換を明示的にアニメーション化できます。

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
animation.fromValue = [circleLayer valueForKeyPath:@"transform.scale"];
animation.toValue = @(newSize);
animation.duration = 3.0;
animation.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut];

// Important: change the actual layer property before installing the animation.
[circleLayer setValue:animation.toValue forKeyPath:animation.keyPath];

// Now install the explicit animation, overriding the implicit animation.
[circleLayer addAnimation:animation forKey:animation.keyPath];
于 2012-10-09T06:40:33.887 に答える