JianshuMyPage

jianshuMyPage.gif Jianshu_screenshot.png

为什么要放一个截图又放一个gif？因为我喜欢文章列表里有图，看着开心哈哈哈哈 只放gif的话列表里显示不出来。

---

其实算不上一个项目，只是因为最近在用简书写博客，有一天突然觉得这个“我”界面很可爱，尤其特别喜欢这个头像会随滑动变大变小的设计，正好最近一直在忙期末，没有时间开比较完整地项目，就想单独写写这个界面，熟一熟手。

整个界面就是一个tableView，上半部分是用headerView，下半部分自定义cell，都没什么好说的。因为只是写界面，所以这里cell里的数据都是静态的。比较有意思的只有两个元素，一个是头像，一个是在headerView和cell中间的一个自定义的tabBar，两个我都是自定义然后封装了。两个元素都有一个非常简单的动画小细节，头像是会随着滑动变大变小，tabBar是当滑到顶部以后就贴在navigationBar下面不动了，可以在上面的gif里看到。

先说头像。
这个圆形还有边线是直接画出来的：

    self.layer.cornerRadius = self.frame.size.width / 2;
    self.clipsToBounds = YES;
    self.layer.borderWidth = 0.5f;
    self.layer.borderColor = [UIColor colorWithWhite:0 alpha:0.3].CGColor;

头像的变大变小我在类里写了个方法：

- (void)scaleWhenScroll: (UIScrollView *)scrollView
{
    CGFloat delta = scrollView.contentOffset.y - (-64);
    CGFloat scale = 1 + (_avatarRadiusMin / _avatarRadiusMax - 1) * delta / maxScrollRange;
    CGFloat shiftY = (_avatarRadiusMin - _avatarRadiusMax) * delta / maxScrollRange;
    if (delta <= maxScrollRange && delta >= 0){
        self.transform = CGAffineTransformMake(scale, 0, 0, scale, 0, shiftY);
    }
}

这里随着滑动距离（delta）的变化，需要算两个值：scale的值和向上平移的值。因为头像的最高点位置始终是保持不变的，所以在缩小的时候实际上是上移了，然后变大的时候下移。这两个值我都是直接采用的线性关系，就是x = k * delta + b这种形式，根据最大和最小两个状态时的实际值就可以得出分别的k和b了。然后就可以直接写出transform矩阵：

transform_matrix.png
这矩阵也是丑得不行...

tabBar就更简单一些。
关键就是判断什么时候滑动已经到达顶部的位置了，这时如果再向上滑，tabBar的y值应该随之增大，因为y值是相对位置，这样的结果就是看上去保持不变。类里的函数我是这样写的：

- (void)shiftWhenScroll:(UIScrollView *)scrollView headerViewHeight:(CGFloat)headerViewHeight initialPositionY:(CGFloat)initialPositionY
{
    if (scrollView.contentOffset.y + 64 >= headerViewHeight - self.frame.size.height){
        CGRect frame = self.frame;
        frame.origin.y = initialPositionY + scrollView.contentOffset.y + 64 - (headerViewHeight - self.frame.size.height);
        self.frame = frame;
    }
}

总结来说，虽然只是个简单小页面，但是写得很开心O(∩_∩)O 主要因为界面简洁干净又可爱，很愿意写。主要的收获就是接触了一下和滑动关联的小动画，这种线性的关系简单实用即开即食，�下次要试一下和位移呈非线性的关系的动画，像系统的easeIn, easeOut那种。