类似饿了么订单详情顶部动画效果

项目中可能有这样一种需求，类似饿了么订单详情顶部那种渐变效果，偶然看到这个后，发现在项目中也可以用，所以就提议加上了这个功能，功能实现点非常简单，这里我不做理论方面的阐述，直接看重要代码即可：

源码参考地址

先看下动图效果：

topAnimation.gif

这里一般适用于滚动视图滚动，顶部改变的情形，需要监听滚动视图的contentOffset:

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

技术实现，需要拿到顶部视图的起始frame以及终止frame

具体的变化控制如下：

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)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中的个别控件控制，这里以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即可

源码值提供了实现思路和方法，需要的可以移步这里，小可还做了一些常用的工具类，有感兴趣的，可以到这里查看