贝塞尔Loading——化学风暴

这是 JsonChao 的第 275 期分享

    谈到贝塞尔曲线，很多人会觉得高逼格、复杂、头疼，实则不然，贝塞尔曲线经过android封装，已经显得娇俏可爱，简单好用，之前一些红极一时的效果也均是由其打造，比如QQ的“一键退潮”效果、电子书曲面翻页效果…… 现在咱们就用贝塞尔曲线一起从0到1打造一个拥有极致体验、清秀灵动的GABottleLoading效果；

    好了，不多吹NB了，老规矩先上一个原始效果图：

    看到这个效果，估计有人开喷：

    “WC，听你吹半天NB，这个效果老子两年前就看过了，github上早有了，垃圾…

    此时，沉稳优雅、帅气逼人的GA哥在github上通过关键字搜索，两个实现赫然出现在我的面前，看来天不助我，然后通过查看他们的实现，发现其中一个实现的很棒，老实说GA哥都没有信心实现到如此完美，but看过之后发现他是直接加载gif，fuck， too young, too simple, 另一个呢？通过代码实现，现在让我们瞻仰下他实现的效果：

    从效果上来看，基本实现了瓶身、波纹晃动，但真正复杂的气泡与动态并倾斜的水面的脱离过程却并未实现，而这才是GA哥感兴趣的地方，此时天空响起一声惊雷，GA哥闪亮登场；

    首先，让我们一起分解下这个动效，简单来看，该效果可以分成以下几个部分：

1.水滴从水面弹出和融入；

2.水面的波动；

3.瓶身的绘制；

    接下来，咱们一起从以上三个内容逐个处理：

一、水滴从水面弹出和融入

    正式分析之前，请和GA哥一起通过一个慢镜头看看其中一个水滴脱离水面的过程;

    wc，不看不知道，没想到过程如此细腻！

    是不是突然感觉这个动效没那么简单了？是不是有点难度了？尤其是水滴离开水面的过程中，水面还在不断的变动，而整个水滴弹出和融入的过程都需要和水面柔和爽朗的连接;

    俗话说，“擒贼先擒王”，咱们第一步就来搞定水滴的粘连出入过程！

    首先我们来看一下过程分解图（请关注左边的水滴）：

    由上图可以观察到，到（4）的时候，水滴已经完全脱离了水面，只不过存在一定的粘连（由于水的张力）；

    接下来我们分析下水滴脱离水面的过程，为了更好的说明，将水面简化为一个静态的斜面，这样更加直观；

    那么原始模型如下图，其中斜线代表水面，圆代表水滴，是不是很简单？

    接下来我们需要考虑，如何处理水滴和水面的粘连效果，标题既然叫做贝塞尔曲线打造极致GABottleLoading效果，咱们肯定是使用贝塞尔曲线这一神器了，既然使用贝塞尔曲线，那么不用多说，就需要考虑起始点、终点、控制点这些核心数据；

    从效果来看，起始点咱们可以直接从水滴上取，然而具体取到何处呢？咱们可以以水滴冒出水面的高度为基准，然后定义一个适当比例，以该比例计算具体数据点；

    既然起始点在水滴上，那么终点毋庸置疑在水面上，具体取于何处呢？咱们可以采用如下方式（至于为何要这么取则是GA哥的思路）：

    使用一个矩形框框住水滴区域，使水滴距离左右两边 L1、L2，并且L1 == L2 , ;

    此时矩形框与水面形成交点w1、w2，咱们可以直接选取如图所示w1、w2作为两个终点，这两个点即表示水滴由于张力而形成的拖尾和水面的接触点；

    经过以上思路，咱们画出以下图示：

    看上面这张图，其中L3为水面上点w1和w2的连接线，L4为经过圆心并且和L3垂直的直线，wd为L3与L4的交点，，Ct为圆最顶端数据点，C1、C2为垂直于L4的L5与圆环的交点;

    咱们将辅助线都去掉，那么就得到如下的图：

    在图上，C1、C2为起始点，W1、W2为终点；

    好了，起始点、终点咱们定下了确定的方法，控制点呢？

    且继续看下图；

    图中L6、L9分别为点w1及w2所在的水面的切线，L7、L8分别为C1及C2处的切线，q1为L6与L7的交点、q2为L8与L9的交点，q1与q2则为咱们找的两个控制点；

    到此，包括起始点、终点、控制点在内的贝塞尔曲线所需的核心数据咱们就都找到了，如下图所示的6个点；

    6个点、6个点、6个点，重要的事情说三遍……

    然后咱们利用以上6个点绘制两条二阶贝塞尔曲线，形成相应拖尾粘连效果，具体效果图如下：

    我们把不需要的点去除，并填充上颜色，看看最后的效果:

    那么这部分整体效果的结果如何？请看！

    这个不够直观？那让我们加上辅助点，请看！

• 圆上的白色的点从左往右分别是c1、c2，分别表示拖尾与圆的接触点，即贝塞尔曲线的起始点；

• 圆两侧两侧红色的点从左往右为分别为w1、w2，表示拖尾与水面的接触点，即贝塞尔曲线的终点;

• 蓝色点从左往右分别为q1、q2，分别表示左右两侧的控制点；

    最后，圆完全脱离水面如下图：

    圆拖着拖尾上移：

    最后拖尾断裂：

    最后水滴完全脱离，水面恢复平静:

    让我们一起来看看整个过程：

    ok，到此，水滴从水面弹出和融入的思路分析就此结束；

二、水面的波动分析

    同样，咱们先看下原始效果图：

    github上已实现效果图：

    没有对比就没有伤害，看起来是不是觉得原始效果图要柔和自然很多？那么到底是什么原因呢？GA哥分析主要是以下两点原因：

• 1.波动效果，原效果图是一个减速过程，当水波达到最高点的时候速度变为了0，而对比图是一直匀速的过程；

• 2.上面流动的水和下面静止的水的连接处理有差异；

    当然，以GA哥的尿性肯定是以原效果图为目标，而当GA哥在PS中采用三阶贝塞尔曲线去拟合的时候，发现还是存在一定的瑕疵，不能完全的拟合上;

    最终，最右边的连接弧度采用上图所示数据作为参数，实现的效果如下:

    WC，连接处不够柔顺，此时GA哥采用了以下处理方案；

    将波动的水面抬高，和底部静止的水面保持一定的距离，然后采用二阶贝塞尔曲线将两者的连接处进行连接:

    恩，上图的效果还是可以接受的，让我们看看动起来什么效果:

• 作者注：恩，此时如GA哥的秀发般飘逸了！
  —— GAStudio哥

三、瓶身的绘制

    瓶身绘制就是一个字——“扣”，扣细节，然后达到各个接触点比较完美的连接;

    让我们从左半部分的上方开始讲起。
    瓶口处的的弯角，一开始GA哥也是认为是一个半圆（180度），然后再连接直线。然而这样做效果不是很好，所以GA哥采用四分之一圆环（90度），然后连接45度的直线，最后连接垂直的瓶嘴直线，效果如下图：

• 路人甲：纳尼？怎么有这么明显的棱角？作为细致的GA哥，依旧没有放过这个细节。

• 路人乙：敢问GA哥有什么有效的方案？使用Paint.Cap.ROUND？

• GA哥：No, No, No, Paint.Cap.ROUND 只对line的头部有效，GA哥采用了将Paint的PathEffect设置成了CornerPathEffect，那么就会将直线和直线间的连接处，自动做了圆滑处理。

    那么效果如何呢？请看下图：

wc，好帅，好柔滑有木有！

此外，瓶身连接处（如下图红色标注处）也是需要注意的，要么计算准确，完美的连接；要么索性有一点缺口，采用arcTo绘制瓶身，此时缺口会自动连接上直线，再加上之前配置的CornerPathEffect，就会使得该处显得自然:

    接着瓶身采用圆弧绘制，从多少到多少角度都需要进行计算;

    最后底部采用直线直接连接;

• GA哥：恩，你们是不是觉得GA哥会说，右半部分和左半部分采用一样的思路？

• 路人甲：难道不是吗？难道GA哥有啥高招？

• GA哥：恩，GA哥这个人比较懒，所以什么事都想偷懒；

    恩，我们都不用仔细观察，这个瓶子是左右对称的！所以直接反转过来就行了哇！
    关键代码如下：

总结

• GA哥：总结？总结啥呢？

• 路人甲：看看效果呗，看你吹了这么久，哈哈！

• 路人乙：赞同楼上的。

• 路人丙：赞同楼上的。

• 路人丁：赞同楼上的。

• …

• GA哥：盛情难却哇，那就献丑了！

github地址: https://github.com/Ajian-studio/GABottleLoading

END

往期推荐

点击下方卡片关注 JsonChao，为你构建一套

未来技术人必备的底层能力系统

▲ 点击上方卡片关注 JsonChao，构建一套

未来 Android 开发必备的知识体系

欢迎把文章分享到朋友圈

年度成长社群