項(xiàng)目中可能有這樣一種需求，類似餓了么訂單詳情頂部那種漸變效果，偶然看到這個(gè)后，發(fā)現(xiàn)在項(xiàng)目中也可以用，所以就提議加上了這個(gè)功能，功能實(shí)現(xiàn)點(diǎn)非常簡(jiǎn)單，這里我不做理論方面的闡述，直接看重要代碼即可：

源碼參考地址

先看下動(dòng)圖效果：

topAnimation.gif

這里一般適用于滾動(dòng)視圖滾動(dòng)，頂部改變的情形，需要監(jiān)聽滾動(dòng)視圖的contentOffset:

 [_tableView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew context:NULL];

技術(shù)實(shí)現(xiàn)，需要拿到頂部視圖的起始frame以及終止frame

具體的變化控制如下：

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context {
    if ([keyPath isEqualToString:@"contentOffset"]) {
        CGPoint offset = [change[NSKeyValueChangeNewKey] CGPointValue];
        if (offset.y <= 0) {
            _topView.frame = CGRectMake(0, 0, self.view.frame.size.width, topHeight);
        }else {
            CGFloat scale = (topHeight - offset.y) / topHeight;
            if (scale <= 0) {
                scale = 0;
            }
            if (scale >= 1) {
                scale = 1;
            }
            CGFloat height = topHeight - (1- scale) * (topHeight - _destHeight);
            _topView.frame = CGRectMake(0, 0, self.view.frame.size.width, height);
            _tableView.contentInset = UIEdgeInsetsMake(height, 0, 0, 0);
            [_topView updateTopViewWithScale:scale];
        }
    }
}

這里主要控制topView的frame漸變，至于topView中的個(gè)別控件控制，這里以titleLabel為例：

- (void)updateTopViewWithScale:(CGFloat)scale {
    CGPoint center = _titleLabel.center;
    center.x = (_titleSourceCenter.x + (1-scale) * (_titleDestCenter.x - _titleSourceCenter.x));
    center.y = _titleSourceCenter.y - (1-scale) * (_titleSourceCenter.y - _titleDestCenter.y);
    _titleLabel.center = center;
    CGFloat font = 18 * scale;
    if (font < 15) {
        font = 15;
    }
    _titleLabel.font = [UIFont systemFontOfSize:font];
    [_titleLabel layoutIfNeeded];
}

只需要知道titleLabel的起始和終止的center，以及font即可

源碼值提供了實(shí)現(xiàn)思路和方法，需要的可以移步這里，小可還做了一些常用的工具類，有感興趣的，可以到這里查看