Animating UICollectionViewCell size on selection

Question

So I have a subclassed uicollectionflowlayout. I am trying to animate a cell size on selection as well as deselection. On did select cell I have this:

[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];

The problem with this is that during the animation, the cells still assume the old layout attributes so the cells are still normal size. The animation happens nicely but when it finishes it quickly snaps back to the normal size before going into the CATransaction completion block. Thus, I see a sudden change from normal to bigger size after the animation. This is replicated but in the reverse order for deselection. Any helpful tips would be greatly appreciated

score 0 · Answer 1 · answered Mar 15 '14 at 23:53

0

As with any animation, you need to set the object to its final value before the animation starts. That way, when the animation ends, its final value matches the real value which you have already cleverly given the object.

In other words, do beforehand what you are currently doing as the transaction completion block.

answered Mar 15 '14 at 23:53

matt

515,959
87
875
1,141

So, I tried that but when I set call my method: `[layout setSize:(CGSize) forItemAtIndexPath:(NSIndexPath *)];` it starts animating from the new size and not the normal size that I would like to animate from. – RockyEEKlvn Mar 16 '14 at 00:04
I do have one more suggestion: lose the `CATransaction begin` and `CATransaction end`. You already have an impliicit transaction, so the completion block will still work. And you almost _never_ want an explicit transaction like this; it can have weird side effects. – matt Mar 16 '14 at 00:06
I guess I was thinking you would just set the cell scale beforehand, not do the layout thing. – matt Mar 16 '14 at 00:09
So I got rid of those just as you said, but it animates and goes back to the normal size. I need a way to set the layout attribute for that cell. Otherwise the cell won't stay in the updated state. Would more information about this problem help? I am very lost as to what to do. – RockyEEKlvn Mar 16 '14 at 01:22

Animating UICollectionViewCell size on selection

1 Answers1