水波紋進度條實現

2021-08-10 21:19:22 字數 832 閱讀 3227

android自定義view——實現水波紋效果類似剩餘流量球

水波示意圖:

水波形狀,使用貝塞爾曲線。如上圖所示,y軸為控制項左邊界,在左邊界多繪製乙個週期。這個週期是水波x方向上的移動範圍。

每次進度增加的時候,繪製起始點在x右方向上移動一小段距離,隨著進度不斷增加,水波不斷向前移動。

繪製起始點x座標計算公式:

當前繪製起始點x座標=初始繪製起始點x座標+(x右方向方向上移動距離%波長)

一般情況下,進度都是漸進式的,進度的間隔可能比較小,比如從0%到5%,在這個小間隔上,希望進度是平穩過渡,而不是突兀一下到5%。參考文章的例子,就有進度過渡不平滑到問題。

解決方案如下:

假設進度從0%到100%的動時長為duration,那麼可以計算出每次進度變化的時長為duration*(progress-oldprogress)/100。累計之前動畫時長為delaytime,每次進度的屬性動畫延遲delaytime。

在屬性動畫中,由於進度變化範圍太小或時間間隔太長,每一幀的進度值可能會重複,重複幀不要繪製,以防止過渡重新整理導致動畫閃動。

1.進度為0%時要防止波峰露出,所以,0%時繪製起始點的y座標=控制項高度+波峰

2.進度為100%時要防止波谷露出,所以,100%進度時,再增加額外進度

//進度到100%時防止波谷露出

if(progress ==

100)

3.裁剪畫布顯示為圓形進度

OC實現水波紋動畫

用oc原生的貝塞爾曲線來實現該效果,下面直接上 void showwatterrippleanimation void addanimationview 將目標曲線做放大動畫 void addanimationwithshapelayer cashapelayer layer delay cgflo...

水波紋特效新增

1 listview 自定義的mylistview gridview新增水波紋特效需在列表控制項中設定 android drawselectorontop true android listselector android selectableitembackground 2 recyclervie...

shader uv動畫水波紋

效果 讓波紋在鯊魚身上動 設計思路 模型上有多個貼圖,找到一張黑色背景的貼圖 我們這裡貼圖使用的疊加的方式,而黑色背景的貼圖,黑色 0,0,0,0 不會產生任何影響 在unity中找到乙個模型,找到它的材質面板,建立乙個shader unlit shader shader custom bigfis...