貝塞爾風暴 － 超炫GABottleLoading效果

談到貝塞爾曲線，不少人會以爲高逼格、複雜、頭疼，實則否則，貝塞爾曲線通過android封裝，已經顯得嬌俏可愛，簡單好用，以前一些紅極一時的效果也均是由其打造，好比QQ的「一鍵退潮」效果、電子書曲面翻頁效果...... 如今我們就用貝塞爾曲線一塊兒從0到1打造一個擁有極致體驗、清秀靈動的GABottleLoading效果；

好了，很少吹NB了，老規矩先上一個原始效果圖：

若是你想看 GAStudio Github主頁，請戳這裏；
若是你想看 GAStudio更多技術文章，請戳這裏；
QQ技術交流羣：277582728；
github地址: github.com/Ajian-studi…

看到這個效果，估計有人開噴：

「我擦，聽你吹半天NB，這個效果老子兩年前就看過了，github上早有了，垃圾......」

此時，沉穩優雅、帥氣逼人的GA哥在github上經過關鍵字搜索，兩個實現赫然出如今個人面前，看來天不助我，而後經過查看他們的實現，發現其中一個實現的很棒，老實說GA哥都沒有信心實現到如此完美，but看過以後發現他是直接加載gif，fuck， too young, too simple, 另外一個呢？經過代碼實現，如今讓咱們瞻仰下他實現的效果：

從效果上來看，基本實現了瓶身、波紋晃動，但真正複雜的氣泡與動態並傾斜的水面的脫離過程卻並未實現，而這纔是GA哥感興趣的地方，此時天空響起一聲驚雷，GA哥閃亮登場；

首先，讓咱們一塊兒分解下這個動效，簡單來看，該效果能夠分紅如下幾個部分：

1.水滴從水面彈出和融入；

2.水面的波動；

3.瓶身的繪製；

接下來，我們一塊兒從以上三個內容逐個處理：

1、水滴從水面彈出和融入

---

正式分析以前，請和GA哥一塊兒經過一個慢鏡頭看看其中一個水滴脫離水面的過程;

我擦，不看不知道，沒想到過程如此細膩！

是否是忽然感受這個動效沒那麼簡單了？是否是有點難度了？尤爲是水滴離開水面的過程當中，水面還在不斷的變更，而整個水滴彈出和融入的過程都須要和水面柔和爽朗的鏈接;

俗話說，「擒賊先擒王」，我們第一步就來搞定水滴的粘連出入過程！

首先咱們來看一下過程分解圖（請關注左邊的水滴）：

由上圖能夠觀察到，到（4）的時候，水滴已經徹底脫離了水面，只不過存在必定的粘連（因爲水的張力）；

接下來咱們分析下水滴脫離水面的過程，爲了更好的說明，將水面簡化爲一個靜態的斜面，這樣更加直觀；

那麼原始模型以下圖，其中斜線表明水面，圓表明水滴，是否是很簡單？

接下來咱們須要考慮，如何處理水滴和水面的粘連效果，標題既然叫作貝塞爾曲線打造極致GABottleLoading效果，我們確定是使用貝塞爾曲線這一神器了，既然使用貝塞爾曲線，那麼不用多說，就須要考慮起始點、終點、控制點這些核心數據；

從效果來看，起始點我們能夠直接從水滴上取，然而具體取到何處呢？我們能夠以水滴冒出水面的高度爲基準，而後定義一個適當比例，以該比例計算具體數據點；

既然起始點在水滴上，那麼終點毋庸置疑在水面上，具體取於何處呢？我們能夠採用以下方式（至於爲什麼要這麼取則是GA哥的思路）：

使用一個矩形框框住水滴區域，使水滴距離左右兩邊 L一、L2，而且L1 == L2 , ;

此時矩形框與水面造成交點w一、w2，我們能夠直接選取如圖所示w一、w2做爲兩個終點，這兩個點即表示水滴因爲張力而造成的拖尾和水面的接觸點；

通過以上思路，我們畫出如下圖示：

看上面這張圖，其中L3爲水面上點w1和w2的鏈接線，L4爲通過圓心而且和L3垂直的直線，wd爲L3與L4的交點，，Ct爲圓最頂端數據點，C一、C2爲垂直於L4的L5與圓環的交點;

我們將輔助線都去掉，那麼就獲得以下的圖：

在圖上，C一、C2爲起始點，W一、W2爲終點；

好了，起始點、終點我們定下了肯定的方法，控制點呢？

且繼續看下圖；

圖中L六、L9分別爲點w1及w2所在的水面的切線，L七、L8分別爲C1及C2處的切線，q1爲L6與L7的交點、q2爲L8與L9的交點，q1與q2則爲我們找的兩個控制點；

到此，包括起始點、終點、控制點在內的貝塞爾曲線所需的核心數據我們就都找到了，以下圖所示的6個點；

6個點、6個點、6個點，重要的事情說三遍......

而後我們利用以上6個點繪製兩條二階貝塞爾曲線，造成相應拖尾粘連效果，具體效果圖以下：

咱們把不須要的點去除，並填充上顏色，看看最後的效果:

那麼這部分總體效果的結果如何？請看！

這個不夠直觀？那讓咱們加上輔助點，請看！

• 圓上的白色的點從左往右分別是c一、c2，分別表示拖尾與圓的接觸點，即貝塞爾曲線的起始點；
• 圓兩側兩側紅色的點從左往右爲分別爲w一、w2，表示拖尾與水面的接觸點，即貝塞爾曲線的終點;
• 藍色點從左往右分別爲q一、q2，分別表示左右兩側的控制點；

最後，圓徹底脫離水面以下圖：

圓拖着拖尾上移：

最後拖尾斷裂：

最後水滴徹底脫離，水面恢復平靜:

讓咱們一塊兒來看看整個過程：

ok，到此，水滴從水面彈出和融入的思路分析就此結束；

2、水面的波動分析

---

一樣，我們先看下原始效果圖：

github上已實現效果圖：

沒有對比就沒有傷害，看起來是否是以爲原始效果圖要柔和天然不少？那麼究竟是什麼緣由呢？GA哥分析主要是如下兩點緣由：

• 1.波動效果，原效果圖是一個減速過程，當水波達到最高點的時候速度變爲了0，而對比圖是一直勻速的過程；
• 2.上面流動的水和下面靜止的水的鏈接處理有差別；

固然，以GA哥的尿性確定是以原效果圖爲目標，而當GA哥在PS中採用三階貝塞爾曲線去擬合的時候，發現仍是存在必定的瑕疵，不能徹底的擬合上;

最終，最右邊的鏈接弧度採用上圖所示數據做爲參數，實現的效果以下:

我擦，鏈接處不夠柔順，此時GA哥採用瞭如下處理方案；

將波動的水面擡高，和底部靜止的水面保持必定的距離，而後採用二階貝塞爾曲線將二者的鏈接處進行鏈接:

恩，上圖的效果仍是能夠接受的，讓咱們看看動起來什麼效果:

• 做者注：恩，此時如GA哥的秀髮般飄逸了！
  —— GAStudio哥

3、瓶身的繪製

---

瓶身繪製就是一個字——"扣"，扣細節，而後達到各個接觸點比較完美的鏈接;

讓咱們從左半部分的上方開始講起。
瓶口處的的彎角，一開始GA哥也是認爲是一個半圓（180度），而後再鏈接直線。然而這樣作效果不是很好，因此GA哥採用四分之一圓環（90度），而後鏈接45度的直線，最後鏈接垂直的瓶嘴直線，效果以下圖：

• 路人甲：納尼？怎麼有這麼明顯的棱角？做爲細緻的GA哥，依舊沒有放過這個細節。
• 路人乙：敢問GA哥有什麼有效的方案？使用Paint.Cap.ROUND？
• GA哥：No, No, No, Paint.Cap.ROUND 只對line的頭部有效，GA哥採用了將Paint的PathEffect設置成了CornerPathEffect，那麼就會將直線和直線間的鏈接處，自動作了圓滑處理。

那麼效果如何呢？請看下圖：

臥槽，好帥，好柔滑有木有！

此外，瓶身鏈接處（以下圖紅色標註處）也是須要注意的，要麼計算準確，完美的鏈接；要麼索性有一點缺口，採用arcTo繪製瓶身，此時缺口會自動鏈接上直線，再加上以前配置的CornerPathEffect，就會使得該處顯得天然:

接着瓶身採用圓弧繪製，從多少到多少角度都須要進行計算;

最後底部採用直線直接鏈接;

• GA哥： 恩，大家是否是以爲GA哥會說，右半部分和左半部分採用同樣的思路？
• 路人甲： 難道不是嗎？難道GA哥有啥高招？
• GA哥： 恩，GA哥這我的比較懶，因此什麼事都想偷懶；

恩，咱們都不用仔細觀察，這個瓶子是左右對稱的！因此直接反轉過來就好了哇！
關鍵代碼以下：

// Generate the right path
        Camera camera = new Camera();
        Matrix matrix = new Matrix();
        camera.save();
        camera.rotateY(HALF_FULL_ANGLE);
        camera.getMatrix(matrix);
        camera.restore();
        matrix.preTranslate(-mViewRectF.centerX(), -mViewRectF.centerY());
        matrix.postTranslate(mViewRectF.centerX(), mViewRectF.centerY());

        Path rightBottlePath = new Path();
        rightBottlePath.addPath(mBottlePath);
        mBottlePath.addPath(rightBottlePath, matrix);複製代碼

總結

• GA哥：總結？總結啥呢？
• 路人甲：看看效果唄，看你吹了這麼久，哈哈！
• 路人乙：贊同樓上的。
• 路人丙：贊同樓上的。
• 路人丁：贊同樓上的。
• ...
• GA哥：盛情難卻哇，那就獻醜了！

---

最後，附上GAStudio技術交流羣和Github，喜歡的話歡迎follow和star：

若是你想看 GAStudio Github主頁，請戳這裏；
若是你想看 GAStudio更多技術文章，請戳這裏；

QQ技術交流羣：277582728；

github地址:
github.com/Ajian-studi…