Animate nav bar title text change

Question

Trong ứng dụng, tôi có một bộ điều khiển xem trang cho phép người dùng vuốt giữa các "phần" khác nhau của ứng dụng, và ở trên cùng trong thanh điều hướng tôi thay đổi văn bản tiêu đề phần người dùng đã vuốt qua số pageViewController:didFinishAnimating:previousViewControllers:transitionCompleted:. Hiện tại, ngay lập tức thay đổi văn bản tiêu đề khi hoạt ảnh đã hoàn thành. Tôi muốn cải thiện điều này với một số hình ảnh động, một hiệu ứng mờ dần trong và ngoài.

Lần đầu tiên tôi cố gắng triển khai [UIView animationWithDuration:...] để tạo hoạt ảnh thay đổi văn bản tiêu đề, nhưng nó không hoạt ảnh và chỉ cập nhật ngay lập tức. Sau đó, tôi tự hỏi liệu có thể cập nhật alpha của tiêu đề thanh điều hướng khi người dùng cuộn theo chiều ngang dựa trên khoảng cách họ đã cuộn, đạt 0 alpha khi phần tiếp theo sắp xuất hiện trên màn hình hay không, sau đó tôi có thể thay đổi ngay lập tức văn bản trong khi nó ở 0 và sau đó nhanh chóng biến mất thành 1 alpha. Nhưng tôi không thấy phương thức trên UIPageViewControllerDelegate được gọi khi vị trí cuộn đã được cập nhật.

Nếu có thể, thay vì chỉ phai vào và ra, tôi có thể mờ dần cũng như di chuyển vị trí văn bản tiêu đề trong thanh điều hướng như hoạt ảnh mặc định xảy ra khi điều hướng trở lại từ khoảng cách đẩy thông qua cử chỉ vuốt. Tôi sẽ trượt tiêu đề phần cũ khi người dùng cuộn và cung cấp tiêu đề phần tiếp theo ở phía bên kia, để khi quá trình chuyển đổi hoàn thành tiêu đề phần trước đó là tắt màn hình và tiêu đề mới hoàn toàn tập trung để thay thế hoàn tất. Nhưng một lần nữa điều này đòi hỏi phải biết chính xác có bao nhiêu người dùng đã cuộn bộ điều khiển xem trang.

Có thể triển khai bất kỳ hoạt ảnh mong muốn nào không?

Answer 1

Nếu bạn muốn động giữa các chuỗi tiêu đề khác nhau, sử dụng như sau:

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"; 

Bạn có thể điều chỉnh thời gian và thiết lập một chức năng thời gian cho phù hợp, tất nhiên .

Ngoài ra còn có các loại hình ảnh động có thể làm việc trong những hoàn cảnh khác nhau (nhờ @inorganik):

kCATransitionFade 
kCATransitionMoveIn 
kCATransitionPush 
kCATransitionReveal 

Answer 2

Giải pháp là tạo tiêu đề tùy chỉnh và tạo hiệu ứng vị trí của nó bằng cách sử dụng phương thức ủy nhiệm cuộn của trình xem trang của trình điều khiển trang. Như Zhang tuyên bố, tiêu đề tùy chỉnh đơn giản là self.navigationItem.titleView = customNavTitleLabel;

Answer 3

Tìm thấy cách tốt nhất là thể loại này:

@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]; 

    }); 
} 

Answer 4

Để thuận tiện, Ashley Mills giải pháp trong Swift:

11/16/2016 Cập nhật cho Swift 3 (Cảm ơn 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" 

Tôi tip mũ của tôi để Ashley!