UICollectionView: 1 row horizontal scrolling (right to left) with custom animation for new cell coming from right

Question

• I have a 1 row collections view with images

• I scroll the images from right to left

• I would like to make an animation for each cell coming from the right (ala Google+)

This animation could be based on Alpha or frame location

How to implement that ?

Answer 1

This may not be exactly what you want in your animations but here is what I've done in a UICollectionViewCell subclass. This will fade in the cell while the frame shrinks down to the appropriate size. I call the setPhoto method from within collectionView: cellForItemAtIndexPath:.

@implementation HistoryCollectionViewCell

- (void)setPhoto:(Photo*)photo {

    if(_photo != photo) {
        _photo = photo;
    }

    // Set up the animations here
    self.photoQueue.alpha = 0.0f;
    self.cellContainerView.alpha = 0.0f;
    CGRect currentFrame = self.cellContainerView.frame;
    CGFloat width = currentFrame.size.width + 20;
    CGFloat height = currentFrame.size.height + 20;
    CGFloat originX = currentFrame.origin.x - 10;
    CGFloat originY = currentFrame.origin.y - 10;
    CGRect newFrame = CGRectMake(originX, originY, width, height);
    self.cellContainerView.frame = newFrame;

    dispatch_queue_t photoQueue = dispatch_queue_create("com.jeremyfox.SnapTo.photoQueue", NULL);
    dispatch_async(photoQueue, ^{

        __block UIImage* image = nil;

        if (_photo) {
            image = [Photo getImageAtPath:_photo.thumbnail];
        }

        dispatch_async(dispatch_get_main_queue(), ^{
            if (image) {
                self.imageView.image = image;

                // Perform the animations here
                [UIView animateWithDuration:0.3f animations:^{
                    self.cellContainerView.alpha = 1.0f;
                    self.cellContainerView.frame = currentFrame;
                }];
            }
        });
    });
}