CODEWITHSUNDEEP
iosobjective-canimationuicollectionviewuicollectionviewcell
Dima Deplov
Dima Deplov

Reputation: 3718

iOS: UICollectionViewCell animation change cells content partially

I have UICollectionView with cells. I need to change cell image in UIImageView. But I need to change it not in one cell, but from one cell to 30, for example. (Cells that need to change value is changes.) I want to make this with animation. Also, I don't want to simultaneous change all cell that must be changed. I want firs change some of it, after a short amount of time change more and so on until all will be changed. Is it possible? And is the any example of how I can do this?

I already made a method that change all at once, but this not what I want. If somebody want to look at this code, I'll post it here after update, for now I don't see a reason to post it (because I think this a different ways at all, to show simultaneous change and partial changes).

Upvotes: 1

Views: 1331

Answers (1)

Can
Can

Reputation: 8581

Not very hard at all, actually, it all depends how you're loading the cells. For instance, a simple hack I just made:

AnimatedCell.m

UICollectionViewCell subclass

- (void)setImage:(UIImage*)image animatedWithDelay:(NSTimeInterval)delay
{
    self.imageView.image = image;
    
    // Apply the change immediately
    if (delay < 0.01)
    {
        return;
    }
    
    self.imageView.alpha = 0.0;
    
    [UIView animateWithDuration:0.5 delay:delay options:UIViewAnimationOptionAllowUserInteraction | UIViewAnimationOptionCurveEaseInOut animations:^{
        self.imageView.alpha = 1.0;
    } completion:nil];
}

This is a simple fade-in using UIView convenient animation methods, you may want something fancier later! Anyway, now, we need to set the content and calculate a proper delay.

ViewController.m

Conforms to UICollectionViewDataSource and UICollectionViewDelegate

@interface ViewController () <UICollectionViewDataSource, UICollectionViewDelegate>

@property (nonatomic,assign) CGFloat delay;

@end

@implementation ViewController

CGFloat const kDelayMinimum   = 0.02;
CGFloat const kDelayIncrement = 0.01;

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    AnimatedCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"collection.cell" forIndexPath:indexPath];
    
    [cell setImage:[UIImage imageNamed:@"photo.png"] animatedWithDelay:self.delay];
    
    self.delay += kDelayIncrement;
    
    return cell;
}

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    self.delay = kDelayMinimum;
}

// <Rest of the code>

@end

It's a simple trick really, I just increment the delay for each cell that is being presented, and then, when the user scrolls, the delay is reset to the minimum, otherwise, the delay would grow and grow out of control.

You'd need to figure out how to plug it into your data source properly, deal situations where the image has not been loaded, etc, but take this is as a foundation for work.

Upvotes: 3

Related Questions