核心动画动画图层水平翻转 [英] Core animation animating the layer to flip horizontally

问题描述

我有两个视图，我想使用核心动画在两个视图之间切换，为每个视图的图层设置动画。我想要的动画就像 UIViewAnimationOptionTransitionFlipFromLeft 提供的动画，但我无法做到。我可以让图层旋转180，然后当动画停止时我转换到下一个视图。怎么办呢？

I have two views and I want to switch between the two view using core animation, animating the layer of each of the views. The animation I want is like the one provided by UIViewAnimationOptionTransitionFlipFromLeft but I could not manage to do it. I could make the layer rotate 180 and then when the animation stop I transition to the next view. How can this be done?

我用的代码如下：

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
self.view.layer.zPosition = 100;
CATransform3D transform = CATransform3DMakeRotation(M_PI, 0, 1, 0);
[animation setToValue:[NSValue valueWithCATransform3D:transform]];
[animation setDuration:.5];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
[animation setFillMode:kCAFillModeForwards];
[animation setRemovedOnCompletion:YES];
[animation setDelegate:self];

[self.view.layer addAnimation:animation forKey:@"test"];

在委托中我转换到下一个视图。但是，这没有多大意义，动画不像默认动画那样生动。如何实现？

and in the delegate I transition to the next view. But, this does not make much sense and the animation is not as lively as provided by the default animation. how can this be achieved?

推荐答案

如何使其看起来像3D旋转

您的旋转看起来不像在3D空间中发生，因为您的变换没有透视。将变换的 m34 值更改为1.0 / 800.0之类的小值，您应该看到它以透视方式旋转。

How to make it look like a 3D rotation

Your rotation doesn't look like it happens in 3D space because there is no perspective to your transform. Change the m34 value of the transform into something small like 1.0/800.0 and you should see it rotate with perspective.

CATransform3D transform = CATransform3DMakeRotation(M_PI, 0, 1, 0);
transform.m34 = 1.0/800.0;
[animation setToValue:[NSValue valueWithCATransform3D:transform]];

3D变换的值（第三列，第四行）控制变换的透视。如果您想了解更多有关其工作原理的信息，可以阅读有关维基百科上的3D投影的更多信息。

That value (third column, forth row) of the 3D transform controls the perspective of the transform. You can read more about 3D projection on Wikipedia if you want to know more about how it works.

让它看起来像是两个视图是同一视图的两面你应该添加它们旋转背面π度并更改图层的 doubleSided 属性为NO。现在，当他们背对着你时，他们将无法看见。将旋转应用于前后层时，它们将更改哪个层可见。注意：将前部旋转到π度，然后将后部旋转到2π，使其完成旋转并面向您。

To have it seem like the two views are two sides of the same view you should add them rotate the back side π degrees and change the layer's doubleSided property to NO for both layers. Now they won't be visible when facing away from you. As you apply the rotation to both the front and back layer they will change which layer is visible. Note: rotate the front to π degrees and the back to 2π so that it completes it rotation and faces you.

这篇关于核心动画动画图层水平翻转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！