UIScrollView 分页动画

Posted 2023-02-25

【中文标题】UIScrollView 分页动画

【英文标题】：UIScrollView paging with animation

【发布时间】：2015-11-26 20:29:41

【问题描述】：

我使用 UIScrollView 实现了以下功能并启用了分页。

我希望滚动视图的中心元素显示得比其他元素大一点。当滚动视图根据其位置滚动时，需要增加/减少文本标签的字体。

我尝试使用转换，但运气不好。

添加标签的代码：

array = [[NSMutableArray alloc] init];

for(int i=0;i<10;i++)
    UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(x, 0, 150, 50)];
    label.text = [NSString stringWithFormat:@"ID - %d",i];
    label.textAlignment = UITextAlignmentCenter;
    x +=150;
    [self.scrollView addSubview:label];
    [array addObject:label];


[self.scrollView setContentSize:CGSizeMake(x, 50)];

我在 ScollViewDidScroll 中执行的动画

float position = label.center.x - scrollView.contentOffset.x;
float offset = 2.0 - (fabs(scrollView.center.x - position) * 1.0) / scrollView.center.x;
label.transform = CGAffineTransformIdentity;
label.transform = CGAffineTransformScale(label.transform,offset, offset);

代码：到目前为止我所取得的成就：

https://www.dropbox.com/s/h2q4qvg3n4fi34f/ScrollViewPagingPeeking.zip?dl=0

【问题讨论】：

进行仿射变换是做到这一点的方法。根据您在 UIScrollViewDelegate 中更新 scrollViewDidScroll: 中的转换的单元格位置将其应用于标签。你遇到了什么问题？

它曾经是从大到小而不是从小到大的动画。它立即像流行音乐一样出现。我编辑了答案。

【参考方案1】：

不要使用滚动视图，使用 UICollectionView 和使 collectionView 单元格随着屏幕尺寸变大。

并启用它的分页属性而不是使用它的委托方法。

这是一种更可取和更有效的分页方式。

【讨论】：

我什至尝试使用 UICollectionView 但我仍然无法实现动画。

【参考方案2】：

它将使用集合视图工作。返回根据位置计算变换比例的布局属性。子类化您正在使用的 UICollectionViewLayout（可能是 UICollectionViewFlowLayout）。为了使基于位置的大小调整起作用，您应该重写它的一些方法：

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds

    return YES;


- (NSArray*)layoutAttributesForElementsInRect:(CGRect)rect

    NSArray *array = [super layoutAttributesForElementsInRect:rect];

    for (UICollectionViewLayoutAttributes *attributes in array)
    
        [self updateLayoutAttributesForItemAtIndexPath:layoutAttributes];
    

    return array;


- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath

    UICollectionViewLayoutAttributes *layoutAttributes = [super layoutAttributesForItemAtIndexPath:indexPath];
    [self updateLayoutAttributesForItemAtIndexPath:layoutAttributes]; 


- (UICollectionViewLayoutAttributes *)updateLayoutAttributesScaleForPosition:(UICollectionViewLayoutAttributes *)layoutAttributes

    // NOTE: Your code assigning an updated transform scale based on the cell position here

    return layoutAttributes;

您可能缺少的主要内容是对 shouldInvalidateLayoutForBoundsChange: 方法的覆盖

【讨论】：

我尝试使用它，但仍然搞砸了一切。在集合视图中，如果启用了分页并且剪辑到边界不是，则它仅在滚动时显示上一个和下一个项目。动画我仍然无法实现。