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

我汇总了一个演示项目,该项目显示了旋转如何响应滑块.它不使用滚动视图,因此您必须对其进行调整,但我认为您可以跟踪当前滚动偏移并相应地应用转换.不确定它是否会有所帮助,但它确实存在.

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.干杯!