3

Weatherアプリのページめくりに似たUIViewをめくっています。ただし、ビューはフルスクリーンではなく、スーパービューは角が丸くなっています。問題は、フリップアニメーション中に、スーパービューの丸みを帯びた角が四角い角に黒で塗りつぶされることです。

これが私がコーナーを設定する方法です：

self.view.layer.cornerRadius = 15.0f;
self.view.clipsToBounds = YES;

これが私がビューを反転させる方法です（両方frontViewとbackView保持されます）：

UIView *toView;
UIView *fromView;
UIViewAnimationOptions animationType;

if (toFront) {
    toView = self.frontView;
    fromView = self.backView;
    animationType = UIViewAnimationOptionTransitionFlipFromLeft;
} else {
    toView = self.backView;
    fromView = self.frontView;
    animationType = UIViewAnimationOptionTransitionFlipFromRight;
}

[UIView transitionFromView:self.fromView
                    toView:self.toView
                  duration:1
                   options:animationType
                completion:nil];

これを行うと、self.viewの丸い角が長方形の角の端まで黒で塗りつぶされます。これは避けられますか？私はこれを解決するためにCoreAnimationについて十分に知っているとは思いません。

4

2 に答える 2

5

Core Animationでこれを行う必要がある場合は、ビューを置き換えるのとは別にアニメーションを作成することで行います。それは不可能なほど難しいことではありません。それを行う方法の説明といくつかのサンプルコードを以下に示します。

ビューを置き換える

ビューの置き換えは、たとえば次を使用して実行できます。

[UIView transitionFromView:self.fromView
                    toView:self.toView
                  duration:0.0
                   options:UIViewAnimationOptionTransitionNone
                completion:nil];

フリップのアニメーション

難しいのは明らかにアニメーションです（これまでに行ったことがない場合は、両方を組み合わせます）。

両方のビューの前面のみを表示

2つのビューを紙の両面であるかのように反転させたいので、反対側を向いているときにどちらも表示されないようにします。これは、両方のレイヤーでdoubleSidedプロパティをNOに設定することによって行われます。（両面でないということは、片面であることを意味します）。

フリップを作る

正面図の変換を、アイデンティティ変換（変換なし）からy軸を中心に180度回転した変換（後ろ向き）にアニメーション化して、フォームを左から右に反転させます。

同時に、-180度の回転からアイデンティティ変換への背面図の変換をアニメーション化する必要があります。これにより、裏返しになります。これらのアニメーションは両方とも、「基本的な」アニメーションとして実行できます。

CABasicAnimation *flipAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
[flipAnimation setFromValue:[NSValue valueWithCATransform3D:CATransform3DIdentity]]; // No rotation
[flipAnimation setToValue:[NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI, 0,1,0)]]; // Rotate PI around Y
[flipAnimation setFillMode:kCAFillModeBoth];
[flipAnimation setRemoveOnCompletion:NO];
[flippingView layer] addAnimation:flipAnimation forKey:@"myFlipAnimation"];

次に、他のビューに対して同じ種類のアニメーションを実行します。（塗りつぶしモードでは、アニメーションが完了後に元の状態に戻るのを防ぎます）

すべてを一緒に入れて

両方のアニメーションを同時に実行し、アニメーションの終了時にビュー置換コードを実行する必要があるため、アニメーショントランザクションを使用できます。これにより、両方のアニメーションが1つの場所でどのように表示されるかを構成することもできます。

[CATransaction begin];
[CATransaction setAnimationDuration:2.0]; // 2 seconds
[CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[CATransaction setCompletionBlock:^{
    // Your view replacing code here...
}];
// Add the animations to both views here...
[CATransaction commit];
于 2012-05-23T21:23:59.140 に答える
0

これが私が書いたものです。正常に動作しているようですが、もちろん、自分でテストしてください。

注意事項：

  • このメソッドを呼び出す前に、アニメーション化するビューを追加する必要があります。

  • このメソッドはビューを削除しないため、必要に応じて完了ブロックを使用してビューを削除します。

  • このメソッドは、ビューの「レイヤーモデル」値も変更しないため、アニメーション後と同じままになります。

`

+ (void)flipRight:(BOOL)flipRight fromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration completion:(void (^)(void))completionBlock {

// Save original values
BOOL fromViewDoubleSided = fromView.layer.doubleSided;
BOOL toViewDoubleSided = toView.layer.doubleSided;
BOOL fromViewUserInteractionEnabled = fromView.userInteractionEnabled;
BOOL toViewUserInteractionEnabled = toView.userInteractionEnabled;

// We don't want to see the other side of the layer
fromView.layer.doubleSided = NO;
toView.layer.doubleSided = NO;

// We don't want user to fire off animation while its already going
fromView.userInteractionEnabled = NO;
toView.userInteractionEnabled = NO;

[CATransaction begin];

[CATransaction setCompletionBlock:^{

    // Restore original values
    fromView.layer.doubleSided = fromViewDoubleSided;
    toView.layer.doubleSided = toViewDoubleSided;
    fromView.userInteractionEnabled = fromViewUserInteractionEnabled;
    toView.userInteractionEnabled = toViewUserInteractionEnabled;

    if (completionBlock) completionBlock();
}];

CATransform3D flipOutTransform3D = CATransform3DMakeRotation(M_PI, 0,1,0);
flipOutTransform3D.m34 = 1.0/(300.0*(flipRight ? -1 : 1));
CABasicAnimation *flipOutAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
flipOutAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
flipOutAnimation.toValue = [NSValue valueWithCATransform3D:flipOutTransform3D];
flipOutAnimation.duration = duration;

CATransform3D flipInTransform3D = CATransform3DMakeRotation(M_PI, 0,1,0);
flipInTransform3D.m34 = 1.0/(300.0*(flipRight ? 1 : -1));
CABasicAnimation *flipInAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
flipInAnimation.fromValue = [NSValue valueWithCATransform3D:flipInTransform3D];
flipInAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
flipInAnimation.duration = duration;


[fromView.layer addAnimation:flipOutAnimation forKey:@"flipOutAnimation"];
[toView.layer addAnimation:flipInAnimation forKey:@"flipInAnimation"];

[CATransaction commit];
};
于 2015-03-17T17:46:52.413 に答える