Animate UICollectionViewCell on Tap

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

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:

  • http://developer.apple.com/library/ios/#documentation/UIKit/Reference/UICollectionView_class/Reference/Reference.html#//apple_ref/occ/cl/UICollectionView