三次貝塞爾曲線練習之彈性的圓
- 效果圖
- 貝塞爾曲線知識講解
效果圖
開始本文之前先查看一下目標效果是如何的。
這個動畫的來源是優秀網頁設計的一個微博，看到這個效果感覺下面的圓的動畫十分的贊，于是就打算模仿這個效果。
然后接下來看我所做的簡單效果吧。
項目代碼：https://github.com/DevinShine/MagicCircle
diorKTU84Papple09152015022708.gif-302.1kB
因為時間緣故就簡單的模仿了自己感興趣的主要效果，并沒有做到全部模仿，等以后有時間了再完善(挖坑)。
貝塞爾曲線知識講解
將這個圓的動畫效果拆解開看的畫，其實會分為5個狀態。
pic1.png-2kB
狀態1
pic2.png-2.4kB
狀態2
pic3.png-2.6kB
狀態3
pic4.png-2.4kB
狀態4
pic1.png-2kB
狀態5
注：我這里的狀態4和狀態5其實與原設計圖是有出入的，我這里的5個狀態其實是對稱關系的，但是原設計圖并非是對稱關系，然后因為我偷懶，就做成了對稱設計，這個以后再優化吧~
也就是說，這個動畫效果的實現就是不同狀態之間的轉化加上水平位移的實現，現在已經將動畫肢解完了，那么接下來就講解下如何實現圓的形變吧。
開始講解具體內容之前我們需要先了解一下如何用貝塞爾曲線畫一個圓，因為我的做法是通過貝塞爾曲線來實現的。
stackoverflow
上圖是stackoverflow上的一個答案，這個答案可能說的不是很清楚，這里還有一篇文章，這兩個的結果都是差不多，就是所需要的數值c約等于0.551915024494f，具體的論證過程可以看這兩篇文章，那么這個c的值有什么用么，我用最簡單的方法來說明，就是把圖中的1理解為圓的半徑，那么對應的另外個值就應該是半徑乘以0.551915024494f。
可能有朋友還是看不懂這個c到底干啥用呢，我下面畫一個圖來描述下，大概是怎么個意思。
jiangjietu.png-16.1kB
這里的坐標軸也就是Android中的坐標軸了，如果我們打算用貝塞爾曲線來畫這么一個圓的話，我們需要知道這個圓的半徑，以及圖中的M的值，知道這兩個值的話就能夠知道圖中12個點的坐標，知道坐標就能夠用Path的cubicTo方法來使用貝塞爾曲線畫出圓了。
這里稍微展示點代碼來說明如何繪制P0至P3這段圓弧。
mPath.moveTo(p0.x,p0.y); mPath.cubicTo(p1.x, p1.y, p2.x, p2.y, p3.x,p3.y);
這樣我們就知道如何使用貝塞爾曲線來繪制一個圓了。也就是狀態1和狀態5我們都會繪制了，接下來看看狀態2如何繪制。
jiangjietu2.png-108.1kB
通過上圖大家就能很快的明白狀態2應該如何繪制，其實就是把右邊的點向右移動點距離就行了。
其實photoshop(sketch)這些繪圖軟件中的鋼筆工具(Vector)就是用的貝塞爾曲線，然后這里推薦個網址給大家，輕松上手鋼筆工具的使用哦，強烈推薦！！！
看完上面的講解，那么狀態3也就一點都不難了。
jiangjietu3.png-111kB
看到上圖就明白狀態3的實現就是在狀態2的基礎上修改了個值，一個是M的值加大，讓圓看起來跟肥一點，還有就是圈住的那些點向右移動，做到居中。
至此，這個動畫效果的分解也就完成了，其實一點都不難。寫到這里的時候我才發現漏了一個回彈，也就懶得補充了QAQ，我的做法就是加個sin函數來控制，比較生硬的回彈，以后再優化吧，要去睡覺了= = 。
參考資料：
- http://bezier.method.ac/
- http://ww3.sinaimg.cn/mw1024/69b7d63agw1evxh2kw1bcg20m80go1l2.gif
- http://weibo.com/1773655610/CzUai6Gid?type=comment#_rnd1442252060746
- http://stackoverflow.com/questions/1734745/how-to-create-circle-with-b%C3%A9zier-curves
- http://spencermortensen.com/articles/bezier-circle/
- http://gavinliu.cn/2015/03/30/Android-Animation-%E8%B4%9D%E5%A1%9E%E5%B0%94%E6%9B%B2%E7%BA%BF%E4%B9%8B%E7%BE%8E/
- http://dayu.pw/svgcontrol/
- https://github.com/dodola/MetaballLoading