Joey Joey - 24 days ago 11
iOS Question

Animate nav bar title text change

In my app, I have a page view controller that allows the user to swipe between different "sections" of the app, and at the top in the nav bar I change the title text to the new section the user has swiped to via

pageViewController:didFinishAnimating:previousViewControllers:transitionCompleted:
. It is currently instantly changing the title text when the animation has completed. I would like to improve this with some animation, a subtle fading in and out effect.

I first tried to implement
[UIView animationWithDuration:...]
to animate changing the title text, but it does not animation and simply still updates instantly.

I then wondered if it'd be possible to update the alpha of the nav bar title as the user scrolls horizontally based on how far they've scrolled, reaching 0 alpha when the next section is about to come on screen, then I can instantly change the text while it's at 0 and then quickly fade in to 1 alpha. But I don't see a method on
UIPageViewControllerDelegate
that is called when the scroll position has updated.

If possible, instead of just fading in and out, I could fade as well as move the title text position in the nav bar like the default animation that occurs when navigating back from a push segue via a swipe gesture. I would slide the old section title over as the user scrolls and provide the next section title on the other side, so that when the transition completes the previous section title is off screen and the new one is perfectly centered so the replacement completes. But again this requires knowing exactly how much the user has scrolled the page view controller.

Is it possible to implement any of the desired animations?

Answer

If you want to animate between different title strings, use the following:

CATransition *fadeTextAnimation = [CATransition animation];
fadeTextAnimation.duration = 0.5;
fadeTextAnimation.type = kCATransitionFade;

[self.navigationController.navigationBar.layer addAnimation: fadeTextAnimation forKey: @"fadeText"];
self.navigationItem.title = "My new title";

You can adjust the duration and set a timing function to suit, of course.

There are also other types of animation that might work in different circumstances (thanks @inorganik):

kCATransitionFade
kCATransitionMoveIn
kCATransitionPush
kCATransitionReveal