UIView动画翻转，轴位于视图顶部

问题描述

我有一个 UIView 我想制作动画。这与 UIViewAnimationOptionTransitionFlipFromTop 不同，因为这会将轴放在视图的中间。我想使轴位于视图的 top 处，以便其翻转类似于纸张从 top轴翻转的方式（不是页面剥离）。

I have a UIView that I would like to animate a flip up. This isn't like UIViewAnimationOptionTransitionFlipFromTop because that places that axis in the middle of the view. I would like to have the axis at the top of the view, so that it flips up similar to how a pad of paper flips from the top axis (NOT a page peel).

[UIView transitionWithView:self.view duration:0.6
                   options:UIViewAnimationOptionTransitionFlipFromTopAxis // <---- Wish there was an option like this
                animations:^{
                    // Exchange the views here


                } completion:NULL];

我认为使用标准的 UIView无法做到这一点动画选项。

I am thinking it isn't possible to do this with the standard UIView animation options. What is the alternative to this, where I can control the flip axis?

推荐答案

最简单的方法可能是封装视图您想翻转一个更高，偏移，透明的容器视图，然后翻转该容器。换句话说：

The simplest way would probably be to enclose the view you want to flip in a taller, offset, transparent container view and then flip that container. In other words:

  |-----|
  |     |
  |  B  |
  |     |
0 |     |
  ||---||
  || A ||
  ||---||
  |-----|

A是您想要向上翻转的视图； B是容器； 0是屏幕的顶部。将转换应用于B；通过在其中间翻转B，可以在其顶部翻转A。

A is the view you want to flip up; B is the container; 0 is the top of the screen. Apply your transition to B; by flipping B across its middle, you flip A along its top.

您还可以做一些更复杂的事情，只需使用Core Animation自己实现翻转，但这是一个

You could also do something more complicated and just implement the flip yourself using Core Animation, but this is a bit easier.

编辑

如果您想使用Core Animation方法，基本上您需要做的是将CATransform3D应用于图层以使其绕水平轴旋转，即 theLayer.transform = CATransform3DMakeRotation（M_PI，1，0，0）。但是，这会使它翻转到中间，这是您不想要的，因此您还需要将图层的 anchorPoint 从其默认值<$ c更改为$ c>（0.5，0.5）到（0.5，0），以便其原点位于其上边缘的中心。您可能还想使用CATransform3D的 m34 成员将透视效果应用于翻转转换，如。

If you want to take the Core Animation approach, basically what you need to do is apply a CATransform3D to the layer to rotate it around the horizontal axis, i.e. theLayer.transform = CATransform3DMakeRotation(M_PI, 1, 0, 0). That’ll flip it across its middle, though, which is what you don’t want, so you also need to change the layer’s anchorPoint from its default value of (0.5, 0.5) to (0.5, 0) so that its "origin" is at the center of its top edge. You might also want to apply a perspective effect to the flip transformation using the CATransform3D’s m34 member, as described here.

这篇关于UIView动画翻转，轴位于视图顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！