CODEWITHSUNDEEP
iosuitableview
DavidH
DavidH

Reputation: 91

UITableViewCell animation dissapears after user scrolls the UITableView

I am making a basic music streamer. In a view controller (PlayerViewController) I have a UITableView with custom UITableViewCell (called MediaItemTableViewCell). In the function cellForRowAtIndexPath I add the metadata about the current streaming music track and add an animation if the cell is the current playing song. This all works correctly and the animation is added.

The problem is if a user scrolls the UITableView at all then the animation dissapears. I have traced the code I have written and used breakpoints and NSLog to verify my variables are correct at every step. The animation even dissapears after scrolling if I set it to every cell all the time (as in, set animation outside of the if block).

Is there something wrong in my code or something going on in iOS that I am not seeing?

MediaItemTableViewCell:

 @interface MediaItemTableViewCell : UITableViewCell
@property (weak, nonatomic) IBOutlet UILabel *track_title;
@property (weak, nonatomic) IBOutlet UILabel *artist;
@property (weak, nonatomic) IBOutlet UILabel *duration;
@property (weak, nonatomic) IBOutlet UIImageView *sc_album_image;
@property (weak, nonatomic) IBOutlet UIImageView *playing_animation;

@end

cellForRowAtIndexPath of my PlayerViewController:

 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

        MediaItemTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];

        MediaItem *track = [self.playlist objectAtIndex:indexPath.row];

        _playListTableView.backgroundColor = [UIColor clearColor];

        cell.backgroundColor = [UIColor clearColor];
        cell.contentView.backgroundColor = [UIColor clearColor];
        cell.backgroundColor = [UIColor clearColor];
        cell.backgroundView = [[UIView alloc] initWithFrame:CGRectZero];

        cell.track_title.text = track.track_title;
        cell.artist.text = track.artist;
        cell.duration.text = track.duration;
        cell.sc_album_image.image =  track.artwork;
        cell.backgroundColor = [UIColor clearColor];

        if((int)_current_track_index == (int)indexPath.row && _player.isPlaying)
        {
            cell.playing_animation.image = [UIImage animatedImageNamed:@"wave" duration:0.6f];
        }

        return cell;

    }

Upvotes: 2

Views: 541

Answers (2)

Wallace Silva
Wallace Silva

Reputation: 554

You are setting an static image on playing_animation UIImageView.

Is your animation frame based?

Maybe you need to set the animationImages property of UIImageView. It is a NSArray of images and you can configure the duration and the number of repetitions with the properties animationDuration and animationRepeatCount.

Someting like:

if((int)_current_track_index == (int)indexPath.row && _player.isPlaying) {

    NSMutableArray *images = [[NSMutableArray alloc] init];
    for (int i = 0; i < MAX_NUMBER_IF_IMAGES_IN_ANIMATION; ++i) {
        [images addObject:[UIImage imageNamed:[NSString stringWithFormat:"wave%d", i+1]];
    }

    cell.playing_animation.animationImages = images;
    cell.playing_animation.animationDuration = 0.6;
    [cell.playing_animation startAnimating];
}

Upvotes: 1

DavidH
DavidH

Reputation: 91

I solved this by reworking how my animation is created. The following is the same if block in cellForRowAtIndexPath as before but with my updated code. Heavily in need of a refactor, this initial version works though:

if((int)_current_track_index == (int)indexPath.row && _player.isPlaying)
{
    cell.backgroundColor = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.2];
    cell.song_index_label.text = @"";
    NSArray *imageNames = @[@"wave1.png", @"wave2.png", @"wave3.png", @"wave4.png", @"wave5.png", @"wave6.png", @"wave7.png"];

    NSMutableArray *images = [[NSMutableArray alloc] init];
    for (int i = 0; i < imageNames.count; i++) {
        [images addObject:[UIImage imageNamed:[imageNames objectAtIndex:i]]];
    }

    // Normal Animation
    cell.playing_animation.animationImages = images;
    cell.playing_animation.animationDuration = 0.6;
    [cell.playing_animation startAnimating];
}

The downside is every time the table is scrolled far enough the animation will restart and look clunky. Will have to refactor and come up with something better. Still not sure why my original attempt did not work as they should both be valid ways to add animation to cells. I liked the original code because it was more concise although it was very broken in terms of functionality.

Upvotes: 2

Related Questions