這個動畫的**是優秀網頁設計的乙個微博，看到這個效果感覺下面的圓的動畫十分的贊，於是就打算模仿這個效果。
然後接下來看我所做的簡單效果吧。
專案**：
因為時間緣故就簡單的模仿了自己感興趣的主要效果，並沒有做到全部模仿，等以後有時間了再完善(挖坑)。
將這個圓的動畫效果拆解開看的畫，其實會分為5個狀態。
狀態1
pic2.png-2.4kb
狀態2
pic3.png-2.6kb
狀態3pic4.png-2.4kb
狀態4
pic1.png-2kb
狀態5注：我這裡的狀態4和狀態5其實與原設計圖是有出入的，我這裡的5個狀態其實是對稱關係的，但是原設計圖並非是對稱關係，然後因為我偷懶，就做成了對稱設計，這個以後再優化吧~
也就是說，這個動畫效果的實現就是不同狀態之間的轉化加上水平位移的實現，現在已經將動畫肢解完了，那麼接下來就講解下如何實現圓的形變吧。
開始講解具體內容之前我們需要先了解一下如何用貝塞爾曲線畫乙個圓，因為我的做法是通過貝塞爾曲線來實現的。
stackoverflow
上圖是stackoverflow上的乙個答案，這個答案可能說的不是很清楚，這裡還有一篇文章，這兩個的結果都是差不多，就是所需要的數值c約等於0.551915024494f，具體的論證過程可以看這兩篇文章，那麼這個c的值有什麼用麼，我用最簡單的方法來說明，就是把圖中的1理解為圓的半徑，那麼對應的另外個值就應該是半徑乘以0.551915024494f。
可能有朋友還是看不懂這個c到底幹啥用呢，我下面畫乙個圖來描述下，大概是怎麼個意思。
這裡的座標軸也就是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);
通過上圖大家就能很快的明白狀態2應該如何繪製，其實就是把右邊的點向右移動點距離就行了。
其實photoshop(sketch)這些繪圖軟體中的鋼筆工具(vector)就是用的貝塞爾曲線，然後這裡推薦個**給大家，輕鬆上手鋼筆工具的使用哦，強烈推薦！！！
看完上面的講解，那麼狀態3也就一點都不難了。
看到上圖就明白狀態3的實現就是在狀態2的基礎上修改了個值，乙個是m的值加大，讓圓看起來跟肥一點，還有就是圈住的那些點向右移動，做到居中。
至此，這個動畫效果的分解也就完成了，其實一點都不難。寫到這裡的時候我才發現漏了乙個回彈，也就懶得補充了qaq，我的做法就是加個sin函式來控制，比較生硬的回彈，以後再優化吧，要去睡覺了= = 。
pytest allure 酷炫的報告
首先如果你沒有安裝 pytest 庫的話，先使用 pip 安裝一下 pip install pytest 另外還需要安裝 pytest 支援 allure 報告的外掛程式庫 2 在執行測試時，使用 pytest 命令執行 pytest 測試目錄 alluredir 測試結果存放目錄 注意 這裡的 a...
酷炫按鈕特效
在網頁製作中,按鈕是必不可少的,每個按鈕也有不同的功能,當然,更加炫酷的按鈕也會讓使用者感興趣,甚至還想多玩幾下.下面我就簡單介紹一種簡單的按鈕 本身只能看到乙個按鈕,當滑鼠懸停在按鈕上時,會上下同時拉出兩個框,這是只用到了css樣式,具體 doctype html html lang en hea...
Echarts炫酷配置
柱狀圖 grid color 00edff 直接設定柱狀圖的柱狀顏色，多個的話可以寫成陣列 datazoom bordercolor transparent 滾動條邊框 backgroundcolor 11c19c 滾動長條顏色 拖拽手柄樣式 svg 路徑 handlecolor red 滾動顏色 ...