选择时为 UICollectionViewCell 大小设置动画

Posted 2023-03-10

【中文标题】选择时为 UICollectionViewCell 大小设置动画

【英文标题】：Animating UICollectionViewCell size on selection

【发布时间】：2014-03-15 23:49:20

【问题描述】：

所以我有一个子类的 uicollectionflowlayout。我正在尝试在选择和取消选择时为单元格大小设置动画。 在没有选择单元格上我有这个：

[CATransaction begin];
[CATransaction setCompletionBlock:^
    BubblesCollectionViewFlowLayout *layout = (BubblesCollectionViewFlowLayout *)bubblesView.collectionViewLayout;
    [bubble.layer setCornerRadius:BIGGER_CELL_WIDTH_HEIGHT/2];
    [layout setSize:CGSizeMake(BIGGER_CELL_WIDTH_HEIGHT, BIGGER_CELL_WIDTH_HEIGHT) forItemAtIndexPath:indexPathOfSelectedCell];
    [bubble.cellLabel setFrame:CGRectMake(0.0f, BIGGER_CELL_WIDTH_HEIGHT/2-30.0f, BIGGER_CELL_WIDTH_HEIGHT, 60.0f)];
];
/************* Cell Scale Animation *****************/
CABasicAnimation *animationScale = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
animationScale.fromValue = [NSNumber numberWithFloat:1.0];
animationScale.toValue = [NSNumber numberWithFloat:BIGGER_CELL_WIDTH_HEIGHT/CELL_WIDTH_HEIGHT];
[animationScale setDuration:0.3f];
[animationScale setValue:[NSNumber numberWithInt:animationTypeCellScale]
                  forKey:ANIMATION_TYPE_STRING];
[bubble.layer addAnimation:animationScale forKey:@"animationCellScale"];

/*BubblesCollectionViewFlowLayout *layout = (BubblesCollectionViewFlowLayout *)bubblesView.collectionViewLayout;
[bubble.layer setCornerRadius:BIGGER_CELL_WIDTH_HEIGHT/2];
[layout setSize:CGSizeMake(BIGGER_CELL_WIDTH_HEIGHT, BIGGER_CELL_WIDTH_HEIGHT) forItemAtIndexPath:indexPathOfSelectedCell];*/

/************** Cell label Animations ****************/
CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];
[groupAnimation setDuration:0.3f];
CABasicAnimation *animationCellScale = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
animationCellScale.fromValue = [NSNumber numberWithFloat:1.0f];
animationCellScale.toValue = [NSNumber numberWithFloat:1.1f];
[animationCellScale setValue:[NSNumber numberWithInt:animationTypeLabelScale]
                      forKey:ANIMATION_TYPE_STRING];
[groupAnimation setAnimations:@[animationCellScale]];
[bubble.cellLabel.layer addAnimation:groupAnimation forKey:@"animationLabel"];
//[bubble.cellLabel setAlpha:0.0f];
/*[bubble.cellLabel setFrame:CGRectMake(0.0f, BIGGER_CELL_WIDTH_HEIGHT/2-30.0f, BIGGER_CELL_WIDTH_HEIGHT, 60.0f)];*/
[CATransaction commit];

这样做的问题是，在动画期间，单元格仍然采用旧的布局属性，因此单元格仍然是正常大小。动画效果很好，但是当它完成时，它会在进入 CATransaction 完成块之前迅速恢复到正常大小。因此，我看到动画后突然从正常尺寸变为更大尺寸。这被复制，但以相反的顺序取消选择。任何有用的提示将不胜感激

【参考方案1】：

与任何动画一样，您需要在动画开始之前将对象设置为其最终值。这样，当动画结束时，它的最终值与您已经巧妙地赋予对象的 real 值匹配。

换句话说，作为事务完成块，预先做你当前正在做的事情。

【讨论】：

所以，我试过了，但是当我设置调用我的方法时：[layout setSize:(CGSize) forItemAtIndexPath:(NSIndexPath *)]; 它从新尺寸开始动画，而不是我想要动画的正常尺寸。

我还有一个建议：去掉CATransaction begin 和CATransaction end。你已经有一个隐式事务，所以完成块仍然可以工作。而且您几乎从不想要这样的显式事务；它可能会产生奇怪的副作用。

我想我在想你会事先设置单元格比例，而不是做布局。

所以我就像你说的那样去掉了那些，但它会动画并恢复到正常大小。我需要一种方法来设置该单元格的布局属性。否则，单元格将不会保持更新状态。有关此问题的更多信息会有所帮助吗？我不知道该怎么做。