使用 CoreAnimation 或 OpenGL 弯曲/扭曲视图以实现轮播效果

Question

现在我正在用一系列视图填充 UIScrollView。需要扭曲视图以使 UIScrollView 看起来像旋转木马。换句话说，当用户滚动时，它需要像一个圆圈。我以前从未做过类似的事情，但我假设 CoreAnimation 是不可能的，并且需要使用 OpenGL。如果 CoreAnimation 或 Quartz 可以做到这一点，那么我真的只需要一个关于如何扭曲视图的示例，我可以自己解决其余的问题，但我不熟悉 OpenGL。

Answer 1

如果你想扭曲视图，你要么需要 OpenGL，要么你可以使用 Core Animation 的 CAShapLayer，它允许你指定一个可以包含这条曲线的贝塞尔路径。但请记住，您看到的这种弯曲可能只是一种视错觉（尽管在上面的图像中它看起来像一条实际的曲线）。如果您连续获得足够多的具有正确 y 轴旋转的矩形，我认为您可以通过直接核心动画获得您正在寻找的效果。我很确定这就是苹果几年前提供的核心动画演示中的实现方式。以下是该演示视频的屏幕截图：

我稍微搞乱了视图层的变换，然后想出了这个：

- (IBAction)sliderDidChange:(id)sender
{
  CGFloat value = [(UISlider*)sender value];
  CGFloat xOff = value - 0.5;

  CATransform3D trans = CATransform3DIdentity;
  trans.m34 = 1.0f / -1000.0f;

  trans = CATransform3DRotate(trans, degreesToRadians(xOff * -25.0f), 0.0f, 1.0f, 0.0f);
  trans = CATransform3DTranslate(trans, 0.0f, 0.0f, 900.0f * fabs(xOff));
  [[frameView layer] setTransform:trans];

  CGPoint center= [frameView center];
  [frameView setCenter:CGPointMake(1024.0 * value, center.y)];
}

我把它们放在一起演示项目，展示旋转如何响应滑块。它不使用滚动视图，因此您必须对其进行调整，但我认为您可以跟踪当前的滚动偏移并相应地应用变换。不确定它是否有帮助，但确实有帮助。

Answer 2

根据我的经验，获得正确的值有点棘手。提供视图透视的方法是通过操纵它的图层变换。我使用以下方法来实现类似效果的转换：

-(CATransform3D)makeTransformForAngle:(CGFloat)angle from:(CATransform3D)start{

    CATransform3D transform = start;


    // the following two lines are the key to achieve the perspective effect
CATransform3D persp = CATransform3DIdentity;
    persp.m34 = 1.0 / -1000;

    transform = CATransform3DConcat(transform, persp);
        transform = CATransform3DRotate(transform,angle, 0.0, 1.0, 0.0);
    return transform;
}

这样做是为了创建“翻页”动画，因此您可能需要适应。要使用它，请执行以下操作：

flip_page.layer.transform = [self makeTransformForAngle:angle from:CATransform3DIdentity];

其中 Flip_page 是 UIView。干杯!