項(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)思路和方法张惹，需要的可以移步這里，小可還做了一些常用的工具類岭洲，有感興趣的宛逗，可以到這里查看
