如何在x轴周围翻转UIView，同时切换子视图 [英] How to flip a UIView around the x-axis while simultaneously switching subviews

问题描述

这个问题以前被问过，但是有点不同的方式，我无法得到任何答案工作，我想要的方式，所以我希望有一个伟大的核心动画技能的人可以帮助我。

This question has been asked before but in a slightly different way and I was unable to get any of the answers to work the way I wanted, so I am hoping somebody with great Core Animation skills can help me out.

我在桌子上有一套牌。当用户向上或向下滑动时，该组卡片在桌子上上下移动。在任何给定时间在屏幕上有4张卡片可见，但只有第二张卡片显示它的脸。当用户刷卡时，第二张卡片翻转回其脸部，下一张卡片（取决于滑动方向）落在显示其脸部的位置。

I have a set of cards on a table. As the user swipes up or down the set of cards move up and down the table. There are 4 cards visible on the screen at any given time, but only the second card is showing its face. As the user swipes the second card flips back onto its face and the next card (depending on the swipe direction) lands in it's place showing its face.

我已设置我的卡视图类像这样：

I have set up my card view class like this:

@interface WLCard : UIView {
    UIView *_frontView;
    UIView *_backView;
    BOOL flipped;
}

我试着用这段代码翻转卡：

And I have tried flipping the card using this piece of code:

- (void) flipCard {
    [self.flipTimer invalidate];
    if (flipped){
        return;
    }

    id animationsBlock = ^{
            self.backView.alpha = 1.0f;
            self.frontView.alpha = 0.0f;
            [self bringSubviewToFront:self.frontView];
            flipped = YES;

            CALayer *layer = self.layer;
            CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
            rotationAndPerspectiveTransform.m34 = 1.0 / 500;
            rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, M_PI, 1.0f, 0.0f, 0.0f);
            layer.transform = rotationAndPerspectiveTransform;
    };
    [UIView animateWithDuration:0.25
                          delay:0.0
                        options: UIViewAnimationCurveEaseInOut
                     animations:animationsBlock
                     completion:nil];

}

此代码适用，但它有以下问题我似乎不明白：

This code works but it has the following problems with it that I can't seem to figure out:

1. x轴上的卡只有一半是动画。


2. 一旦翻转，卡片的表面就会颠倒并镜像。


3. 一旦翻转了卡片，我就无法再让动画再次运行。换句话说，我可以运行动画块多次，我想要的，但只有第一次将动画。

另外，请记住，我需要以能够与卡的面部交互。即它上面有按钮。

Also, bear in mind that I need to be able to interact with the face of the card. i.e. it has buttons on it.

如果任何人遇到这些问题，很高兴看到您的解决方案。

If anybody has run into these issues it would be great to see your solutions. Even better would be to add a perspective transform to the animation to give it that extra bit of realism.

推荐答案

原来是这样的，比我想象的方式更简单，我没有使用任何CoreAnimation库来实现的效果。感谢@Aaron Hayman的线索。我使用 transitionWithView：duration：options：animations：completion

This turned out to be way simpler than I thought and I didn't have to use any CoreAnimation libraries to achieve the effect. Thanks to @Aaron Hayman for the clue. I used transitionWithView:duration:options:animations:completion

My implementation inside the container view:

    [UIView transitionWithView:self 
                      duration:0.2 
                       options:UIViewAnimationOptionTransitionFlipFromBottom
                    animations: ^{
                            [self.backView removeFromSuperview];
                            [self addSubview:self.frontView];
                    }
                    completion:NULL];

窍门是 UIViewAnimationOptionTransitionFlipFromBottom 选项。顺便说一下，苹果在他们的文档中有这个位的代码。您还可以添加其他动画到块，如调整大小和移动。

The trick was the UIViewAnimationOptionTransitionFlipFromBottom option. Incidentally, Apple has this exact bit of code in their documentation. You can also add other animations to the block like resizing and moving.

这篇关于如何在x轴周围翻转UIView，同时切换子视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！