防简书的用户头像动效和自定义的导航栏特效

最近换了工作，一直忙些琐碎的事情，除了学习swift，对技术也没有新的研究。之前看到简书上面有个用户头像的简单动效写出来之后，又根据新产品的需求做了扩展。效果如下：

product.gif

导航栏.gif

自定义view.gif

** 上面两种效果分两种情况：
1、在导航栏上面；
2、自定义的view 的效果
**

一、在导航栏上

其实这个很简单，自定义一个img, 添加到navigationBar上面就好了。

     [self.navigationController.navigationBar addSubview:self.titleIMg];

然后就是跟随scrollview的偏移量改变img 的center和bounds就好了。可能比较费劲的一点就是确定一些比例吧,我也是自己试了几次才确定最佳效果

#define MaxIconWH  70.0  //用户头像最大的尺寸
#define MinIconWH  30.0  // 用户头像最小的头像
#define MaxIconCenterY  44 // 头像最大的centerY
#define MinIconCenterY 22  // icon最小的centerY
#define maxScrollOff 180

下面就是scrollview的代理方法：

我的基本思路是：
1、知道icon 从MaxIconWH到MinIconWH变化时，scrollview的最小偏移量（maxScrollOff）；
2、然后icon的尺寸的变化率等于scrollview的变化率相等就好了。其实就是，icon的尺寸减少的部分/尺寸最大变化量 = scrollview的contentoffset.y / maxScrollOff;
3、当然实际情况还要考虑一些情况，具体实现看代码

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    // 是scrollview的偏移量
CGFloat updateY = scrollView.contentOffset.y ;
NSLog(@"%f",scrollView.contentOffset.y);
    
//  随着scrollview 的滚动，改变bounds
CGRect bound = _titleIMg.bounds;
// 随着滚动缩减的头像的尺寸
CGFloat reduceW =  updateY  *(MaxIconWH - MinIconWH)/(maxScrollOff - 64);
reduceW = reduceW < 0 ? 0 : reduceW;
// 宽度缩小的幅度要和headview偏移的幅度成比例，但是最小的宽度不能小于MinIconWH
CGFloat yuanw =  MAX(MinIconWH, MaxIconWH - reduceW);
_titleIMg.layer.cornerRadius = yuanw/2.0;
bound.size.height = yuanw;
bound.size.width  = yuanw;
_titleIMg.bounds = bound;
    
// 改变center,  max - min是滚动 centery值最大的偏差
CGPoint center = _titleIMg.center;
CGFloat yuany =  MAX(MinIconCenterY, MaxIconCenterY - updateY * (MaxIconCenterY - MinIconCenterY)/(maxScrollOff - 64) ) ;
yuany = yuany > MaxIconCenterY ? MaxIconCenterY : yuany;

center.y = yuany;
_titleIMg.center = center;
}

二、自定义的view

其实这个效果是结合下拉放大效果一起做的。现在主流的scrollview或其子类都有头部(headView)下拉放大效果。
scrollview下拉放大效果我在文章: iOS Scrollview 的头部view的拉伸伸缩效果里面写过了，但是不同的情况细微之处有点不同，我下面放的demo里面也有实现。

实际我的导航栏不是真正的导航栏，是一个自定义的navigationBarView代替导航栏的。然后他的颜色和scrollview里面的headview背景颜色是一样的。造成了好像是icon好像是在headview的，实际父控件是navigationBarView，navigationBarView和scrollview是同一层级的。

图层.png

** 算了解释这挺累地，大家自己看代码吧，demo地址：
demo
**

** 最后还有一个问题解释一下，向我上面那种情况，icon一般容易超出父视图的frame，不能和用户进行交互。那如果需要交互的时候肿么办呢？
我的做法是做一个button，判断icon超出父视图时，就跟随icon，这样就可以和用户进行交互了
**