动画UICollectionViewCell时bounds.size和frame.size之间的相关性是啥

Posted 2023-03-08

【中文标题】动画UICollectionViewCell时bounds.size和frame.size之间的相关性是啥

【英文标题】：What is the correlation between bounds.size and frame.size when animating UICollectionViewCell动画UICollectionViewCell时bounds.size和frame.size之间的相关性是什么

【发布时间】：2016-02-01 21:02:20

【问题描述】：

我在几篇文章（如https://***.com/a/5340339/1084822 和https://***.com/a/15582466/1084822）上读到，要使用动画调整 UIView 的大小，我们无法为框架设置动画，我们必须混合使用 bounds.size、bounds。原点和位置。

但是，我找不到这些属性与框架的属性之间的相关性。

我有一个带有自定义布局的 UICollectionView。当一个单元格被删除时，布局被刷新并且每个单元格通过prepareLayout 和layoutAttributesForElementsInRect: 方法获得它的新框架。然后，finalizeCollectionViewUpdates 方法（我们可以在其中编辑动画）被调用，最后单元格移动并调整大小。

我已经通过对单元格动画的反复试验进行了很多探索，这就是我的发现：

默认情况下为我的可见单元格设置了 3 个动画，它们是位置、bounds.origin 和 bounds.size 当我更改这些动画的 from/to 值时，只有单元格的 POSITION 会受到影响，而不会影响它的 SIZE

详细结果

默认值

当我坚持动画的默认值并使用这些日志检查它们的值时，

- (void)finalizeCollectionViewUpdates 
    for(UICollectionViewCell* cell in [self.collectionView visibleCells]) 
        NSLog(@"cell: %@", cell);
        for(NSString* key in cell.layer.animationKeys) 
            CABasicAnimation* animation = (CABasicAnimation*)[cell.layer animationForKey:key];
            NSLog(@"animation %@: from %@ to %@", key, animation.fromValue, animation.toValue);
        
    

我得到了 shrinking 单元格（它的框架代表它的最终状态）：

cell: <PlayQueueSongCell: 0x7fbf1bc8ebe0; baseClass = UICollectionViewCell; frame = (53.3333 80; 480 480); opaque = NO; animations =  position=<CABasicAnimation: 0x7fbf1bf54e20>; bounds.origin=<CABasicAnimation: 0x7fbf1bf556b0>; bounds.size=<CABasicAnimation: 0x7fbf1bf557a0>; ; layer = <CALayer: 0x7fbf1bc8e9f0>>
animation position: from NSPoint: 666.66666666666674, 0 to NSPoint: 0, 0
animation bounds.origin: from NSPoint: 0, 0 to NSPoint: 0, 0
animation bounds.size: from NSSize: 160, 160 to NSSize: 0, 0

对于 expending 单元格（它的框架代表它的最终状态）：

cell: <PlayQueueSongCell: 0x7fbf1bd6cd00; baseClass = UICollectionViewCell; frame = (640 0; 640 640); opaque = NO; animations =  position=<CABasicAnimation: 0x7fbf1bf55b70>; bounds.origin=<CABasicAnimation: 0x7fbf1bf55e20>; bounds.size=<CABasicAnimation: 0x7fbf1bf55f10>; ; layer = <CALayer: 0x7fbf1bd73200>>
animation position: from NSPoint: 666.66666666666652, 0 to NSPoint: 0, 0
animation bounds.origin: from NSPoint: 0, 0 to NSPoint: 0, 0
animation bounds.size: from NSSize: -160, -160 to NSSize: 0, 0

以慢动作查看结果：

没有 bounds.size 动画

当我用这段代码删除 bounds.size 动画时，

- (void)finalizeCollectionViewUpdates 
    for(UICollectionViewCell* cell in [self.collectionView visibleCells]) 
        for(NSString* key in cell.layer.animationKeys) 
            [cell.layer removeAnimationForKey:@"bounds.size"];
        
    

我可以看到只有单元格的位置受到影响...

bounds.size 动画从 (0,0) 到 (1000,1000)

当我使用这段代码将 bounds.size 的值更改为 (0,0) -> (1000,1000) 时：

- (void)finalizeCollectionViewUpdates 
    for(UICollectionViewCell* cell in [self.collectionView visibleCells]) 
        for(NSString* key in cell.layer.animationKeys) 
            [cell.layer removeAnimationForKey:@"bounds.size"];
            CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"bounds.size"];
            [animation setFromValue:[NSValue valueWithCGSize:CGSizeZero]];
            [animation setToValue:[NSValue valueWithCGSize:CGSizeMake(1000, 1000)]];
            [animation setDuration:0.3];
            [cell.layer addAnimation:animation forKey:@"bounds.size"];
        
    

我仍然可以看到只有单元格的位置受到影响...

问题

由于单元格在动画开始之前获得了新的帧，并且 bounds.size 不会影响单元格的大小，因此我找不到平滑更改其大小的方法。

大家都在说的bounds.size和frame.size是什么关系，怎么才能动画化cell的大小呢？

【参考方案1】：

我找到的解决方案是首先删除 bounds.size 动画，因为它会以不需要的方式移动单元格。然后，我创建了一个 transform.scale 动画，该动画以一个模拟其先前大小的值开始，并以 1 的值结束。

if([cell.layer animationForKey:@"bounds.size"]) 
    [cell.layer removeAnimationForKey:@"bounds.size"];

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    animation.duration = 0.3;
    if(CGSizeEqualToSize(cell.frame.size, self.itemSize))  //shrinking cell
        animation.fromValue = @1.333;
        animation.toValue = @1;
     else                                                 //expending cell
        animation.fromValue = @0.75;
        animation.toValue = @1;
    
    [cell.layer addAnimation:animation forKey:@"transform.scale"];