Text Animation within didSelectRowAtIndexPath:?

Question

I'm using an MCSwipeTableViewCell so the idea is that the user swipes it left or right to complete actions. However the user may not always be familiar with this action so when they tap the cell (expecting to select it) I want the text to briefly flash a short instruction then return to the original text.

I've been on this for days and keep coming back to it with no luck. I've tried using the completion block, playing about with the delays, all sorts but the animation seems to complete so quickly you don't actually see the change, what am I doing wrong?

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{

    [tableView deselectRowAtIndexPath:indexPath animated:NO];

    MCSwipeTableViewCell *cell = (MCSwipeTableViewCell *)[self.tableView cellForRowAtIndexPath:indexPath];
    Station *station = self.recentStations[indexPath.row];

    [UIView animateWithDuration:0.5 animations:^{

        //code to fade the text out
        CATransition *animation = [CATransition animation];
        animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
        animation.type = kCATransitionFade;
        animation.duration = 0.35;
        [cell.textLabel.layer addAnimation:animation forKey:@"kCATransitionFade"];

        //instructions to appear briefly
        cell.textLabel.text = @"Swipe left to set alarm or right to remove";


        //nested animation to revert text after a 1.5 second delay
       [UIView animateWithDuration:.05 delay:1.5 options:UIViewAnimationOptionCurveEaseIn animations:^{

           //code to fade the text back in
           CATransition *animation = [CATransition animation];
           animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
           animation.type = kCATransitionFade;
           animation.duration = 0.35;
           [cell.textLabel.layer addAnimation:animation forKey:@"kCATransitionFade"];
           cell.textLabel.text = station.name;

       } completion:nil];

    }];

}

score 0 · Accepted Answer · answered Oct 20 '13 at 19:19

You're using duplicate nested animation APIs. Give the below code a try.

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    [tableView deselectRowAtIndexPath:indexPath animated:NO];

    MCSwipeTableViewCell *cell = (MCSwipeTableViewCell *)[self.tableView cellForRowAtIndexPath:indexPath];
    Station *station = self.recentStations[indexPath.row];

    [UIView animateWithDuration:0.5 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        cell.textLabel.alpha = 0.0f;              
    } completion:^(BOOL finished) {
        //instructions to appear briefly
        cell.textLabel.alpha = 1.0f;
        cell.textLabel.text = @"Swipe left to set alarm or right to remove";

        [UIView animateWithDuration:0.5 delay:1.5 options:UIViewAnimationOptionCurveEaseInOut animations:^{
            cell.textLabel.alpha = 0.0f;
        } completion:^(BOOL finished) {
            cell.textLabel.alpha = 1.0f;
            cell.textLabel.text = station.name;
        }];
    }];
}

That code will have the new text instantaneously swap out the old text and appear - you can probably figure out how to add more animations to prevent this if desired.

Text Animation within didSelectRowAtIndexPath:?

1 Answers1