背景
最近接到了一个Fancy的动效UI，主要是为了在首屏放出更多有用信息，提升用户购买转化率
这也是我近几年遇到的一个相对复杂的UI效果了。一开始看到这个效果，其实心里是没有底能不能实现的。因为在我github star的1.4k+库中，就没有见过类似的效果，而且单从视频看下来，有物理上的滑动冲突。但是别无选择，最终还是通过各种demo实验，把效果实现了。下面就给大家介绍一下实现的方式tricky在哪里
设计效果
那么这个效果Fancy在哪里呢？我们来拆解一下：
- 可以看到头部图片区域在上滑的时候有一个放大的效果，头部区域有高斯模糊和渐变效果
- 主要信息区域有一个Title的展开Alpha渐变动画
- 在列表上滑，在头部放大，Title展开的同时，列表还可能往下顶
头部图片放大效果实现
其实同步的放大效果，相对来说是比较简单的，就是一个上滑的偏移量变化，计算出上滑放大的效果
上滑的进度 = 当前上滑距离 / 可以上滑距离
可以上滑距离 = P2 - P1
当前上滑距离 = contentOffsetY （系统UI控件可以获取）
头图高度 = min(最小高度 + (最大高度 - 最小高度) * 上滑进度, 最大高度)
最小高度 = 半屏时头图的高度，默认是200pt
最大高度 = 全屏时屏幕的宽度，因为头图的最大尺寸宽高比是1:1
聪明的同学会发现，上面的公式中，在满足 最小高度 + (最大高度 - 最小高度) * 上滑进度 < 最大高度 时
有可能 (最大高度 - 最小高度) * 上滑进度 > 可以上滑距离
这个点，其实也是我在看到这个效果时比较担心的一个点，因为这个时候手指在屏幕上往上推，但视图却在往下顶，是不跟手的状态。
好在真机体验没有明显的体感问题，所以也没有什么特殊处理
为什么这里需要用一个上滑的进度，而不用上滑的绝对值呢？其实我一开始用的是绝对值，但是在(最大高度 - 最小高度) * 上滑进度 > 可以上滑距离时，直接把剩余的高度暴力加上，就会出现一个严重的跳动效果。
文字展开动画效果实现
这部分也是整个效果最难的，那么他到底难在哪里？下面我给大家拆解一下
首先iOS的文字UI控件，是没法做到视频中逐行展开并且带有Alpha动画的。
那么系统的控件实现不了，有什么其他办法呢？脑海里疯狂回忆我star的1.4k+库里面搜寻类似效果，结果当然是无果 又是一顿Google搜索，iOS expandable UILabel animation，iOS expandable UILabel...，换了各种关键字，结果都没有找到好的解决方案。
只能硬着头皮自己想。
首先我不考虑展开效果和Alpha动画的事情，先做到，从一行上滑时变成多行。
达到这个效果还是比较简单的，我们只需要把Title label的展示行数设置成无数行，然后高度强制设置成一行的高度，滑动的时候用类似头部放大效果的公式，即可达到该效果
到这里，我内心稍微放松了一下，想的是终于有一个可以保底交付的效果了，展开动效的要是做不了，就用这个交付吧。。。
我想啊想啊想，逐行展开，逐行展开。关键是先要逐行，逐行之后再做y坐标偏移动画就简单了。
那么我能不能把文字UI控件截图，然后逐行裁剪做动画呢？
管他的，先搞个demo试试
我擦，牛逼呀，这个方法可以诶。再来看看这个方法的原理
- 第一步把文字部分生成一张图片
- 计算出有多少行文字
- 将每一行文字裁切成一张图片
最终效果
完美啊！