Animate UICollectionViewCell on Tap
Solution 1
It would appear that you are obtaining the wrong Cell. Sending the dequeueReusableCellWithReuseIdentifier:forIndexPath:
message does not obtain the cell in use in the view at the indexPath in the second parameter, but dequeues a previously used but reusable cell; if no reusable cell is available, a new one is created. See Reference 1 below.
Replacing:
ProductCollectionViewCell* cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"ProductReuseID" forIndexPath:indexPath];
With:
ProductCollectionViewCell* cell = [collectionView cellForItemAtIndexPath:indexPath];
In your code above, should give you the proper cell to work with.
Here is your fist example, rewritten.
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath(NSIndexPath *)indexPath
{
// animate the cell user tapped on
UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];
[UIView animateWithDuration:5.0
delay:0
options:(UIViewAnimationOptionAllowUserInteraction)
animations:^{
NSLog(@"animation start");
[cell setBackgroundColor:[UIColor colorWithRed: 180.0/255.0 green: 238.0/255.0 blue:180.0/255.0 alpha: 1.0]];
}
completion:^(BOOL finished){
NSLog(@"animation end");
[cell setBackgroundColor:[UIColor whiteColor]];
}
];
}
References:
Solution 2
You can customize the animation while select/tap the UICollectionViewCell with custom animation duration by following the code. So, You don't need to change the background color of it.
With following options - UIViewAnimationOption
- UIViewAnimationOptionCurveEaseIn
- UIViewAnimationOptionCurveEaseOut
-
UIViewAnimationOptionAllowUserInteraction
UICollectionViewDelegate - didSelectItemAtIndexPath method
UICollectionViewCell *uviCollectionCell = [collectionView cellForItemAtIndexPath:indexPath]; [UIView animateWithDuration:0.4 delay:0 options:(UIViewAnimationOptionCurveEaseIn) animations:^{ NSLog(@"animation start"); CALayer *layer = uviCollectionCell.layer; CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity; rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, 15.0f * M_PI / 180.0f, 1.0f, 0.0f, 0.0f); layer.transform = rotationAndPerspectiveTransform; } completion:^(BOOL finished) { [UIView animateWithDuration:0.3 delay:0 options:(UIViewAnimationOptionCurveEaseOut) animations:^{ NSLog(@"animation end"); CALayer *layer = uviCollectionCell.layer; CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity; rotationAndPerspectiveTransform.m24 = 0; rotationAndPerspectiveTransform =CATransform3DRotate(rotationAndPerspectiveTransform, 0.0f * M_PI / 180.0f, 1.0f, 0.0f, 0.0f); layer.transform = rotationAndPerspectiveTransform; } completion:nil]; } ];
itsame69
Updated on June 07, 2022Comments
-
itsame69 about 2 years
I would like to start some animation on a
UICollectionViewCell
when the user taps on a cell. My idea was to select the corresponding cell indidSelectItemAtIndexPath
and trigger an animation. However, this doesn't work:- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath { // animate the cell user tapped on ProductCollectionViewCell* cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"ProductReuseID" forIndexPath:indexPath]; [UIView animateWithDuration:5.0 delay:0 options:(UIViewAnimationOptionAllowUserInteraction) animations:^{ NSLog(@"animation start"); [cell.layer setBackgroundColor:[UIColor colorWithRed: 180.0/255.0 green: 238.0/255.0 blue:180.0/255.0 alpha: 1.0].CGColor]; } completion:^(BOOL finished){ NSLog(@"animation end"); [cell.layer setBackgroundColor:[UIColor whiteColor].CGColor]; } ]; }
Actually, the animation starts and ends at the same time (although
animateWithDuration
is set to 5). Next attempt was to skip the animation and simply set for instance a different border style:- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath { // animate the cell user tapped on ProductCollectionViewCell* cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"ProductReuseID" forIndexPath:indexPath]; [cell.layer setBorderWidth:5.0f]; }
However, this doesn't change anything (probably because I have to redraw the cell manually?).
Do you have any ideas how to animate a UICollectionViewCell when the user tapped on it?
Kind regards, Christian