缩放对分页 UIScrollView 的影响？

Question

我想对我创建的分页 UIScrollView 实现 "zoom" 效果，但我遇到了很多困难。我的目标是，当用户开始滚动到下一页时，当前页面会缩小并变小一点。当下一页出现时，它会放大直到变成全尺寸。我能找到的最接近示例的是这个...

https://www.pinterest.com/pin/147141112804210631/

任何人都可以给我一些关于如何完成此操作的指示吗？在过去的 3 天里，我一直在用头撞墙。

Answer 1

使用此代码scrollview在滚动下一页时放大，代码如下，

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{


    GridCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"CollectCell" forIndexPath:indexPath];
    cell.myscrollview.minimumZoomScale = 5.0;
    cell.myscrollview.zoomScale = 5.0;
    cell.myscrollview.contentSize = cell.contentView.bounds.size;
    return cell;
}

如果您更改缩放比例值，它会自动放大或缩小以在滚动下一页或上一页时显示。

希望对您有所帮助。

Answer 2

我建议使用分页 UIScrollView 的 scrollView.contentOffset.y 来跟踪滚动并使用该值来动画化 UIScrollView 内视图的转换.

所以添加你的分页滚动视图并将自己设置为 delegate。

    paginatedScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, [[self view] bounds].size.width, [[self view] bounds].size.height-paginatedScrollViewYOffset)];
    [self.view addSubview:paginatedScrollView];

    paginatedScrollView.pagingEnabled = YES;
    [paginatedScrollView setShowsVerticalScrollIndicator:NO];
    [paginatedScrollView setShowsHorizontalScrollIndicator:NO];
    [paginatedScrollView setAlwaysBounceHorizontal:NO];
    [paginatedScrollView setAlwaysBounceVertical:YES];
    paginatedScrollView.backgroundColor = [UIColor clearColor];

    paginatedScrollView.contentSize = CGSizeMake([[self view] bounds].size.width, [[self view] bounds].size.height*2); //this must be the appropriate size depending of the number of pages you want to scroll

    paginatedScrollView.delegate = self;

然后使用委托方法 scrollViewDidScroll 跟踪 scrollView.contentOffset.y

- (void) scrollViewDidScroll:(UIScrollView *)scrollView {

    NSLog(@"Scroll Content Offset Y: %f",scrollView.contentOffset.y);
    //use here scrollView.contentOffset.y as multiplier with view.transform = CGAffineTransformMakeScale(0,0) or with view.frame to animate the zoom effect

  }

Answer 3

我实际上只是 post 回答了一个非常相似的问题，有人试图使用 UICollectionView 来达到这种效果。我的回答 link 在这里：

相关代码我会post这里：

因此，另一种方法是在 UIScrollViewDidScroll 中设置 CGAffineTransformMakeScale( , )，您可以在其中根据页面与屏幕中心的距离动态更新页面的大小。

对于每个页面，计算其中心到 yourScrollView

中心的距离

yourScrollView 的中心可以使用这个漂亮的方法找到：CGPoint point = [self.view convertPoint:yourScrollView。 center toView:*yourScrollView];

现在设置一个规则，如果页面的中心距离比x远，则页面的大小例如'normal size'，称其为1。越靠近中心，它越接近正常大小的两倍，2.

那么你可以使用下面的if/else思路：

 if (distance > x) {
        page.transform = CGAffineTransformMakeScale(1.0f, 1.0f);
 } else if (distance <= x) {

        float scale = MIN(distance/x) * 2.0f;
        page.transform = CGAffineTransformMakeScale(scale, scale);
 }

实际情况是页面的大小将完全随着您的触摸而变化。如果您还有其他问题，请告诉我，因为我正在写这些大部分内容。

Answer 4

我之前在程式化的应用指南页面上做过一些工作。

对于我来说，我会使用CADisplayLink来跟踪scrollView的contentOffset.x，将值与你的动画过程相关联。不要将您的视图放在 scrollView 上，而是将它们放在此 scrollView 的叠加视图上。

This solution follows the philosophy: Fake it before you make it.

基于CADisplayLink和UIScrollView的物理模拟，您将获得流畅的动画效果。相信我。

Answer 5

您真正想要的不是 UIScrollView，而是具有自定义布局的 UICollectionView。 UICollectionViewLayoutAttributes 有一个 transform 属性可以设置。

例如，在 layoutAttributesForElementsInRect: 中：

override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    guard let attributes = super.layoutAttributesForElementsInRect(rect) else {
        return nil
    }
    return attributes.map { attribute -> UICollectionViewLayoutAttributes in
        if attribute.frame.origin.y < 0 {
            let scale = -attribute.frame.origin.y / attribute.frame.height
            attribute.transform = CGAffineTransformMakeScale(scale, scale)
        }
        return attribute
    }
}

在这里，您将根据元素是否在屏幕上进行过滤（因此不会计算不可见的元素）并检查 y 偏移量是否小于 0。如果是，则采用取反的 y 值与项目高度之间的差异，并将其转换为比例比例。

您可以随心所欲地进行，例如，如果您希望比例介于 1 和 0.5 之间。我喜欢这种处理事情的方式，而不是用滚动视图来处理。

缩放对分页 UIScrollView 的影响？

Zoom Effect on Paging UIScrollView?

zooming

uiscrollview

ios