7

私は次のことを達成しようとしています: ユーザーがビューをタップすると、その左側にいくつかの画像コンテンツを含む円形のビューがポップアップします。ビューは、タッチしたポイントから開始して、タッチされたビューの外側で左にある最終フレームまでアニメーション化する必要があります。アニメーション中は円になり、適切な位置とサイズに成長します

すべてが以下のコードでうまく機能しますが、アニメーション中のみ、円形の境界は左側にのみあります。CALayerシェイプが最終フレームに滑り込むようなものです。

なんかこんな感じです。

ここに画像の説明を入力

アニメーションが完了すると、予想どおり完全な円になります。

CGFloat w = 300;
CGRect frame = CGRectMake(myX, myY, w, w);
CGPoint p = [touch locationInView:self.imageView];
CGRect initialFrame = CGRectMake(p.x, p.y, 0,0);
UIImageView *circle = [[UIImageView alloc] initWithFrame:frame];
circle.image = [UIImage imageNamed:@"china"];
circle.contentMode = UIViewContentModeScaleAspectFill;
circle.backgroundColor = [UIColor clearColor];
circle.layer.borderWidth = 1;
circle.layer.borderColor = [UIColor grayColor].CGColor;
circle.layer.masksToBounds = YES;

CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
CGRect maskRect = CGRectMake(0, 0, w, w);
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddEllipseInRect(path, nil, maskRect);
maskLayer.path = path;
CGPathRelease(path);
circle.layer.mask = maskLayer;

circle.frame = initialFrame;
[self.imageView addSubview:circle];
[UIView animateWithDuration:1.0 animations:^{
    circle.frame = frame;
}];

cornerRadiusので作業してみましたCALayerが、フレーム サイズによって半径も変更する必要があるため、満足のいく結果にはなりません。

4

2 に答える 2

18

フレームをアニメーション化していますが、マスクはアニメーション化していません。円形マスクのサイズは一定のままで、イメージ フレームは左上からフィナーレのフル サイズまでアニメーション化されます。そのため、フィナーレ フレーム サイズに達するまで、画像の左上部分の円形クリッピングが発生します。

これは、アニメーションで基本的に発生することです。 ここに画像の説明を入力

フレームをアニメーション化する代わりに、変換をアニメーション化することを試みることができます (これにより、フィナーレのクリップされた画像が希望どおりに変換されます)。

何かのようなもの：

// Don't animate the frame. Give it the finale value before animation.
circle.frame = frame;

// Animate a transform instead. For example, a scaling transform.
circle.transform = CGAffineTransformMakeScale(0, 0);
[UIView animateWithDuration:1.0 animations:^{
    circle.transform = CGAffineTransformMakeScale(1, 1);
}];
于 2012-10-09T08:05:58.333 に答える
0

サークルビューのautoresizingMaskを試して、左右の余白を柔軟に設定してみましたか？

これはアニメーションで役割を果たし、ビューが「スライド」しているように見える理由を説明している可能性があります。 （少なくとも試してみる価値はあります）

于 2012-10-03T23:42:48.453 に答える