Can Scrolling control an Animation ?

Question

Hi,

I have a UILabel that displays the current date for the current view of my scroll view. When I scroll this view to the left (to the left pages), I'd like this label to change to the day before, with a crossing effect between the 2 dates.

I take as reference the fading effect of the Springboard when you scroll to the Spotlight page. I think this is similar but I have no idea how to implement it !

Where do I put the code, do I have to use 2 different UILabel or maybe CoreAnimation ? When do I change the date ?

Thanks in advance !

Answer 1

1. In your scrollViewDidScroll: delegate method, check if the scroll view's contentOffset indicates that the user has scrolled to another page.
2. If so, change the label's text to the new date. It won't animate yet, but do this before you try the animation.

3. For the animation, add a CATransition to the label's layer and configure it to your liking:

   // Create a transition animation and add it to the label's layer:
   CATransition *transition = [CATransition animation];
   transition.type = kCATransitionFade;
   transition.duration = 0.25;
   [self.dateLabel.layer addAnimation:transition forKey:@"textTransition"];
   // Change the label's text as before:
   self.dateLabel.text = newDateString;
   

This effect is a little different from the fading of the Springboard icons (since those fade continuously as you scroll further to the Spotlight page) but I think my approach is more appropriate for your application. To emulate the Springboard effect, you should indeed use two separate labels (with the same frame) and change their opacity values as the scroll view's contentOffset changes.

Answer 2

Using Core Animation with two labels would work just fine. Changing the property of a Core Animation layer result in a smooth transition by default, so you can use that to your advantage. For example:

- (void)crossfadeDateLabels
{
    date1Label.layer.opacity = 0.0f;
    date2Label.layer.opacity = 1.0f;
}

Or you can use the explicit animation model if you want more control:

- (void)crossfadeDateLabels
{
    CABasicAnimation *date1Anim = [CABasicAnimation animationWithKeyPath:@"opacity"];
    date1Anim.duration = 1.0f;
    date1Anim.fromValue = [NSNumber numberWithFloat:1.0f];
    date1Anim.toValue = [NSNumber numberWithFloat:0.0f]

    // Do something similar for date2Anim...

    [date1Label.layer addAnimation:date1Anim forKey:nil];
    [date2Label.layer addAnimation:date2Anim forkey:nil];
}