翻译篇：实现Twitter个人详情动态效果

发表于 | 分类于 |

原文由ariok发表，地址是implementing-the-twitter-ios-app-ui

效果图如下：

原来作者的代码会存在一个Bug：

当快速下拉时，个人头像并不会立刻显示在HeaderView上方，我已经向作者提交了Pull requests

编译过程中会发生错误，因为swift更新了，所以需要自己解决下错误。

结构描述

在编码之前，我将对UI的结构做一个简单的介绍。

打开Main.storyboard文件。在唯一的一个控制器view中，你可以发现两个主要的对象。第一个是显示Header的视图，第二个是一个包含个人头像(我们叫它Avatar)和其他与账号相关，比如用户名、follow按钮的ScrollView。Sizer控件只是用来确认ScrollView内容是否能进行垂直滚动。

就像你所看到的，这个结构非常简单。需要的注意的是，我将Header放在ScrollView外面，而不是把它和其他ScrollView子控件放在一起。因为这样做可以让这个结构具备更好的扩展性。

开始编码

如果你仔细看完动画，你会注意到你可以管理两个不同的动作：

1) 用户下拉（当ScrollView内容已经在屏幕的顶部时）

2) 用户上/下滚动

这个动作可以分解成四步：

2.1) 向上滚动，Header控件缩小直到它的尺寸和导航栏默认尺寸相等，然后这个Header控件就会粘在屏幕的上方

2.2) 向上滚动， Avatar（头像）逐渐变小

2.3) 当Header控件和ScrollView的子控件重叠时，Avatar（头像）在Header控件底部

2.4) 当用户名Label的顶部和Header控件底部重叠时，一个新的白色Label将会从Header控件的中底部显示。并且Header控件的图片变模糊。

打开ViewController.swift，让我们一步一步地实现这些功能

设置控制器

第一件需要去做的事是获取ScrollView的offset信息。通过实现UIScrollViewDelegate协议的scrollViewDidScroll方法，我们可以很容易地做到这一点。

一种最简单的展示一个view上变化的方式是使用CoreAnimation三维变换，并且设置新值给layer.transform属性。

这个关于CoreAnimation的教程可能会让它变得简便：

http://www.thinkandbuild.it/playing-around-with-core-graphics-core-animation-and-touch-events-part-1/.

以下是scrollViewDidScroll方法的第一部分：

1
2
3
let offset = scrollView.contentOffset.y
var avatarTransform = CATransform3DIdentity
var headerTransform = CATransform3DIdentity

我们可以在这个方法里面获取当前的竖直偏移，并且初始化两个将要在方法后面设置的转换信息。

下拉

让我们对下拉动作进行处理：

1
2
3
4
5
6
7
8
9
if offset < 0 {
    
    let headerScaleFactor:CGFloat = -(offset) / header.bounds.height
    let headerSizevariation = ((header.bounds.height * (1.0 + headerScaleFactor)) - header.bounds.height)/2.0
    headerTransform = CATransform3DTranslate(headerTransform, 0, headerSizevariation, 0)
    headerTransform = CATransform3DScale(headerTransform, 1.0 + headerScaleFactor, 1.0 + headerScaleFactor, 0)
    
    header.layer.transform = headerTransform
}

首先，我们检查偏移量是否为负数，即ScrollView是否已出现弹性区域。

剩下的代码是一些简单的数学运算。

这个Header控件需要放大来保持它的上边缘和屏幕顶部相对固定，并且这个图片是从底部开始放大的。

总的来说，这个变换主要由缩放，然后转化view的尺寸变化为到顶部的距离构成。事实上，你可以朝屏幕顶端移动ImageView图层的中点并且进行缩放来相同的效果。

使用一个属性来对头部缩放比例进行计算。我们希望Header控件参照偏移量进行适当的缩放。换种说法：当偏移量为Header视图控件的两倍时，头部缩放比例应该设置为2.0。

我们需要处理的第二个动作是上下滚动。让我们看看如何一步一步地完成主要视图的变换。

Header（第一阶段）

当前的偏移量应该大于0。Header控件应该根据以下的偏移量来进行竖直移动，直到它到达指定高度（我们下面将会对Header模糊进行讲解）。

1
headerTransform = CATransform3DTranslate(headerTransform, 0, max(-offset_HeaderStop, -offset), 0)

这段代码真的是很简单。我们只需要设置Header控件偏移一个最小值，Header控件将会在offset_HeaderStop这个点停止移动。

因为我比较懒，所以我写死了一些数值，比如offset_HeaderStop。我们可以通过更加优雅的方式，比如计算UI控件的位置来实现相同的效果。或许在下一次我会试试。

AVATAR（头像）

这个头像（图片）以和下拉相同的逻辑进行缩放，只是在这种情况下，图片是和底部贴合而不是顶部。这段代码和上面比较相似，除了减小缩放的比例为1.4。

1
2
3
4
let avatarScaleFactor = (min(offset_HeaderStop, offset)) / avatarImage.bounds.height / 1.4 // Slow down the animation
let avatarSizeVariation = ((avatarImage.bounds.height * (1.0 + avatarScaleFactor)) - avatarImage.bounds.height) / 2.0
avatarTransform = CATransform3DTranslate(avatarTransform, 0, avatarSizeVariation, 0)
avatarTransform = CATransform3DScale(avatarTransform, 1.0 - avatarScaleFactor, 1.0 - avatarScaleFactor, 0)

就像你看到的，当Header控件停止变化时，我们通过min函数来停止对个人头像的缩放（offset_HeaderStop）。

此时，我们根据当前的偏移量来设置最顶层的图层。除非偏移量大于等于offset_HeaderStop，否则顶部图层始终是个人头像。当偏移量大于offset_HeaderStop，这个图层就变成了Header控件。

1
2
3
4
5
6
7
8
9
10
11
if offset <= offset_HeaderStop {
    
    if avatarImage.layer.zPosition < header.layer.zPosition{
        header.layer.zPosition = 0
    }
    
}else {
    if avatarImage.layer.zPosition >= header.layer.zPosition{
        header.layer.zPosition = 2
    }
}

白色Label

以下是白色Label执行动画的代码：

1
2
let labelTransform = CATransform3DMakeTranslation(0, max(-distance_W_LabelHeader, offset_B_LabelHeader - offset), 0)
headerLabel.layer.transform = labelTransform

这里介绍两个新的变量：当偏移量等于offset_B_LabelHeader时，这个黑色的用户名Label刚好到达Header视图的底部。


distance_W_LabelHeader是Header控件的底部和Header中的白色Label中点的距离。


这个转换通过以下逻辑进行计算：黑色Label一旦喝Header控件相交，白色Label就立即显示，并且白色Label到达Header控件的中点时停止。所以使用以下代码来创建Y的偏移：

1
max(-distance_W_LabelHeader, offset_B_LabelHeader - offset)

模糊

最后一个效果是模糊Header控件。为了得到合适的解决方案，我使用了三个不同的库…我还尝试创建自己的OpenGL ES，但是实时更新模糊效果总是非常迟缓。

我了解到我可以只对模糊进行一次计算，让模糊和非模糊的图片进行重叠，并且改变透明度值。我很确定，这就是Twitter采用的方法。

在viewDidAppear中我们计算模糊的Header并且通过设置透明度为0来进行隐藏。

1
2
3
4
5
headerBlurImageView = UIImageView(frame: header.bounds)
headerBlurImageView?.image = UIImage(named: "header_bg")?.blurredImageWithRadius(10, iterations: 20, tintColor: UIColor.clearColor())
headerBlurImageView?.contentMode = UIViewContentMode.ScaleAspectFill
headerBlurImageView?.alpha = 0.0
header.insertSubview(headerBlurImageView, belowSubview: headerLabel)

模糊的view可以使用FXBlurView得到。

在scrollViewDidScroll方法中，我们只需要根据偏移量来更新透明度就行了。

1
headerBlurImageView?.alpha = min (1.0, (offset - offset_B_LabelHeader)/distance_W_LabelHeader)

以上计算逻辑主要为：透明度最大值必须为1，模糊效果必须在黑色Label到达Header控件时出现，在白色Label停止后停止加深模糊。

源码地址