沿曲线滚动

Question

我正在尝试获得沿弯曲路径滚动 uitableview 的效果。基本上它就像屏幕一侧的凸出的tableview，就好像它是一个大圆圈的一侧。我不想使用图形效果来扭曲 tableview，因为文本会变得更难阅读。

顶部和底部的项目会比靠近中心的对象更靠近屏幕边缘。

Answer 1

这就是我想出的。此处非常粗略的演示作为概念证明。

首先，与 myScrollView 的连接已经使用 IBOutlet 设置并连接到 xib 中的滚动视图。 然后我在 viewDidLoad 中设置了滚动视图：

int scrollItems = 20;
viewSize = 120;
viewItems = [[NSMutableArray alloc] init];
[myScrollView setContentSize:CGSizeMake(myScrollView.frame.size.width, (viewSize*1.25)*scrollItems)];
for(int i = 0; i < scrollItems; i++){
    UIView *thisView = [[UIView alloc] initWithFrame:CGRectMake(myScrollView.frame.size.width/2, i*(viewSize*1.25), viewSize, viewSize)];
    [thisView setBackgroundColor:[UIColor blueColor]];  // spaced out blue squares
    [myScrollView addSubview:thisView];
    [viewItems addObject:thisView];
}
[myScrollView setDelegate:self];
[myScrollView setContentOffset:CGPointMake(0, 1)]; // to force initial items to curve

}

这会将项目与全局 NSMutableArray 一起放入滚动视图中。它们均匀分布，并且滚动视图的大小适合它们。现在，这些项目大致在我的滚动视图的中心垂直排列。为了给它们一个曲线，我们添加了以下方法：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
float start = [scrollView contentOffset].y;    
float height = scrollView.frame.size.height;
float end = start + height;  // change so it doesn't scoot views past the end

float viewOffset, viewTop;

int index = 0;
for(UIView *thisView in viewItems){
    viewTop = thisView.frame.origin.y+thisView.frame.size.height;
    if((viewTop>start)&&(thisView.frame.origin.y<end)){ // our visible range
        viewOffset = thisView.frame.origin.y - start;
        CGRect tempFrame = thisView.frame;
        tempFrame.origin.x = 90 - sin((viewOffset / height)*4)*80;
        thisView.frame = tempFrame;
        index++;
    }
}

}

这基本上使用正弦波将可见范围内的每个项目移动适当的数量。所以顶部和底部的项目几乎没有调整，中间的项目被滑得最远。就像半个正弦波转向了一边。

它实际上运行起来非常流畅，就像在我的第一代 iPad 上一样。我真的很喜欢它。几种加快速度的方法...准确计算内容区域中的哪些视图并且只触及那些视图，现在我正在从头到尾检查每个项目，这是一种浪费。此外，预先缓存 sin() 值可能是值得的。另一件事是scrollViewDidScroll可以在没有可见变化的情况下在同一位置更新2或3次重做所有内容，因此很多详细项目可能经常无法刷新。

享受吧。

Answer 2

我认为您需要一个带有核心动画的自定义类。我对制作贝塞尔曲线知之甚少，但基本上你想要一个装满 5 个单元格视图的整体视图容器。如果您向上移动，顶视图是“removeFromSuperview-ed”，并且您在底部添加一个新单元格。其他四个单元格动画到贝塞尔曲线上的下一个定义位置。应该不会太难，我认为你最需要弄清楚的是：

曲线动画 - 通过 x 和 y 移动 UIView，根据 x 移动缩放视图（曲线越上或越下越小）

添加和减去单元格的函数

向每个单元格显示/添加内容的函数

上下移动单元格的函数

理想情况下，这将是自包含的。看看你能不能找到类似教程的自定义封面流程，我认为这与不同的动画相似。