如何在带圆角的超视图中翻转非全屏UIView？ [英] How do you flip non-fullscreen UIView's in a superview with rounded corners?

问题描述

我正在翻转UIViews类似于Weather应用程序的页面翻转。但是，视图不是全屏视图，并且超视图具有圆角。问题是在翻转动画期间，超视图的圆角用黑色填充到方角。

I'm flipping UIViews similar to the page flip of the Weather app. The views are not fullscreen, though, and the superview has rounded corners. The problem is that during the flip animation the rounded corners of the superview are filled out to the square corners with black.

以下是我设置角落的方法：

Here's how I'm setting the corners:

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

以下是我翻转视图的方式（两个 frontView 和 backView ：

Here's how I'm flipping the views (both frontView and backView are retained):

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 它的圆角填充到黑色的矩形角边。这可以避免吗？我不认为我对Core Animation有足够的了解来解决这个问题。

When I do this, self.view's round corners are filled out to their rectangular corner edges with black. Can this be avoided? I don't think I know enough about Core Animation to solve this.

推荐答案

如果你需要在Core Animation中这样做，你可以通过单独制作动画替换视图来实现。这并不难。下面是如何操作和一些示例代码的说明：

If you need to do this in Core Animation, you would do it by making the animation separately from replacing the views. It's not impossibly difficult. The description of how to do it and some sample code is below:

替换视图例如可以使用：

Replacing the views can for example be done using:

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

动画翻转

困难部分显然是动画（如果你以前从未做过这两件事就把它们放在一起）。

Animating the flip

The difficult part is obviously the animation (and putting both together if you've never done it before).

由于您想要将两个视图翻转为好像它们是纸张的两面，因此当它们面向远方时，您不希望它们中的任何一个出现。这是通过在两个图层上将 doubleSided 属性设置为否来完成的。 （不是双面意味着单面）。

Since you want to flip the two views as if they are two sides of a piece of paper you don't want either of them to appear when they are facing away. This is done by setting the doubleSided property to NO on both layers. (not being double sided means being single sided).

您想要为变换设置动画从身份变换（无变换）到围绕y轴的180度旋转变换（面向后）的前视图，从而从左到右翻转。

You want to animate the transform of the front view from a identity transform (no transform) to a 180 degree rotated transform (facing backwards) around the y-axis so that it flips form left to right.

同时，您希望将后视图的变换从 -180度旋转设置为身份变换。这将使翻转。这两个动画都可以作为基本动画来完成：

At the same time you want to animate the transform of the back view from a -180 degree rotation to an identity transform. This will make flip back. Both of these animations can be done as "basic" animations:

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"];

然后，您可以为其他视图执行相同类型的动画。 （填充模式可防止动画在完成后跳回其原始状态）

You then do the same kind of animation for the other view. (The fill mode prevents the animation from jumping back to its original state after completion)

既然您希望两个动画同时运行并希望在动画结束时运行视图替换代码，则可以使用动画事务。这也允许您配置两个动画在一个地方的显示方式：

Since you want both animations to run at the same time and want your view-replacing code to run when the animation finishes you can use a animation transaction. This will also allow you to configure how both animations look at one place:

[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];

这篇关于如何在带圆角的超视图中翻转非全屏UIView？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！