时间机器风格导航

时间:2011-04-05 09:37:06

标签: xcode ios ipad navigation

我最近一直在为iPhone做一些编程,现在我正冒险进入iPad领域。我想要实现的概念依赖于类似于osx中的时间机器的导航。总之,我有许多可以平移和缩放的视图,就像任何普通视图一样。然而,使用第三维度(在这种情况下为深度)将视图彼此堆叠。用户将导航到任何视图,在这种情况下,选择一个字母,然后应用程序将飞过视图,直到它到达所选字母的视图。

我的问题是:有人可以提供完整的最终代码来解决这个问题吗?开玩笑。 :)我需要的是推动正确的方向,因为我不确定如何开始这样做,以及是否可以使用可用的框架。感谢任何提示

谢谢!

3 个答案:

答案 0 :(得分:4)

核心动画 - 或更具体地说,基于核心动画的UIView动画模型 - 是你的朋友。你可以通过将它们放在父视图中的垂直线上(使用它们的center属性)来创建一个类似Time Machine的界面,让那些更远的那一行缩放比下面的那些稍微小一些( “在他们面前”)(使用他们的transform属性,使用CGAffineTransformMakeScale函数),并设置他们的图层的z-index(使用视图的layer属性获取图层,然后设置它的zPosition),使得更远的线条出现在其他线条的后面。这是一些示例代码。

// animate an array of views into a stack at an offset position (0 has the first view in the stack at the front; higher values move "into" the stack)
// took the shortcut here of not setting the views' layers' z-indices; this will work if the backmost views are added first, but otherwise you'll need to set the zPosition values before doing this
int offset = 0;
[UIView animateWithDuration:0.3 animations:^{
    CGFloat maxScale = 0.8; // frontmost visible view will be at 80% scale
    CGFloat minScale = 0.2; // farthest-back view will be at 40% scale
    CGFloat centerX = 160; // horizontal center
    CGFloat frontCenterY = 280; // vertical center of frontmost visible view
    CGFloat backCenterY = 80; // vertical center of farthest-back view
    for(int i = 0; i < [viewStack count]; i++)
    {
        float distance = (float)(i - offset) / [viewStack count];
        UIView *v = [viewStack objectAtIndex:i];
        v.transform = CGAffineTransformMakeScale(maxScale + (minScale - maxScale) * distance, maxScale + (minScale - maxScale) * distance);
        v.alpha = (i - offset > 0) ? (1 - distance) : 0; // views that have disappeared behind the screen get no opacity; views still visible fade as their distance increases
        v.center = CGPointMake(centerX, frontCenterY + (backCenterY - frontCenterY) * distance);
    }
}];

这就是它的样子,有几个随机颜色的视图:

Sample screenshot of Time Machine-esque effect

答案 1 :(得分:0)

你的意思是右边这样的东西吗? enter image description here

如果是,那应该是可能的。您必须在图像上排列视图,并将它们向前和向后动画。据我所知,没有任何框架。

答案 2 :(得分:-2)

它叫做Cover Flow,也可以在iTunes中用来查看艺术作品/专辑。 Apple似乎从第三方购买了这项技术,并获得了专利。但是,如果你谷歌为ios封面流程,你将获得大量的点击和代码,以指出你正确的方向。

我没有看,但会认为它可能在iOS库中,但我不确定。