Animate nav bar title text change

Question

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 1

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

Answer 2

Swift 5

let fadeTextAnimation = CATransition()
fadeTextAnimation.duration = 0.5
fadeTextAnimation.type = .fade
    
navigationController?.navigationBar.layer.add(fadeTextAnimation, forKey: "fadeText")
navigationItem.title = "test 123"

For convenience, Ashley Mills solution in Swift:

11/16/2016 Updated for Swift 3 (Thanks to n13)

let fadeTextAnimation = CATransition()
fadeTextAnimation.duration = 0.5
fadeTextAnimation.type = kCATransitionFade

navigationController?.navigationBar.layer.add(fadeTextAnimat‌​ion, forKey: "fadeText")
navigationItem.title = "test 123"

Swift 2.x

let fadeTextAnimation = CATransition()
fadeTextAnimation.duration = 0.5
fadeTextAnimation.type = kCATransitionFade

navigationController?.navigationBar.layer.addAnimation(fadeTextAnimation, forKey: "fadeText")
navigationItem.title = "test 123"

I tip my hat to Ashley!

Answer 3

A solution is to create a custom title and animate its position using the page view controller's hidden scrollView's delegate method. As Zhang stated, the custom title is simply self.navigationItem.titleView = customNavTitleLabel;

Answer 4

If you need to animate only title (not the whole nav bar)

Develop custom title control Link for example

Assign

  let titleView = UIAnimatedTitleView(frame: CGRect(x: 0, y: 0, width: 200, height: 40))
 titleView.text = "Hello"

Animate

var flag = true

@objc private func animateNavigationTitle() {
            guard let titleView = navigationItem.titleView as? UIAnimatedTitleView else { return }

        let fadeTextAnimation = CATransition()
        fadeTextAnimation.duration = 0.5
        fadeTextAnimation.type = kCATransitionPush
        fadeTextAnimation.subtype = kCATransitionFromTop

        titleView.layer.add(fadeTextAnimation, forKey: "pushText")
        titleView.text = flag ? "Hello" : "Good buy" 
        flag = !flag
    }

Answer 5

Found the best way is this category:

@implementation UIViewController (ControllerNavigationEffects)

-(void) setNavigationTitleWithAnimation:(NSString *) title {
    if ([self.navigationItem.title isEqualToString:title]) {
        return;
    }
    @weakify(self);
    float duration = 0.2;
    [UIView animateWithDuration:duration delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        @strongify(self);
        self.navigationItem.titleView.alpha = 0;
    } completion:^(BOOL finished) {}];

    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(duration * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        @strongify(self);
        self.navigationItem.titleView = nil;
        self.navigationItem.title = title;

        [UIView animateWithDuration:duration delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
            self.navigationItem.titleView.alpha = 1;
        } completion:nil];
    });
}

-(void) setNavigationTitleViewWithAnimation:(UIView *) titleView {
    if ([self.navigationItem.titleView isKindOfClass:[titleView class]]) {
        return;
    }
    @weakify(self);
    float duration = 0.2;

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

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


    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(duration * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        @strongify(self);
        self.navigationItem.title = @"";
        self.navigationItem.titleView = titleView;

        [UIView animateWithDuration:duration delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
            self.navigationItem.titleView.alpha = 1;
        } completion:nil];

    });
}