Question

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.