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

Question

现在我正在使用一系列视图填充UIScrollView。需要对视图进行扭曲以使UIScrollView看起来像旋转木马。换句话说，当用户滚动时，它需要像一个圆圈。我之前从未做过这样的事情，但我认为CoreAnimation是不可能的，需要使用OpenGL。如果使用CoreAnimation或Quartz可以实现这一点，那么我真的需要一个关于如何扭曲视图的示例，我可以自己解决剩下的问题，但我不熟悉OpenGL。

Answer 1

如果你想要扭曲视图，你需要使用OpenGL，或者你可以使用Core Animation的CAShapLayer，它允许你指定一个可以在其中包含此曲线的bezier路径。但请记住，您所看到的这种弯曲可能只是一种视错觉（尽管在您上方的图像中看起来像是一条实际的曲线）。如果你有足够的矩形和正确的y轴旋转连续，我想你可以用直接的核心动画来提出你正在寻找的效果。我很确定这是几年前Apple提供的Core Animation演示中的实现方式。以下是该演示文稿视频的屏幕截图：

我把视图层的变换弄乱了一点，然后想出了这个：

- (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)];
}

我把a demo project放在一起，显示了旋转如何响应滑块。它不使用滚动视图，因此您必须对其进行调整，但我认为您可以跟踪当前滚动偏移并相应地应用转换。不确定它是否会有所帮助，但它确实存在。

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。干杯！