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.

  • User interaction on an animated UIButton
  • How to stop and reverse a UIView animation?
  • Creating slow scrolling to indexPath in UICollectionView
  • How to animate the width and height of a UIView in Xcode?
  • Is there a way to animate changing a UILabel's textAlignment?
  • How to load GIF image in Swift?
  • 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?

    4 Solutions Collect From Internet About “Animate nav bar title text change”

    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
    

    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!

    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;

    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];
    
        });
    }