Custom animation on UICollectionView reload data

Question

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?

Acetylene

For achieving this you have to subclass UICollectionViewLayout. No any other option.. – Judithjuditha

Answer 1

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:

Keilakeily

Answer 2

I like @gbk's answer so here it is in Swift 3.1 for both left and right

override func viewDidLoad() {
    super.viewDidLoad()

    let swipeGestureL = UISwipeGestureRecognizer(target: self, action: #selector(swipeLeft))
    swipeGestureL.direction = .left
    collectionView.addGestureRecognizer(swipeGestureL)

    let swipeGestureR = UISwipeGestureRecognizer(target: self, action: #selector(swipeRight))
    swipeGestureR.direction = .right
    collectionView.addGestureRecognizer(swipeGestureR)
}

func swipeTransitionToLeftSide(_ leftSide: Bool) -> CATransition {
    let transition = CATransition()
    transition.startProgress = 0.0
    transition.endProgress = 1.0
    transition.type = kCATransitionPush
    transition.subtype = leftSide ? kCATransitionFromRight : kCATransitionFromLeft
    transition.duration = 0.3

    return transition
}

@IBAction func swipeLeft() {
    collectionView.layer.add(swipeTransitionToLeftSide(true), forKey: nil)
    updateDasource()
}

@IBAction func swipeRight() {
    collectionView.layer.add(swipeTransitionToLeftSide(false), forKey: nil)
    updateDatasource()
}

func updateDatasource() {
    self.collectionView.reloadData()
}

Cholecystitis

Answer 3

You need to create a custom UICollectionViewLayout that does your custom animation. If the effect is just a translation from point A to point B, you can use get away with a pretty standard use of the built-in animations. You would set the cell's location to point A in initialLayoutAttributesForAppearingItemAtIndexPath: and to point B in layoutAttributesForItemAtIndexPath:. When you want to deal the cards, you would simply insert the corresponding index paths into the collection view with performBatchUpdates:. A similar animation to send the cards back to the dealer should use finalLayoutAttributesForDisappearingItemAtIndexPath:.

If you want to do a more complex animation, you'll have a lot more work on your hands. This would most likely include snapshotting a cell and transforming it before animating along a CGPath. Once the animation is done you would then tell the collection view to draw it in its final location.

Gravitative