3

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

这是我设置角落的方式：

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

4

2 回答 2

5

如果您需要在 Core Animation 中执行此操作，您可以通过将动画与替换视图分开来完成。这不是不可能的困难。如何做到这一点的描述和一些示例代码如下：

替换视图

例如，可以使用以下方法替换视图：

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

动画翻转

困难的部分显然是动画（如果您以前从未做过，请将两者放在一起）。

只显示两个视图的前面

由于您想将这两个视图翻转，就好像它们是一张纸的两侧一样，您不希望它们中的任何一个在它们背对时出现。这是通过在两个图层上设置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"];

然后，您为另一个视图执行相同类型的动画。（填充模式防止动画完成后跳回原来的状态）

把它们放在一起

由于您希望两个动画同时运行，并希望在动画完成时运行视图替换代码，您可以使用动画事务。这也将允许您配置两个动画在一个地方的外观：

[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 回答