Question

我想在我创建的分页UIScrollView上实现“缩放”效果，但是我遇到了很多困难。我的目标是当用户开始滚动到下一页时，当前页面缩小以变得更小。当下一页进入视图时，它会放大直到它变成完整尺寸。我能找到的最接近的例子是......

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

有人能给我一些关于如何实现这一目标的指示吗？在过去的3天里，我一直在撞墙。

Answer 1

使用此代码滚动视图滚动下一页时放大，代码如下，

-(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中的视图转换设置动画。

因此，请添加您的分页滚动视图，并将自己设为委托。

    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

我实际上刚刚发布了一个非常相似的问题的答案，其中有人尝试使用UICollectionView来实现此效果。我的答案链接在这里：https://stackoverflow.com/a/36710965/3723434

我将在此处发布的相关代码：

另一种方法是在UIScrollViewDidScroll中设置CGAffineTransformMakeScale（，），根据它们与屏幕中心的距离动态更新页面的大小。

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

中心的距离

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

现在设置一条规则，如果页面的中心距离x远，则页面的大小例如是“正常大小”，称之为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的叠加视图上。

此解决方案遵循以下理念：在制作之前先假装它。

基于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上缩放效果？

5 个答案: