How to implement this cell animation with UICollectionView

Question

I'm trying to make this animation

For the list, I think I can use UICollectionView, but the animation part seem to be tricky.

Any idea on this?

Answer 1

If you mean the springing animation part, that is not very tricky - Apple has a demo of exactly that behavior in same code for UIDynamics (iOS7+ only).

There is another example here that looks very close to what you are after:

http://www.objc.io/issue-5/collection-views-and-uidynamics.html

Look in the middle for an animated example. It even uses collection views.

Answer 2

As @Kendall said, you really need to try UIDynamics.

For a quick workaround, I just tried below code. It works somewhat good and related to your code. I don't know about performance. So It may create a performance lack in your project.

It is just an idea. If it is not working for you, leave it as it is.

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    MyCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"MyCollectionViewCell" forIndexPath:indexPath];

    [UIView animateWithDuration:0.2 animations:^{
        cell.transform = CGAffineTransformMakeTranslation(0.0, -50);
    }];
    [self delayBy:0.5 code:^{ // call block of code after time interval
        [UIView animateWithDuration:0.3 animations:^{
            cell.transform = CGAffineTransformIdentity;
        }];
    }];
    return cell;
}