Search code examples
iosuicollectionviewuiviewanimationcaanimationuicollectionviewlayout

Custom animation on UICollectionView reload data


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?


Solution

  • 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