Animate Color Navigation Bar when ScrollView Down

Question

in my View Controller I have a collectionView with 3 cells and horizontal scrolling ..

In each cell I have a TableView

I have a problem with animation to change the color of the navigation bar in the view controller .

To manage the method - (void) scrollViewDidScroll: (UIScrollView *) scrollView I created a delegate that manages the color change of the navigation bar ..

My problem is that I can't animate the navigation bar's alpha color using as a reference scrollView.contentOffset.y ... The color changes immediately but is not animated based on the scrollView's contentOffset.

can anyone help me figure out where i'm wrong?

TableView inside a CollectionView cell

-(void)scrollViewDidScroll:(UIScrollView *)scrollView {
    [self.delegate cellScrollDownWithOffset:scrollView.contentOffset.y];
}

View Controller with collectionView received delegate

#pragma mark - BaseVerticalCell delegate

-(void)cellScrollDownWithOffset:(CGFloat)offset {

    [UIView animateWithDuration:.3 animations:^{

    UIColor *opacheColor = [UIColor colorWithHexString:@"#F9F9FA" setAlpha:offset /150];
    UIColor *defaultColor = [UIColor colorWithWhite:1 alpha:offset /150];

    self.navigationController.navigationBar.barTintColor = offset/ 150 > 0 ? opacheColor : defaultColor;
    }];
}

Answer 1

Try setting the properties you want to animate outside of the animation block (making sure to call layoutIfNeeded first to make sure any pending layout adjustments that haven't been committed are fully layed out), then animate the layout of the navBar (instead of animating the property changes). Here's an example:

- (IBAction)animateNavBarColor:(id)sender {
    [self.navigationController.navigationBar layoutIfNeeded];
    self.navigationController.navigationBar.barTintColor = [UIColor blackColor];
    [UIView animateWithDuration:2.0f animations:^{
        [self.navigationController.navigationBar layoutIfNeeded];
    }];
}

So specifically for your scenario, try adjusting your code to this:

- (void)cellScrollDownWithOffset:(CGFloat)offset {
    [self.navigationController.navigationBar layoutIfNeeded];
    UIColor *opacheColor = [UIColor colorWithHexString:@"#F9F9FA" setAlpha:offset /150];
    UIColor *defaultColor = [UIColor colorWithWhite:1 alpha:offset /150];
    self.navigationController.navigationBar.barTintColor = offset/ 150 > 0 ? opacheColor : defaultColor;
    [UIView animateWithDuration:.3 animations:^{
        [self.navigationController.navigationBar layoutIfNeeded];
    }];
}

There's some references to animating using this method in the WWDC 2012 session: https://developer.apple.com/videos/play/wwdc2012/228/ about "Best Practices for Mastering Autolayout"

Here's another reference on the Apple Developer Forums: https://forums.developer.apple.com/thread/60258 specifically related to animating the navBar color -- specifically this portion of the response from Rincewind:

If you call -layoutIfNeeded on the navigation bar during the animation block it should update its background properties,