分页UIScrollView时的缩放效果

Question

我想在我创建的页面UIScrollView上实现"缩放"效果，但我遇到了很多困难。我的目标是，当用户开始滚动到下一个页面时，当前页面会缩小一点。当下一页进入视图时，它会放大，直到变为完全大小。我能找到的最接近一个例子是。。。

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

有人能给我一些如何做到这一点的建议吗？在过去的三天里，我一直在用头撞墙。

Answer 1

我建议您使用分页UIScrollView的scrollView.contentOffset.y来跟踪滚动，并使用该值在UIScrollView中为视图的转换设置动画。

因此，添加分页滚动视图并使self成为委托。

    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;

然后使用委托方法scrollViewDidSoll跟踪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 2

使用此代码滚动查看滚动下一页时的放大，代码如下所示，

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

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

我将在这里发布相关代码：

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

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

yourScrollView的中心可以使用这个漂亮的方法找到：CGPoint point=[self.view convertPoint:ourScrollView.centertoView:*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之间，则可以根据需要执行此操作。我喜欢这种处理事情的方式，而不是滚动浏览。