ios 自定義導航欄添加上滑下滑漸變

gif圖片.gif

最近因爲項目需要導航欄上滑下滑出現漸變的效果，話不多說，直接上代碼

1首先我是自定義了一個導航欄，

@interface ZCTopNavView : UIView

2在.m文件初始化下view上面的按鈕,定義了三個按鈕

/* 左邊Item */
@property (strong , nonatomic)UIButton *leftItemButton;
/* 右邊Item */
@property (strong , nonatomic)UIButton *rightItemButton;
/* 右邊第二個Item */
@property (strong , nonatomic)UIButton *rightRItemButton;

3.在.m文件裏添加2個通知，用在viewcontroller裏面接受通知

    //滾動到詳情
    CreateWeakSelf;
    _dcObserve = [[NSNotificationCenter defaultCenter]addObserverForName:@"SHOWTOPTOOLVIEW" object:nil queue:[NSOperationQueue mainQueue] usingBlock:^(NSNotification * _Nonnull note) {
        weakSelf.topCenterTitleImage.hidden = NO;
        [weakSelf.leftItemButton setBackgroundImage:[UIImage imageNamed:@"pplm_jt"] forState:0];
        [weakSelf.rightItemButton setBackgroundImage:[UIImage imageNamed:@"xq_fx"] forState:0];
        [weakSelf.rightRItemButton setBackgroundImage:[UIImage imageNamed:@"xqsy"] forState:0];
    }];
    
    _dcObserve = [[NSNotificationCenter defaultCenter]addObserverForName:@"HIDETOPTOOLVIEW" object:nil queue:[NSOperationQueue mainQueue] usingBlock:^(NSNotification * _Nonnull note) {
        weakSelf.topCenterTitleImage.hidden = YES;
        [weakSelf.leftItemButton setBackgroundImage:[UIImage imageNamed:@"spxq_zjt"] forState:0];
        [weakSelf.rightItemButton setBackgroundImage:[UIImage imageNamed:@"spxq_fx"] forState:0];
        [weakSelf.rightRItemButton setBackgroundImage:[UIImage imageNamed:@"spxq_fh"] forState:0];
    }];

4.我在viewcontroller裏面簡單寫了個webview 你也可以寫成uitableview或者uiscrollerview。。繼承下代理方法，

#pragma mark - <UIScrollViewDelegate>
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat alpha ;
    CGFloat alp;
     //+20是狀態欄的高度 因爲web是全屏顯示，/300是 距離，就是滑動到y軸爲多少是 透明度爲1
        alpha = (scrollView.contentOffset.y+20)/300;
      /*因爲view上面分爲2個動畫效果的 
      一個當view alpha爲0的時候 上面的button視圖，
       隨着alpha增加 而消失，當消失的快看不見的時候
      button的第二視圖開始從模糊顯示出來，最終都爲1
*/
      alp = (scrollView.contentOffset.y+20)/200;
    
    topToolView.backgroundColor= [UIColor colorWithRed:250 green:250 blue:250 alpha:alpha];
    topToolView.leftItemButton.alpha = 1-alp;
    topToolView.rightItemButton.alpha = 1-alp;
    topToolView.rightRItemButton.alpha = 1-alp;
//臨界點，就是滑動到這距離時好第一視圖消失，第二視圖開始顯示
    if ((scrollView.contentOffset.y)>=180) {
        
        [[NSNotificationCenter defaultCenter]postNotificationName:@"SHOWTOPTOOLVIEW" object:nil];
        CGFloat alphaj ;
        
            alphaj = (scrollView.contentOffset.y-100)/200;
        
        
        topToolView.leftItemButton.alpha = alphaj;
        topToolView.rightItemButton.alpha = alphaj;
        topToolView.rightRItemButton.alpha = alphaj;
        topToolView.topCenterTitleImage.alpha = alphaj;
        
        
    }else {
        [[NSNotificationCenter defaultCenter]postNotificationName:@"HIDETOPTOOLVIEW" object:nil];
    }
}

最後附上demo
github下載地址
不麻煩的話可以 給個 star
你們的star 是我進步的動力

有什麼問題可以私信我，
歡迎叨擾，
非誠勿擾 謝謝