Question

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

顶部和底部的项目比靠近中心的物体更靠近屏幕边缘。

Answer 1

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

首先，已经使用IBOutlet设置了与myScrollView的连接，并将其连接到xib中的scrollview。然后我在viewDidLoad中设置了scrollview：

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一起放在scrollview中。它们均匀分布，并且滚动视图的大小正确。现在，这些项目大致直接排列在我的滚动视图的中心。为了给它们一个曲线，我们添加以下方法：

- (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

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

曲线动画 - 按x和y移动UIViews，根据x移动缩放视图（曲线越往上越小）

添加和减去单元格的函数

向每个单元格显示/添加内容的功能

上下移动细胞的功能

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

沿曲线滚动

2 个答案: