Custom animation on UICollectionView reload data

Avner Barr picture Avner Barr · Sep 9, 2013 · Viewed 7.3k times · Source

I would like to animate the reload of a collection view such that when a cell is selected I get an animation similar to dealing cards in a solitaire game. (Imaging old MS solitaire card dealt)

I've searched around for "custom UICollectionView reload animatation" and seen solutions such as

[self.collectionView performBatchUpdates:^{
[self.collectionView reloadItemsAtIndexPaths:myindexPaths]
} completion:nil];

and have conjured up this

    CATransition *transition = [CATransition animation];
    transition.duration = 1;
    transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    transition.type = kCATransitionMoveIn;
    [self.collectionView.layer addAnimation:transition forKey:nil];
    [self.collectionView reloadData];
    return;

But it is not getting my desired effect. Any ideas how it can be done?

Answer

hbk picture hbk · Mar 18, 2016

u can make some trick like suggested here

+ (CATransition *)swipeTransitionToLeftSide:(BOOL)leftSide
{
    CATransition* transition = [CATransition animation];
    transition.startProgress = 0;
    transition.endProgress = 1.0;
    transition.type = kCATransitionPush;

    transition.subtype = leftSide ? kCATransitionFromRight : kCATransitionFromLeft;
    transition.duration = AnimationDuration;
    return transition;
}

and add it to your collectionView

UISwipeGestureRecognizer *swipeGestureL = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(didSwipeToLeftCollectionView:)];
swipeGestureL.direction = UISwipeGestureRecognizerDirectionLeft;
[self.collectionView addGestureRecognizer:swipeGestureL];

- (void)didSwipeToLeftCollectionView:(UISwipeGestureRecognizer *)swipeGesture
{
    [self.collectionView.layer addAnimation:[Animation swipeTransitionToLeftSide:YES] forKey:nil];
    [self.collectionView reloadData];
}

result:

enter image description here