iPad 上的 3D 轮播效果

Question

我正在尝试在 iPad 上实现 3D 轮播，由 UIView 组成，效果类似于 这里。

我已经在SO上经历了很多类似的问题，但没有找到任何令人满意的答案或根本没有答案。

我试图通过修改封面流动画来实现效果，但它只是没有给出那种光滑的效果。

有人实现过这个吗？（通过quartz和openGL征求建议）

Answer 1

假设您不介意放弃模糊，则无需深入了解 Quartz 或 OpenGL。您链接到的页面的透视错误（这就是为什么背景中的图像看起来比前景中的图像移动得更快），因此数学可能有点雾里看花。

底部有完整的示例代码。我所做的是使用正弦和余弦来移动一些视图。其背后的基本理论是，位于原点的半径为 r 的圆外侧的角度 a 的点位于 (a*sin(r), a*cos(r))。这是一个简单的极坐标到笛卡尔坐标的转换，从大多数国家向青少年教授的三角学中应该可以清楚地看出；考虑一个斜边长度为 a 的直角三角形——另外两条边的长度是多少？

然后你可以做的是减小 y 部分的半径，将圆形转换为椭圆形。从某个角度看，椭圆看起来有点像圆形。这忽略了透视的可能性，但还是顺其自然吧。

然后我通过使大小与 y 坐标成比例来伪造透视。我正在以类似于您链接到的网站模糊的方式调整 alpha，希望这对您的应用程序来说足够好。

我通过调整我想要操作的 UIView 的仿射变换来影响位置和缩放。我直接在 UIView 上设置 alpha。我还调整了视图图层上的 zPosition（这就是导入 QuartzCore 的原因）。 zPosition 就像 CSS z 位置；它不影响比例，只影响绘图顺序。因此，通过将其设置为等于我计算的比例，它只是说“在较小的事物之上绘制较大的事物”，从而为我们提供了正确的绘制顺序。

手指跟踪是通过在 TouchesBegan/touchesMoved/touchesEnded 循环中一次跟踪一个 UITouch 来完成的。如果没有跟踪任何手指并且开始进行一些触摸，则其中之一将成为正在跟踪的手指。如果它移动，那么转盘就会旋转。

为了产生惯性，我有一个附加到计时器的小方法来跟踪当前角度与前一个刻度的角度。这种差异就像速度一样使用，同时按比例缩小以产生惯性。

计时器在手指向上时启动，因为那时旋转木马应该开始自行旋转。如果转盘停止或放置新的手指，转盘就会停止。

让您填写空白，我的代码是：

#import <QuartzCore/QuartzCore.h>

@implementation testCarouselViewController

- (void)setCarouselAngle:(float)angle
{
    // we want to step around the outside of a circle in
    // linear steps; work out the distance from one step
    // to the next
    float angleToAdd = 360.0f / [carouselViews count];

    // apply positions to all carousel views
    for(UIView *view in carouselViews)
    {
        float angleInRadians = angle * M_PI / 180.0f;

        // get a location based on the angle
        float xPosition = (self.view.bounds.size.width * 0.5f) + 100.0f * sinf(angleInRadians);
        float yPosition = (self.view.bounds.size.height * 0.5f) + 30.0f * cosf(angleInRadians);

        // get a scale too; effectively we have:
        //
        //  0.75f   the minimum scale
        //  0.25f   the amount by which the scale varies over half a circle
        //
        // so this will give scales between 0.75 and 1.25. Adjust to suit!
        float scale = 0.75f + 0.25f * (cosf(angleInRadians) + 1.0);

        // apply location and scale
        view.transform = CGAffineTransformScale(CGAffineTransformMakeTranslation(xPosition, yPosition), scale, scale);

        // tweak alpha using the same system as applied for scale, this time
        // with 0.3 the minimum and a semicircle range of 0.5
        view.alpha = 0.3f + 0.5f * (cosf(angleInRadians) + 1.0);

        // setting the z position on the layer has the effect of setting the
        // draw order, without having to reorder our list of subviews
        view.layer.zPosition = scale;

        // work out what the next angle is going to be
        angle += angleToAdd;
    }
}

- (void)animateAngle
{
    // work out the difference between the current angle and
    // the last one, and add that again but made a bit smaller.
    // This gives us inertial scrolling.
    float angleNow = currentAngle;
    currentAngle += (currentAngle - lastAngle) * 0.97f;
    lastAngle = angleNow;

    // push the new angle into the carousel
    [self setCarouselAngle:currentAngle];

    // if the last angle and the current one are now
    // really similar then cancel the animation timer
    if(fabsf(lastAngle - currentAngle) < 0.001)
    {
        [animationTimer invalidate];
        animationTimer = nil;
    }
}

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad 
{
    [super viewDidLoad];

    // create views that are an 80x80 rect, centred on (0, 0)
    CGRect frameForViews = CGRectMake(-40, -40, 80, 80);

    // create six views, each with a different colour. 
    carouselViews = [[NSMutableArray alloc] initWithCapacity:6];
    int c = 6;
    while(c--)
    {
        UIView *view = [[UIView alloc] initWithFrame:frameForViews];

        // We don't really care what the colours are as long as they're different,
        // so just do anything
        view.backgroundColor = [UIColor colorWithRed:(c&4) ? 1.0 : 0.0 green:(c&2) ? 1.0 : 0.0 blue:(c&1) ? 1.0 : 0.0 alpha:1.0];

        // make the view visible, also add it to our array of carousel views
        [carouselViews addObject:view];
        [self.view addSubview:view];
    }

    currentAngle = lastAngle = 0.0f;
    [self setCarouselAngle:currentAngle];

    /*
        Note: I've omitted viewDidUnload for brevity; remember to implement one and
        clean up after all the objects created here
    */
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    // if we're not already tracking a touch then...
    if(!trackingTouch)
    {
        // ... track any of the new touches, we don't care which ...
        trackingTouch = [touches anyObject];

        // ... and cancel any animation that may be ongoing
        [animationTimer invalidate];
        animationTimer = nil;
        lastAngle = currentAngle;
    }
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    // if our touch moved then...
    if([touches containsObject:trackingTouch])
    {
        // use the movement of the touch to decide
        // how much to rotate the carousel
        CGPoint locationNow = [trackingTouch locationInView:self.view];
        CGPoint locationThen = [trackingTouch previousLocationInView:self.view];

        lastAngle = currentAngle;
        currentAngle += (locationNow.x - locationThen.x) * 180.0f / self.view.bounds.size.width;
        // the 180.0f / self.view.bounds.size.width just says "let a full width of my view
        // be a 180 degree rotation"

        // and update the view positions
        [self setCarouselAngle:currentAngle];
    }
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    // if our touch ended then...
    if([touches containsObject:trackingTouch])
    {
        // make sure we're no longer tracking it
        trackingTouch = nil;

        // and kick off the inertial animation
        animationTimer = [NSTimer scheduledTimerWithTimeInterval:0.02 target:self selector:@selector(animateAngle) userInfo:nil repeats:YES];
    }
}

- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event
{
    // treat cancelled touches exactly like ones that end naturally
    [self touchesEnded:touches withEvent:event];
}

@end

所以相关的成员变量是一个可变数组“carouselViews”，一个计时器“animationTimer”，两个浮点数“currentAngle”和“lastAngle”，以及一个UITouch“trackingTouch” 。显然，您可能想要使用的视图不仅仅是彩色方块，并且您可能想要调整我凭空提取的用于定位的数字。否则，它应该可以工作。

编辑：我应该说，我使用 Xcode 中的 iPhone“基于视图的应用程序”模板编写并测试了这段代码。创建该模板，将我的内容转储到创建的视图控制器中，并添加必要的成员变量进行测试。然而，我意识到触摸跟踪假设 180 度是视图的整个宽度，但 setCarouselAngle: 方法强制轮播始终为 280 点（即 xPosition 上的 100 乘数乘以 2，加上 a 的宽度）看法）。因此，如果您在 iPad 上运行手指跟踪，则会显得太慢。解决方案显然不是假设视图宽度为 180 度，但这留作练习！

Answer 2

不同类型的封面流的伟大开源代码，包括循环代码 - https://github.com/demosthenese/iCarousel

编辑：

存储库的新路径 - https://github.com/nicklockwood /iCarousel