Objective C animates wrong button when scrolling in tablview - ios

Question

- (IBAction)playShout:(UIButton *)sender {
self.tableView.userInteractionEnabled=NO;
CGPoint point = [sender.superview convertPoint:sender.frame.origin toView:self.tableView];
NSIndexPath *indexPath = self.tempIndexPath;//[self.tableView indexPathForRowAtPoint:point];
DisplayPersonTableViewCell * cell=[self.tableView cellForRowAtIndexPath:indexPath];
UIButton * button=cell.playButton;
self.tableView.userInteractionEnabled=YES;
PFObject * shoutToPlay=[self.shoutsArrayForUserBeingDisplayed objectAtIndex:indexPath.row];
[shoutToPlay fetchIfNeeded];
[AnimationViewController endCircleAnimation];
NSData * audioData=[self.audioDataDict objectForKey:shoutToPlay.objectId];
if (player.playing) {
if(player.data==audioData) {
[player stop];
[AnimationViewController endCircleAnimation];
} else{
[self setAllTableViewCellsToPlayButton];
[AnimationViewController endCircleAnimation];
sender.layer.cornerRadius=sender.frame.size.width/2;
player = [[AVAudioPlayer alloc] initWithData:audioData error:nil];
player.delegate=self;
[player prepareToPlay];
if (DISPLAY_IS_MUTED) {
player.volume=0;
}
[player play];
[AnimationViewController animateButton:cell.playButton ForDuration:player.duration withColor:[UIColor whiteColor]];
}
} else {
sender.layer.cornerRadius=sender.frame.size.width/2;
player = [[AVAudioPlayer alloc] initWithData:audioData error:nil];
player.delegate=self;
[player prepareToPlay];
if (DISPLAY_IS_MUTED) {
player.volume=0;
}
[player play];
[AnimationViewController animateButton:sender ForDuration:player.duration withColor:[UIColor whiteColor]];
}
}
Very simple and very easy, of course. But if I perform an animation on a button in that cell, and then scroll the tableview, it will switch and start animating the wrong cells. It's as if the fact that the superview's frame is changing affect's which button is being animated.
Any advice?
Animation method:
+(void)animateButton:(UIButton *)button ForDuration:(NSTimeInterval)duration withColor:(UIColor *)color {
circle = [CAShapeLayer layer];
circle.fillColor = nil;
circle.lineWidth = button.frame.size.height/2+2;
circle.strokeColor = color.CGColor;
circle.bounds = CGRectMake(0, 0, button.frame.size.width/2, button.frame.size.height/2);
circle.frame= CGRectMake(button.frame.size.width/4, button.frame.size.height/4, button.frame.size.width/2+2, button.frame.size.height/2+2);
circle.path = [UIBezierPath bezierPathWithOvalInRect:circle.bounds].CGPath;
[button.layer addSublayer:circle];
CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:#"strokeEnd"];
drawAnimation.duration = duration;
drawAnimation.repeatCount = 1.0;
drawAnimation.removedOnCompletion = YES;
drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
drawAnimation.toValue = [NSNumber numberWithFloat:1.0f];
drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
[circle addAnimation:drawAnimation forKey:#"drawCircleAnimation"];
}

Answer 1

Are you implementing the prepareForReuse method in your cell? There you must stop running animations and reset the state of the cell for the reuse.
From the docs:
prepareForReuse
Prepares a reusable cell for reuse by the table view's delegate.
If a UITableViewCell object is reusable—that is, it has a reuse identifier—this method is invoked just before the object is returned
from the UITableView method dequeueReusableCellWithIdentifier:. For
performance reasons, you should only reset attributes of the cell that
are not related to content, for example, alpha, editing, and selection
state. The table view's delegate in tableView:cellForRowAtIndexPath:
should always reset all content when reusing a cell. If the cell
object does not have an associated reuse identifier, this method is
not called. If you override this method, you must be sure to invoke
the superclass implementation.
You need to implement a custom UITableViewCell (create a subclass of it) and implement the prepareForReuse method.
There you can write the logic to stop the animation.